Created by AJ Zane / @azanebrain
#myDiv {
color: red;
}
/* This is easy. I'm happy. */
A simple non-language that just worked
/* THIS IS INSANE!
WHAT HAPPENED TO MY LIFE!? */
.wrapper {
/* TODO: Extend clearfix */
width: 100%; max-width: 980px;
}
.headline, .headline-special {
float: left; font-size: 2rem;
}
.headline-special {
/* wait.. are we using this anymore? */
text-align: center;
}
@media screen and (min-width: 769px) {
.wrapper {
background-color: #ccc; width: 95%;
}
.headline {
font-size: 1.5rem; line-spacing: 1.1rem;
}
}
The map of an inanimate space through time
"Use the tools you have
to get around the problems
caused by your other tools."
Provide perks of scripting languages (variables, loops, functions, etc...)
Is it time for something new?
Probably
(╯°□°)╯︵ ┻━┻
"PostCSS is a tool for transforming styles with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more." ~ GitHub.com/postcss/postcss
If it's not broken, don't fix it, right?
JSON: { "colorList": {
"c1" : ["#000000", "#000011"],
"c2" : ["#000011", "#000022"],
} }
Node: var categories = require('./data/cat-colors.json');
var dataloop = function(css) {
for ( var category in categories.colorList ) {
var colorSet = categories.colorList[category];
var borderTop = colorSet[0];
var borderBottom = colorSet[1];
var rule = corepostcss.rule({ selector: '.cat-' + category });
rule.append({ prop: 'border-top', value: '1px solid ' + borderTop});
rule.append({ prop: 'border-bottom', value: '1px solid ' + borderBottom + ";"});
css.append(rule);
}
};
CSS: .cat-c1 {
border-top: 1px solid #000000;
border-bottom: 1px solid #000011;
}
"Bugfixes are pushed often. Minor changes won't break your code. Major releases are, well, major and are not supposed to happen a lot. Codebase is exploded into smart and standalone packages so it's easier to work on something or fix a bug." ~ cssnext.io
Faster than libsass
Media query organization
Z-Index rebasing
Vertical rhythm
Fits into any workflow:
gulp, grunt, broccoli, webpack,
terminal, codekit
... maybe?
Autoprefixer
Evaluate the necessities of your stack
Add modules when the need arises
I'm AJ Zane (@azanebrain)
Check out POSTCSS