Introducing Myth – New CSS guy in the market!

Myth is a postprocessor that lets you write pure CSS without having to worry about slow browser support, or even slow spec approval. It’s like a CSS polyfill.

It lets you write pure CSS while still giving you the benefits of tools like LESS and Sass. You can still use variables and math functions, just like you do in preprocessors. It’s like a polyfill for future versions of the spec.

Some of the features in CSS require runtime calculations, which neither Myth nor preprocessors handle, but what Myth does is let you write your code today in the future syntax, so that your code is future-proof. When browsers finally support these features you won’t need to rewrite anything, just remove Myth and start using the cascade!

Taking plain CSS as an input also means you can use Myth to post-process anyone else’s CSS (or another preprocessor’s output), adding the browser support you need, without having to re-write the code in a completely different syntax.

Myth is built with Rework so it’s incredibly fast, and has a nice Javascript API in addition to the CLI.

Following are some examples that are demonstrated in Myth website.

Variables:
The same syntax from the CSS spec, using the var() function.

:root {
var-purple: #847AD1;
var-large: 10px;
}a {
color: var(purple);
}pre {
padding: var(large);
}
:root {
var-purple: #847AD1;
var-large: 10px;
}a {
color: #847AD1;
}pre {
padding: 10px;
}

Math:
The same syntax from the CSS spec, using the calc() function.

pre {
margin: calc(var(large) * 2);
}
pre {
margin: 20px;
}

No Prefixes:
Prefixes for common browsers are automatically added, so you don’t need worry.

a {
transition: color .2s;
}
a {
-webkit-transition: color .2s;
transition: color .2s;
}

You can fork the API on GitHub.

Source: http://www.myth.io/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s