Getting started with Myth, the future preprocessor

Myth is a CSS preprocessor that allows you to use new and experimental CSS features in your projects right now.

Why myth?


With Myth, you can make full use of even those CSS properties that are still in the development phase of W3C and are not supported by the vast majority of browsers. But its main advantage over other preprocessors is that you do not have to learn a new markup language, as happens with SASS or LESS. Myth uses standard CSS markup. Therefore, you don’t have to rewrite anything when support for certain properties appears in browsers, but just recompile existing styles, which usually takes just a few seconds - Myth will do the rest for you.

Here are some of the CSS features currently available in Myth:



Example


Here is a small CSS example using Myth, containing properties not yet supported by most browsers:

:root {
  --bgcolor: #0072bc;
  --textcolor: color(var(--bgcolor) lightness(85%));
}
.button {
  display: block;
  width: 90%;
  max-width: 220px;
  padding: 10px;
  background: var(--bgcolor);
  color: var(--textcolor);
  border-radius: 6px;
  transition: background-color 0.4s ease-out,
              color 0.3s ease-out;
}

After compilation, Myth converts this example to such that most browsers correctly understand it:

.button {
  display: block;
  width: 90%;
  max-width: 220px;
  padding: 10px;
  background: #0072bc;
  color: rgb(179, 224, 255);
  border-radius: 6px;
  -webkit-transition: background-color 0.4s ease-out,
                      color 0.3s ease-out;
  transition: background-color 0.4s ease-out,
              color 0.3s ease-out;
}


Myth Installation


First you need to install node.js using the installation wizard . After that, run the Node.js command prompt:

image

To install Myth, use npm (the standard Node.js package manager). Run the following command:

npm install -g myth

image

If the installation of Myth completed correctly, then we should see something like this:

image

Create Responsive Design Using Myth


Let's create simple responsive markup using Myth:

image
Demo
Sources

Explanation


This is what the folder structure of this demo looks like:

/demo/
|-- /css/
  |-- dev.css
  |-- styles.css
  |-- styles.min.css
|-- /images/
|-- index.html

  • The folder / css / contains files with the styles of our project
    • dev.css - the input styles file we are working with
    • styles.css - recompiled Myth, the output styles file that the site will palm off to the browser
    • styles.min.css - minified version of styles.css

  • / images / - graphics used in our project.
  • index.html - and of course the page we are working on


Linking input and output files


We will use the following Node.js command to go to the place where our styles are located:

cd /path/to/your/folder/css

Where / path / to / your / folder / css is the actual path to the style files on the local machine or server. The next step is to tell Myth that dev.css is the file we will work with, and styles.css is the final file into which Myth will automatically compile our styles every time it changes:

myth --watch dev.css styles.css

If you want to compile yourself, get rid of --watch:

myth dev.css styles.css

Note that dev.css must already exist while styles.css is created automatically if it is not found. Naturally, you can use any names for your files, and not just those considered in this example.

Adding CSS Myth


In order to see the markup of our example, you can look at the source. Below is the contents of dev.css. As you can see, it uses experimental functions such as variables, custom media queries and the color () function:

