CASS does what the big frameworks do... without all the framework.
California Stylesheets: An atomic medium-weight framework that uses CSS custom properties.
No tooling. No tree-shaking. No stress. Just use the CSS.
Give your documentation a great set of type standards and colors in one small file.
Write 90% fewer lines of CSS with smart defaults that anyone can learn and use.
The columns class makes a container element display children elements as columns (twelve by default).
Use wide to adjust column width of children elements.
INPUT
<div class="columns"> <div class="two wide pink"> </div> <div class="three wide pink"> </div> <div class="four wide pink"> </div> </div>
RESULT
Add [number] columns to an element to make children elements display in [number] columns. Works up to twelve, the default.
INPUT
<div class="three columns">
<div class="light blue"> </div>
<div class="light blue"> </div>
<div class="light blue"> </div>
</div>
RESULT
Use the golden class with columns to get two columns in the golden ratio.
Use reverse golden columns to reverse the wide and narrow column positions.
INPUT
<div class="golden columns">
<div class="light teal"> </div>
<div class="light teal"> </div>
</div>
RESULT
INPUT
<div class="reverse golden columns">
<div class="light teal"> </div>
<div class="light teal"> </div>
</div>
RESULT
Add these classes to columns to determine where the column behavior starts, breakpoint-wise.
These classes also work with the fixed and hide classes, determining where their behavior happens.
tablet breaks around the text measure width.
desktop breaks around the page width.
The class base makes the background color of an element the base color.
The accent and complement classes both change depending on the base color.
Add a color name as a class to make the background of an element that color.
Adjust a color's lightness by adding light or dark.
INPUT
<div class="three columns"> <div class="light blue">light blue</div> <div class="blue">blue</div> <div class="dark blue">dark blue</div> </div>
RESULT
Adjust a color's saturation by adding bright or dim.
INPUT
<div class="three columns"> <div class="bright blue">bright blue</div> <div class="blue">blue</div> <div class="dim blue">dim blue</div> </div>
RESULT
Use the class very or hella to further modify color adjectives.
You can use super if hella is just too much California for you.
INPUT
<div class="two columns"> <div class="blue">blue</div> <div class="dark blue">dark blue</div> <div class="very dark blue"> very dark blue </div> <div class="hella dark blue"> hella dark blue </div> </div>
RESULT
Use the class padding to pad color edges. The classes padding-top, padding-right, padding-bottom, and padding-left work too.
Add tight for tighter padding.
INPUT
<div class="dark blue padding">dark blue</div>
RESULT
INPUT
<div class="blue tight padding">blue</div>
RESULT
Inset text at roughly the width of a smaller golden column with card.
Set the text inside to the text measure with type, roughly equal to the bigger column in golden columns.
This insets text to the page width, which is the default. This keeps your text from running across the whole screen inside any element.
This uses the full inner width, which makes padding work like normal.
INPUT
<div class="blue card padding">blue</div>
RESULT
Add the width composable to card, type or page to set the actual width, and not a faux-inner-width that uses padding. Use margin-auto to center it.
INPUT
<div class="blue card width">blue</div>
RESULT
Use text-color with a color to color text instead of the background color. Use text-light too if it's a dark background.
INPUT
<h2 class="text-color red">A red headline</h2>
RESULT
Add tiny, small, big and huge to adjust font size. Works on headlines too.
This is tiny text.
This is small text.
This is big text.
This is huge text.
Add a margin to an element.
Vertically center the contents of an element.
Add a border.
Add rounded corners.
Add a shadow.
Use with fixed or absolute to position elements.
Look through ca.css to learn more about CASS.