cleacss v3.1.0
A CSS framework for enthusiasts.
Built on sensible defaults, CSS custom properties, and fluid everything. This page is written in cleacss and is intended as a little guideline to explore how the framework is intended to be used.
npm install cleacss
Toggle the grid overlay in the bottom right to see the layout system in action.
Fluid Spacing
Every spacing value uses clamp() to scale smoothly between viewport sizes.
No
jumping between fixed breakpoint values.
Automatic Dark Mode
Colors are defined with OKLCH and wrapped in
light-dark() so colors adapt to your
system theme automatically.
14-Column Grid
A subgrid-powered layout system with full-bleed and content-width zones. Nest grids, break out of containers, span any number of columns.
Typography that flows well
The type system is built on fluid sizing: headings and body text scale between a minimum and maximum
using clamp(). Text wrapping uses pretty for body copy and
balance for headings, giving every line a natural rhythm.
Typographic styles are only applied to .text elements and their children, no need to overwrite
default styles when you
do not need them.
A paragraph with bold text, italic text, inline code, and a
hyperlink to the docs. The framework
styles all native HTML
elements
with fluid typography that scales between viewport breakpoints.
- Include the stylesheet
- Override any CSS custom property on
:root - Build your layout with the grid and flow utilities
Dynamic color palette
All colors use OKLCH for perceptual uniformity and light-dark() for automatic dark mode.
Override any color on :root.
Neutral scale
Semantic colors
See the color palette to customize the neutral palette.
The grid system
A 14-column grid with named content and full-width zones. Elements snap to columns with
.span-* and .start-* classes. Add :m, :l, or other
breakpoint suffixes for responsive layouts.
Flow layout
Use .flow for vertical stacking and .flow-row for horizontal layouts.
Control spacing with .has-gap-* classes.
Native HTML, styled by default
Every form element, button, and table is styled out of the box. No extra classes needed on standard elements, just write HTML.
Can I customize the colors and spacing?
Every design token is a CSS custom property on :root. Override
--color-accent, --space-s, or any other variable to make it yours. No
build step required.