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

Watch Star

The easiest CSS system.

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

This page uses a California Stylesheet, the no-workflow, no-code, custom-property-powered modern CSS file that works like a framework.

 

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

Most layout is handled automatically, using left and right padding to set smart defaults of usable interior width.

two columns

Add two columns to an element to make children elements display in two columns.

INPUT

<div class="two columns">
  <div class="light blue">California</div>
  <div class="light blue">Stylesheets</div>
</div>

RESULT

California
Stylesheets

three columns

Add three to make children elements display in three columns. This works up to twelve columns, which is the default.

INPUT

<div class="three columns">
  <div class="light blue">California</div>
  <div class="light blue">Stylesheets</div>
  <div class="light blue">(CASS)</div>
</div>

RESULT

California
Stylesheets
(CASS)

golden columns

Use the golden class with columns to get two columns in the golden ratio.

INPUT

<div class="golden columns">
  <div class="light blue">California</div>
  <div class="light blue">Stylesheets</div>
</div>

RESULT

California
Stylesheets

reverse golden columns

Add the reverse class to reverse the golden columns.

INPUT

<div class="reverse golden columns">
  <div class="light blue">California</div>
  <div class="light blue">Stylesheets</div>
</div>

RESULT

California
Stylesheets

wide

Add the wide class to a columns child element to make it span multiple columns.

INPUT

<div class="three columns">
  <div class="two wide pink">California</div>
  <div class="three wide pink">Stylesheets</div>
</div>

RESULT

California
Stylesheets

For more columns, set the --c CSS custom property to the desired number.

Color

By default, color classes change the background color. Add the text-color class to change the text color

These are the 18 colors in the color palette:

base
complement
accent
red
orangered
orange
yellow
green
teal
cyan
blue
indigo
purple
pink
white
gray
brown
black

light, bright, dim and dark

Use the classes light, bright, dim and dark to modify colors.

INPUT

<div class="two columns">
  <div class="light blue">light blue</div>
  <div class="bright blue">bright blue</div>
  <div class="dim blue">dim blue</div>
  <div class="dark blue">dark blue</div>
</div>

RESULT

light blue
bright blue
dim blue
dark blue

very and hella

Use the classes very and hella to further modify colors.

INPUT

<div class="two columns">
  <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

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

CASS enforces a sensible page width and text measure (how long the words run in a line) automatically.

type, card, page and full

The width classes let you adjust the default width. They work by default on an inner-width approach. You can add the class width to give it a more traditional width.

This paragraph is a padding red card paragraph.

This paragraph is a padding red card width paragraph.

Adjust the --text-measure CSS custom property to adjust text measure. Tweak the default line height and font size with the --line-height and --font-size-base CSS custom properties. Set --text-indent to 0 to disable the automatic text indent. Or just use the no-text-indent class.


text-color

Use text-color with a color to color text instead of the background color.

INPUT

<h2 class="text-color red">A red headline</h2>

RESULT

A red headline

Responsiveness

CASS has three breakpoint targets: mobile, tablet and desktop. These classes work with the columns, fixed and hide classes, enabling these behaviors only where you want them.

mobile

Only on mobile

tablet

On tablet and above

desktop

On desktop

mobile tablet

On mobile and tablet

CASS has different settings for each target, with font size and padding being much smaller on mobile.

INPUT

<div class="two columns tablet">
  <div class="light blue">California</div>
  <div class="light blue">Stylesheets</div>
</div>

INPUT

<span class="hide mobile">hide on mobile</span>

INPUT

<div class="fixed desktop">fixed on desktop</div>

Other

margin

Add a margin to an element.

vertical-center

Vertically center the contents of an element.

border

Add a border.

rounded

Add rounded edges.

shadow

Add a shadow.

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 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 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 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 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 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 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