Copy it

The easiest CSS system.

CASS does what the big frameworks do... without all the framework.

California Stylesheets: An atomic medium-weight framework that uses CSS custom properties.

  • Typography-first
  • Hundreds of colors
  • No build step
  • Just 9kb
  • Only normal English words (and some from California)

Watch Star

No workflow

No tooling. No tree-shaking. No stress. Just use the CSS.

Great for docs

Give your documentation a great set of type standards and colors in one small file.

Write less CSS

Write 90% fewer lines of CSS with smart defaults that anyone can learn and use.

Layout

columns

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

 
 
 

[number] columns

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

 
 
 

golden columns

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

 
 

tablet, desktop

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.

Color

base

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.

base
complement
accent

[color]

Add a color name as a class to make the background of an element that color.

red
orangered
orange
gold
yellow
lime
green
jade
teal
aqua
cyan
sky
blue
indigo
purple
magenta
pink
white
gray
brown
black

light and dark

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

light blue
blue
dark blue

bright and dim

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

bright blue
blue
dim blue

very and hella

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

blue
dark blue
very dark blue
hella dark blue

padding

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

dark blue

INPUT

<div class="blue tight padding">blue</div>

RESULT

blue

Typography

card

Inset text at roughly the width of a smaller golden column with card.

type

Set the text inside to the text measure with type, roughly equal to the bigger column in golden columns.

page

This insets text to the page width, which is the default. This keeps your text from running across the whole screen inside any element.

full

This uses the full inner width, which makes padding work like normal.

INPUT

<div class="blue card padding">blue</div>

RESULT

blue

width

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

blue

text-color

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

A red headline

tiny, small, big, huge

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.

Other classes

margin

Add a margin to an element.

vertical-center

Vertically center the contents of an element.

border

Add a border.

rounded

Add rounded corners.

shadow

Add a shadow.

top, right, bottom, left

Use with fixed or absolute to position elements.

Look through ca.css to learn more about CASS.

base
bright base light base dark base dim base
very bright base very light base very dark base very dim base
hella bright base hella light base hella dark base hella dim base
light bright base dark bright base light dim base dark dim base
very light bright base very dark bright base
very light dim base very dark dim base
hella light bright base hella dark bright base
hella light dim base hella dark dim base
complement
bright complement light complement dark complement dim complement
very bright complement very light complement very dark complement very dim complement
hella bright complement hella light complement hella dark complement hella dim complement
light bright complement dark bright complement light dim complement dark dim complement
very light bright complement very dark bright complement
very light dim complement very dark dim complement
hella light bright complement hella dark bright complement
hella light dim complement hella dark dim complement
accent
bright accent light accent dark accent dim accent
very bright accent very light accent very dark accent very dim accent
hella bright accent hella light accent hella dark accent hella dim accent
light bright accent dark bright accent light dim accent dark dim accent
very light bright accent very dark bright accent
very light dim accent very dark dim accent
hella light bright accent hella dark bright accent
hella light dim accent hella dark dim accent
red
bright red light red dark red dim red
very bright red very light red very dark red very dim red
hella bright red hella light red hella dark red hella dim red
light bright red dark bright red light dim red dark dim red
very light bright red very dark bright red
very light dim red very dark dim red
hella light bright red hella dark bright red
hella light dim red hella dark dim red
orangered
bright orangered light orangered dark orangered dim orangered
very bright orangered very light orangered very dark orangered very dim orangered
hella bright orangered hella light orangered hella dark orangered hella dim orangered
light bright orangered dark bright orangered light dim orangered dark dim orangered
very light bright orangered very dark bright orangered
very light dim orangered very dark dim orangered
hella light bright orangered hella dark bright orangered
hella light dim orangered hella dark dim orangered
orange
bright orange light orange dark orange dim orange
very bright orange very light orange very dark orange very dim orange
hella bright orange hella light orange hella dark orange hella dim orange
light bright orange dark bright orange light dim orange dark dim orange
very light bright orange very dark bright orange
very light dim orange very dark dim orange
hella light bright orange hella dark bright orange
hella light dim orange hella dark dim orange
gold
bright gold light gold dark gold dim gold
very bright gold very light gold very dark gold very dim gold
hella bright gold hella light gold hella dark gold hella dim gold
light bright gold dark bright gold light dim gold dark dim gold
very light bright gold very dark bright gold
very light dim gold very dark dim gold
hella light bright gold hella dark bright gold
hella light dim gold hella dark dim gold
yellow
bright yellow light yellow dark yellow dim yellow
very bright yellow very light yellow very dark yellow very dim yellow
hella bright yellow hella light yellow hella dark yellow hella dim yellow
light bright yellow dark bright yellow light dim yellow dark dim yellow
very light bright yellow very dark bright yellow
very light dim yellow very dark dim yellow
hella light bright yellow hella dark bright yellow
hella light dim yellow hella dark dim yellow
lime
bright lime light lime dark lime dim lime
very bright lime very light lime very dark lime very dim lime
hella bright lime hella light lime hella dark lime hella dim lime
light bright lime dark bright lime light dim lime dark dim lime
very light bright lime very dark bright lime
very light dim lime very dark dim lime
hella light bright lime hella dark bright lime
hella light dim lime hella dark dim lime
green
bright green light green dark green dim green
very bright green very light green very dark green very dim green
hella bright green hella light green hella dark green hella dim green
light bright green dark bright green light dim green dark dim green
very light bright green very dark bright green
very light dim green very dark dim green
hella light bright green hella dark bright green
hella light dim green hella dark dim green
jade
bright jade light jade dark jade dim jade
very bright jade very light jade very dark jade very dim jade
hella bright jade hella light jade hella dark jade hella dim jade
light bright jade dark bright jade light dim jade dark dim jade
very light bright jade very dark bright jade
very light dim jade very dark dim jade
hella light bright jade hella dark bright jade
hella light dim jade hella dark dim jade
teal
bright teal light teal dark teal dim teal
very bright teal very light teal very dark teal very dim teal
hella bright teal hella light teal hella dark teal hella dim teal
light bright teal dark bright teal light dim teal dark dim teal
very light bright teal very dark bright teal
very light dim teal very dark dim teal
hella light bright teal hella dark bright teal
hella light dim teal hella dark dim teal
aqua
bright aqua light aqua dark aqua dim aqua
very bright aqua very light aqua very dark aqua very dim aqua
hella bright aqua hella light aqua hella dark aqua hella dim aqua
light bright aqua dark bright aqua light dim aqua dark dim aqua
very light bright aqua very dark bright aqua
very light dim aqua very dark dim aqua
hella light bright aqua hella dark bright aqua
hella light dim aqua hella dark dim aqua
cyan
bright cyan light cyan dark cyan dim cyan
very bright cyan very light cyan very dark cyan very dim cyan
hella bright cyan hella light cyan hella dark cyan hella dim cyan
light bright cyan dark bright cyan light dim cyan dark dim cyan
very light bright cyan very dark bright cyan
very light dim cyan very dark dim cyan
hella light bright cyan hella dark bright cyan
hella light dim cyan hella dark dim cyan
sky
bright sky light sky dark sky dim sky
very bright sky very light sky very dark sky very dim sky
hella bright sky hella light sky hella dark sky hella dim sky
light bright sky dark bright sky light dim sky dark dim sky
very light bright sky very dark bright sky
very light dim sky very dark dim sky
hella light bright sky hella dark bright sky
hella light dim sky hella dark dim sky
blue
bright blue light blue dark blue dim blue
very bright blue very light blue very dark blue very dim blue
hella bright blue hella light blue hella dark blue hella dim blue
light bright blue dark bright blue light dim blue dark dim blue
very light bright blue very dark bright blue
very light dim blue very dark dim blue
hella light bright blue hella dark bright blue
hella light dim blue hella dark dim blue
indigo
bright indigo light indigo dark indigo dim indigo
very bright indigo very light indigo very dark indigo very dim indigo
hella bright indigo hella light indigo hella dark indigo hella dim indigo
light bright indigo dark bright indigo light dim indigo dark dim indigo
very light bright indigo very dark bright indigo
very light dim indigo very dark dim indigo
hella light bright indigo hella dark bright indigo
hella light dim indigo hella dark dim indigo
purple
bright purple light purple dark purple dim purple
very bright purple very light purple very dark purple very dim purple
hella bright purple hella light purple hella dark purple hella dim purple
light bright purple dark bright purple light dim purple dark dim purple
very light bright purple very dark bright purple
very light dim purple very dark dim purple
hella light bright purple hella dark bright purple
hella light dim purple hella dark dim purple
magenta
bright magenta light magenta dark magenta dim magenta
very bright magenta very light magenta very dark magenta very dim magenta
hella bright magenta hella light magenta hella dark magenta hella dim magenta
light bright magenta dark bright magenta light dim magenta dark dim magenta
very light bright magenta very dark bright magenta
very light dim magenta very dark dim magenta
hella light bright magenta hella dark bright magenta
hella light dim magenta hella dark dim magenta
pink
bright pink light pink dark pink dim pink
very bright pink very light pink very dark pink very dim pink
hella bright pink hella light pink hella dark pink hella dim pink
light bright pink dark bright pink light dim pink dark dim pink
very light bright pink very dark bright pink
very light dim pink very dark dim pink
hella light bright pink hella dark bright pink
hella light dim pink hella dark dim pink
white
bright white light white dark white dim white
very bright white very light white very dark white very dim white
hella bright white hella light white hella dark white hella dim white
light bright white dark bright white light dim white dark dim white
very light bright white very dark bright white
very light dim white very dark dim white
hella light bright white hella dark bright white
hella light dim white hella dark dim white
gray
bright gray light gray dark gray dim gray
very bright gray very light gray very dark gray very dim gray
hella bright gray hella light gray hella dark gray hella dim gray
light bright gray dark bright gray light dim gray dark dim gray
very light bright gray very dark bright gray
very light dim gray very dark dim gray
hella light bright gray hella dark bright gray
hella light dim gray hella dark dim gray
brown
bright brown light brown dark brown dim brown
very bright brown very light brown very dark brown very dim brown
hella bright brown hella light brown hella dark brown hella dim brown
light bright brown dark bright brown light dim brown dark dim brown
very light bright brown very dark bright brown
very light dim brown very dark dim brown
hella light bright brown hella dark bright brown
hella light dim brown hella dark dim brown
black
bright black light black dark black dim black
very bright black very light black very dark black very dim black
hella bright black hella light black hella dark black hella dim black
light bright black dark bright black light dim black dark dim black
very light bright black very dark bright black
very light dim black very dark dim black
hella light bright black hella dark bright black
hella light dim black hella dark dim black