:root {
  --max-width: 960px;
  --gutter: 2%;
  --base-size: 17px;
  --small-size: 14px;
  --base-lineheight: 1.4;
  --default-color: #464646;
  --default-bgcolor: #fff;
  --link-color: #0072bc;
  --dark-bgcolor: #759ea1;
  --dark-bgcolor-text-color: color(var(--dark-bgcolor) lightness(85%));
  --highlight-color: firebrick;
}
@custom-media --small-devices (max-width: 400px);
@custom-media --medium-devices (min-width: 401px) and (max-width: 750px);
* { 
  margin: 0;
  padding: 0;
}
body {
  background: var(--default-bgcolor);
  color: var(--default-color);
  font: normal var(--base-size)/var(--base-lineheight) "Roboto", sans-serif;
  text-align: center;
}
img {
  width: 100%;
  height: auto;
}
/* Typography */
h1, h2, h3, p {
  margin: 5px auto 20px auto;
}
h1 {
  font-size: calc(var(--base-size) * 3);
  line-height: calc((var(--base-size) * 3) * var(--base-lineheight));
}
h2 {
  font-size: calc(var(--base-size) * 2);
  font-weight: 400;
  line-height: calc((var(--base-size) * 2) * var(--base-lineheight));
  color: color(var(--highlight-color) saturation(-20%));
}
h3 {
  font-size: calc(var(--base-size) * 1.2);
  font-weight: 400;
  line-height: calc((var(--base-size) * 1.2) * var(--base-lineheight));
  color: color(var(--highlight-color) saturation(+50%));
}
a {
  color: var(--link-color);
  text-decoration: none;
  transition: color 0.2s ease-in;
}
a:hover {
  color: color(var(--link-color) lightness(-10%));
  transition: color 0.4s ease-out;
}
/* Layout */
header {
  display: block;
  width: 100%;
  min-height: 500px;
  padding-top: 100px;
  background: var(--dark-bgcolor)
              url(header-bg.jpg) no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  color: var(--dark-bgcolor-text-color);  
}
.container {
  position: relative;
  width: 96%;
  max-width: var(--max-width);
  margin: 0 auto;
}
.fullcol, .halfcol, .fourthcol {
  float: left;
  box-sizing: border-box;
  margin-left: var(--gutter); 
}
.container .fullcol,
.container .halfcol:first-child,
.container .fourthcol:first-child  {
  margin-left: 0;
}
.fullcol {
  width: 100%;
  text-align: center;
}
.halfcol {
  width: calc((100% - var(--gutter)) / 2);
}
.fourthcol {
  width: calc(((100% - (var(--gutter) * 3)) / 4));
}
section {
  float: left;
  width: 100%;
  padding-top: 80px;
  padding-bottom: 80px;
}
/* Special */
.logo {
  margin-top: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 2px;
}
.tagline {
  text-transform: uppercase;
}
.button {
  display: block;
  width: 90%;
  max-width: 220px;
  margin: 30px auto 50px auto;
  background: var(--link-color);
  color: var(--dark-bgcolor-text-color);
  border-radius: 6px;
  padding: 10px;
  transition: background-color 0.4s ease-out, color 0.3s ease-out;
}
.button:hover {
  background: color(var(--link-color) tint(50%));
  color: color(var(--dark-bgcolor-text-color) whiteness(100%));
  transition: background-color 0.3s ease-in, color 0.2s ease-in;
}
.credits {
  margin: 80px auto 20px auto;
  font-size: calc(var(--base-size) * 0.75);
  color: color(var(--dark-bgcolor-text-color) hue(+120%));
}
#work {
  background: color(var(--dark-bgcolor) lightness(+30%));
}
#contact {
  background: color(var(--highlight-color) saturation(-30%));
  color: var(--dark-bgcolor-text-color);
}
#contact h2 {
  color: color(var(--dark-bgcolor-text-color) saturation(+20%));
}
/* Media Queries */
@media (--small-devices) {
  .fullcol, .halfcol, .fourthcol {
    width: 100%;
    margin-left: 0;
    text-align: center;
  }
  .button, .tagline {
    font-size: var(--small-size);
  }
  .logo {
    margin-top: 0;
    font-size: calc(var(--base-size) * 1.8);
    line-height: calc((var(--base-size) * 1.8) * var(--base-lineheight));
  }
}
@media (--medium-devices) {
  .fourthcol {
    width: calc((100% - var(--gutter)) / 2);
    margin-left: var(--gutter);
    margin-bottom: 20px;
  }
  .container .fourthcol:nth-child(odd) {
    margin-left: 0;
    clear: left;
  }
}


Debugging


When working with Myth, in case of errors, information about them will be displayed on the Node.js command line, so it can be considered as a debugging tool. For example, if a custom media query has not been announced, you will see the following picture:

image

Also, in case something goes wrong, the Myth debugger will pamper you with the following information
  • what exactly happened;
  • on which line did this happen;
  • what Myth did in response to the mistake;
  • proposed solutions to the problem;


CSS optimization for better performance


Something else you can do to improve performance before you host your site on a web server is to minify your stylesheet (write on one line). In Myth, this process is automated and implemented using the --compress function:

myth --compress dev.css styles.css

In our example, this reduced the file size by 20%.

Something More About Myth Commands


Teams can also be written in abbreviated form. For example, you are free to write:

myth -c -w dev.css styles.css

Instead:

myth --compress --watch dev.css styles.css

You can read more about this in the list of teams on the official website.

conclusions


Myth is a great preprocessor, perfect for developers who are eager to start using all the experimental CSS features. In addition, to work with Myth you do not need to learn additional markup languages, which, of course, is a big plus. And finally, I’ll duplicate links to demos and sources of the project, which was considered as an example in this article:

Demo
Sources

Source of translation: www.sitepoint.com/getting-started-myth-preprocessor-future/

Also popular now: