Get your California Stylesheet for      

The easiest CSS system.

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

California Stylesheets are the no-workflow, no-code, custom-property-powered modern CSS file that works like a framework. Style pages fast without writing CSS.

Since every California Stylesheet is a CSS file, there's nothing to install, run, preprocess or compile. Simply reference ca.css.

No workflow

No gzipping. No tree-shaking. No stress. Simply use the CSS file.

Upgrade-friendly

Update your base color to instantly change the look of your site.

Anyone can read it

Simple class names, taken mostly from CSS, with no abbreviations or numbers.

Composables are CSS classes or groups of classes which give stylistic meaning to an HTML element:

<button class="big dark red">
  A button
</button>

This makes:  

Composables work with any HTML element that's visible on the page.

Try different combinations of composables:

Use the grid with the columns class:

 
 
 
 
 
 
 
 
 
 
 
 

Add the two or three class for fewer columns.

two columns

 
 

three columns

 
 
 

Add golden to two columns for golden columns.

golden two columns

 
 

Add reverse to reverse the ratio.

golden two columns reverse

 
 

Control where columns behavior occurs with breakpoint composables.

columns tablet: Columns behavior on tablet and up

columns desktop: Columns behavior on desktop and up

columns mobile: Columns behavior on mobile

columns mobile tablet: Columns behavior on mobile and tablet

Space out elements with text-padding, padding, margin and gutter.

text-padding

padding

margin

gutter

Add card, type or page with width to specify the width.

Without a specified width, width and inner width will be 100% wide on mobile, type width on tablet, and page width on desktop.

type width

card width

page width

Use inner with width to set inside width.

inner card width

Use the composable responsive with width or inner width for automatic width (full width on mobile, type width on tablet and page width on desktop).

The wide composable lets you specify column span within an any-column grid.

five wide
seven wide
six wide
six wide
two wide
two wide
two wide
two wide
four wide

Center elements with margin-auto and vertical-center.

margin-auto

vertical-center

Center vertically with the vertical-center composable on an element that has children.

div

Composables can change how text looks:

sans-serif
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
serif
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
monospace
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
small

Hello, world.

big

Hello, world.

huge

Hello, world.

Composables give elements different looks:

  • shadow
  • inset
  • shallow shadow
  • deep shadow
  • deep shadow inset
  • thick border inset
  • border-text-color border
  • thick border
  • dashed border
  • solid border
  • solid border-light
  • solid border-dark

There are hundreds of colors, with eighteen base colors:

     red

     orangered

     orange

     gold

     yellow

     lime

     green

     jade

     teal

     aqua

     cyan

     sky

     blue

     indigo

     purple

     fuchsia

     magenta

     pink

Use color alternates for variant colors.

base
 
light base
dark base
bright base
dim base

Use adverbs very and hella to modify variant colors further.

very light base
very dark base
very bright base
very dim base
hella light base
hella dark base
hella bright base
hella dim base

Some words can be used together:

light bright base
dark dim base
light dim base
dark bright base
very light bright base
very dark dim base
very light dim base
very dark bright base

Composing complement and accent makes the complement or accent of a color when composed with that color.

base
base complement
base accent
base square
base other accent
base other square

Everything is based on base: base

Grayscale colors:

white

gray

brown

black

Use warm and cool to adjust colors more:

warm lime
cool lime
warm sky
cool sky

Use tint and shade or text-white and text-black to correct text contrast issues:

tint sky
shade sky
text-white sky
text-black sky

Use unspin, neutral, unlit and basic to reset hue, saturation, lightness and adjectives respectively. Since colors use variables, every color used inside a light color will be light by default.

Combine the words for a huge natural language color palette:

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 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 fuchsia bright fuchsia light fuchsia dark fuchsia dim fuchsia very bright fuchsia very light fuchsia very dark fuchsia very dim fuchsia hella bright fuchsia hella light fuchsia hella dark fuchsia hella dim fuchsia light bright fuchsia dark bright fuchsia light dim fuchsia dark dim fuchsia very light bright fuchsia very dark bright fuchsia very light dim fuchsia very dark dim fuchsia hella light bright fuchsia hella dark bright fuchsia hella light dim fuchsia hella dark dim fuchsia 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

Use text-white and text-black to fix any contrast issues.