clairity.css
A semantic, responsive CSS framework
Hey look! It's a hero banner home page!
A semantic, responsive CSS framework
Hey look! It's a hero banner home page!
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.
With that in mind, we offer 3 alternatives of clairity.css that fit the three broad use cases:
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.
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.