A New Kind of CSS

clairity.css is a responsive, semantic, classless CSS framework, with ambitions to grow into a complete (classful) design system one day. It's loosely inspired by almond.css, sakura.css, normalize.css, Semantic UI, and others.

The core issue clairity.css addresses is making HTML simple and approachable. We've tried all the big CSS frameworks and all of them fail to present simple HTML as a first approach. We're not dogmatic about classless CSS or anything like that, but we'd sure as heck like to start with classless CSS first & then get fancier as needs dictate.

On the flipside, it's become fashionable to develop small, classless css libraries that only cater to the single-page, or perhaps the static blog, use case. These show promise, but always fall well short of common expectations and needs when used on even slightly larger projects. We often need a css framework that starts with the basics and grows with our project, accommodating more sophisticated techniques and structures over time. However, the focus on small size (reminiscent of code golfing) and classlessness relegate these frameworks to toy status, because they can't accommodate anything but the most basic HTML.

The next jump up from handcrafted, standalone css is to full-blown tooling- and pipeline-heavy frameworks like bootstrap, bulma, and tailwind. There's just really nothing in between these two extremes. clairity.css aims to address that hole, mostly for ourselves, but for everyone else too.

One size doesn't fit all

With that in mind, we offer 3 alternatives of clairity.css that fit the three broad use cases:

  1. Simple Sites: clairity.basic.css styles only HTML (pseudo-)elements (and a very limited set of common pseudo-classes, like :hover) and provides a rich set of CSS variables to customize and semantically style any basic single-page or personal blog site
  2. Passion Projects: clairity.classless.css builds on the foundation of basic to style an array of common HTML constructs by default, without resorting to CSS classes, and provides a good jumping-off point for developing your own classful CSS framework
  3. Rich Web Apps: clairity.css provides a full-blown, classful CSS framework that aims to provide rich composable components built atop the classless version

We achieve this progressive offering by structuring our CSS using the ITCSS approach of increasing specificity/complexity in successive layers of the CSS framework (though we're not dogmatic about this either). By putting each layer in a separate .css file, we can compose increasingly extensive versions of clairity.css by simply importing successively deeper layers of our ITCSS structure into the entrypoint files described above.

An experiment

clairity.css is an experiment in pushing raw css to its logical limit for expressing common idioms of structure and design without resorting to extra tooling.

See the About page for more on the principles upon which clairity.css is built.