28/02/2016

Vanilla uses CSS variables

CSS variables is one of the sweetest things that happened to the CSS standard lately. It narrows the gap between native CSS and the preprocessors (like LESS, SASS, Stylus). Browser support is excellent in Firefox and Chrome but it needs to get better in mobile browsers (and IE). Vanilla is now making heavy use of CSS variables in order to flexibly set the typographic properties of a web page, the way the typography scales up and down, the vertical typographic rhythm of text, the grid gutters and the vertical rhythm of the grid. Our vision is to be able to quickly set up the main properties of a Vanilla-based theme via CSS variables.

For instance the grid gutters are defined internally like this resonsiville.moressete.css:

[class*="column"] {
    float     : left;
    width     : 100%;
    min-height: 1px;
    padding   : 0 3rem;
    padding   : 0 var(--grid-gutter);
}

[class*="column"] .row {
    margin: 0 -3rem; 
    margin: 0 calc(-1 * var(--grid-gutter)); 
}

Default values are provided for browsers that do not support CSS variables.

Then, in style.init.css one simply has to set the relevant CSS variables to their desired values for each breakpoint they need to differentiate:

.tablet {
    --font-scale      : 1.125;
    --base-font-size  : 1.5rem;
    --text-line-height: 1.6;
    --text-rhythm     : 3rem;
    --grid-gutter     : 2rem;
}

Home page