CSS variables

With CSS variable you can custumize library to some decent level. You don't event need to use a preprocessor. Use Stylus only if you need an advanced control.

Defaults of CSS variables:

:root { /* Settings of body text */ --font-size: 16px; --line-height: 20px; /* Amount of grid steps per one line of text */ --grid-steps: 2; /* Grid unit size. Use it in your calculations */ --grid-unit: calc(var(--line-height) / var(--grid-steps)); /* Gutter of grid collumns */ --grid-gutter-width: 30px; /* Max width of .container on different breakpoints */ --container-sm: 540px; --container-md: 720px; --container-lg: 960px; --container-xl: 1140px; /* Size of spacers. By default it uses line-height size */ --space-1: calc(var(--line-height) * 1); --space-2: calc(var(--line-height) * 2); --space-3: calc(var(--line-height) * 3); --space-4: calc(var(--line-height) * 4); --space-5: calc(var(--line-height) * 5); }

Library uses theese variables as values of css-rules and inside calc() function. Great thing is that you can have different values on different screen sizes:

:root { --font-size: 20px; --line-height: 24px; } /* Lets make font-size smaller on smaller screens */ @media (max-width: 768px) { :root { --font-size: 15px; --line-height: 20px; } }
:root --font-size: 20px --line-height: 24px +media-down('sm') --font-size: 15px --line-height: 20px


This variable depends from other parameters: --line-height and --grid-steps. Use it in your calculations, for example you want bottom margin is equal to 8 grid units:

.some-class { margin-bottom: calc(--grid-unit * 8); }