Yet another CSS framework

Frank Lämmer

Published in

Teutonic CSS

3 min readDec 19, 2017

I am currently writing a CSS framework. Am I crazy? Sanity check!

Missing with others

There are at least mature 100+ CSS frameworks out there. Let’s have a look what’s missing, perhaps:

1st Gen: Bootstrap & Foundation

I loved Bootstrap, I discovered LESS and a whole lot more with it. Both, Foundation and Bootstrap are great eco-system with strong communities. You’ll find an answer to any question and an extension for any need. But looking at this now somehow feels like jQuery to me — just not up-to-date. Also, these systems have grown-up to a certain level of complexity. I see so many options — not a smooth learning curve to get started.

2nd Gen: Bulma, Pure and others

Those are great and they solve the pains I have with the above mentioned legacy frameworks. Bulma is really a great alternative to Bootstrap, or maybe even a better reboot. The only thing: I am missing some unique style here.

Next Gen: Tachyon, Tailwind and others

I am a designer who sucks at coding. Sure the utility classes approach is advanced, more professional and versatile. But I still craft templates on my own, instead of generating HTML by JS. In my humble opinion six CSS classes on one element is too much:

<div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">

I am neither a fan of BEM. The C in CSS is for cascading and that’s ok. I like to have a clear frame, with opinionated ways and classes. More options is not always better.

The real reason

Let’s be honest here. I have gathered the arguments above just for justification after I am already half way done now.

I was just too lazy and impatient to research any existing solutions and in self-esteem and hubris I just decided to started my own from scratch.

Genesis

My upcoming CSS framework is actually a company-grown design system. I initially started this as a style foundation for our (fortrabbit) web identities around 2014. The previous version was based on Bootstrap and I was desperately looking for a more unique look and some custom gimmicks.

A shared style across web properties

The idea was to have a shared style sheet across multiple websites: a marketing website, a documentation and a dashboard. I like when the browsing experience stays 100% consistent.

A shared style is also easier to maintain, than multiple ones— a system for quick updates and experiments. Also, our static assets are stored in a CDN-backed Object Storage (think S3). So the Stylesheet project lived early on in it’s own repo with it’s own deployment.

Yes, loading monolithic style-blobs is an anti-pattern in todays web, but still, performance wise this is good—at least in our case. The first load is a bit slower, but the style just gets loaded once and later on it’s already cached in the browser. Our user journey is long enough.

Also, the footprint of the combined, minified and gzipped production file is not too big, as it has not much overhead. So I believe in terms of kilobytes and available design options — this is a good balance.

Current status

Preparing an update project for fortrabbit, I started refactoring the CSS code base. So, I found myself generalizing lot’s of stuff, which of course broke things. In the first iteration a living style guide got me a quick overview on impacts of recent changes — think test-driven CSS development.

Atomic elements are fine, but I also wanted components and modules and some more structure around it. This led to a simple Jekyll-generated CSS documentation.

And I always wanted to publish an open source project. Turns out this one here will become it.