Retiring my own little CSS framework
I am winding down my Teutonic CSS framework. Here is why, some history on the project and a rant.
I created Teutonic CSS back in 2017 as a successor for the styles that are (still) powering all our company (fortrabbit) websites. We never put it in action for reasons that are beyond the scope of this article.
Teutonic CSS is a CSS framework with a unique look. Visually, it was close to what our websites looked back then. Conceptually I mixed and matched what I liked most and what felt practical to me.
- Simple code that is easy to understand, just SCSS
- A good mix of semantic class names and utility classes
- A minimal color system with easy dark mode
- Modular scale systems for typography and spacing
- Automatic layout grid that resizes like with container queries (min-max)
- Opinionated styles for typography and form elements
- Theming via CSS variables
- Small build size
- Good documentation
It suited my personal preferences and requirements. Flexible, but without being too verbose. Easy to understand and control. I learned some CSS tricks along the way.
We recently started building a new web project (new dashboard for a new fortrabbit). For the initial click dummy I used Teutonic CSS. I came far getting it up-to-date and enhancing it (see feature branch) along the way. But the backlog to add more features was also getting longer (groups, modifier classes, container queries …).
My colleagues questioned my choice. Why not Tailwind CSS?
So I gave it a spin and switched the CSS framework for the dashboard dummy containing quite a few pages and partials. Creating a similar visual appearance was easy. 80% was done in a few hours by replacing class names. The details took a few days.
After all, the efforts where lower than expected. Every concept from Teutonic was available in Tailwind (and that was amazing). In addition I got some useful extra features. I had fun playing around with the container queries (plugin).
We settled to continue with Tailwind. Not having to be responsible for the CSS framework is a relief.
I have to admit that I am also struggling (not just my ego): Maybe I am missing something? But, having to add almost every single CSS property on a HTML element is cumbersome and hard to maintain for me:
<button class="block rounded border-2 focus:outline focus:outline-accent-200 dark:focus:outline-accent-900 border-link-800 bg-link-700 text-link-100 hover:bg-link-800 focus:border-accent-700 dark:border-link-400 dark:bg-link-500 dark:text-link-100 dark:hover:bg-link-400 dark:focus:border-accent-500" />16 CSS classes on the button above. The button is a web component (and there are other ways for abstraction and Prettier sorts the class names), so I only need to write this once, but still…
That’s just too long to wrap my head around. It’s hard to maintain.
Windi CSS has a attributify mode that looks great. UnoCSS looks even more awesome. Maybe I should port Teutonic CSS to run on top of UnoCSS?
I still would like to continue to improve and extend my own CSS framework Teutonic. For me it’s the perfect mix of some utilities, some opinionated semantic classes and even some old school cascading classes. (I never adapted BEM CSS syntax.)
A utility-first CSS framework like Tailwind is beautiful and flexible. But it feels too verbose to me, for example to give each headline a couple of classes just so that it looks like a headline. In total, for the project it was the right decision to use Tailwind not my Teutonic CSS.
I am tempted to try out a no-class CSS framework next after that.
p.s. is anyone still using Medium?
