My New Favorite CSS Framework — Tachyons
Ask your designer if Tachyons is right for you!
Sorry for the lack of examples in this post. This is more of a conceptual overview.
Tachyons is a new approach to the traditional CSS Framework. In the past there have been 2 primary options. You could go with a well rounded, opinionated, and complete approach like Bootstrap that just does it all for you. I haven’t looked at Bootstrap in years, but I remember it being very hard to configure and tweak and that the classes they used were very verbose. Then there’s the more flexible, minimal option like with Zurb’s Foundation. Foundation provides a very light design and gives you a quite thorough configuration file where you can adjust anything and everything to your heart’s content.
Tachyons offers a new approach I haven’t seen anywhere else. They have a finely granular set of tools that you use to build your design. Where other frameworks like Bootstrap and Foundation are like building a website with Duplo blocks, Tachyons is like building it with Legos. Even those flat 1/3 size pieces you have to pry apart with your thumbnail. I really liked the spaceship sets back in the 80s that weren’t based on any movie, just some designer’s awesome imagination. But I digress.
So why is a finely granular approach different and better? In the past, I’ve gravitated to frameworks like Foundation and Ionic that give you a solid baseline which you configure. The thing is, the configuration is never enough. I wind up tweaking the config, then I start adding a little CSS here, and a little more, and then some more, and so on. Tachyons gives you a non-opinionated design that let’s you have all the control of the more flexible frameworks without the tweaking and configuration. All the tweaking you need can be done by just changing the HTML classes themselves. I’d go so far as to say that for most designs, you wouldn’t need to touch the CSS at all.
Why did I need something new? Was adding a little CSS really so bad? It wasn’t bad at all and certainly not bad enough to cause me to give up on my old frameworks. I was looking for something new because the front-end landscape has changed and my needs are changing with it. I find that even the flexible CSS frameworks are only internally flexible. Foundation can be very difficult to incorporate with JS frameworks like Angular 1 and React / React Native. Ionic was built on Angular and doesn’t inherently play well with React or others. As I’m exploring new JS frameworks, I’m looking for a CSS framework I can take with me.
I wanted something to be flexible and still pure CSS if possible as I get tired of having to reconfigure my projects to use Sass if the framework doesn’t already. I looked at a handful of “minimal” CSS frameworks and wasn’t too happy. Seriously? No nested grids? Next. Why all the purple? Next. If your framework is so minimal, why isn’t your documentation? Next. And so on. I had just about given up on my search when I found Tachyons. Under the hood, it uses PostCSS which brings you the next generation of CSS today, much like what Babel does for JS. But it also compiles to just a simple minified CSS file. With Foundation, you lose all your customizability when you go down to CSS. Tachyons’ customizability is baked right in to its classes so there’s no loss of awesome by just dropping a link in your HTML header.
Why wouldn’t you want the atomic approach? It’s a little more design intensive and can make your HTML more verbose (yes I know, that’s the same problem I had with Bootstrap.) With a traditional CSS framework, you may have, say, a generic header you can drop in. With Tachyons you’d need to specify a full width, center aligned box. So if you have zero design chops, you may want to stick with Bootstrap. Also, if you have a lot of similar HTML components, there’s a lot of duplicate code. Let’s say you have a button on many pages and want it to look the same across the app. You have to copy and paste that button everywhere. Change one and they all need to change. Yuck!
Where does the atomic approach work best? There’s a strong trend toward more finely granular, component based, front-end architecture. This is where, I believe, Tachyons really shines. That button I mentioned in the last paragraph doesn’t need to be copied with Web Component style architecture. It can be reused. What’s more, it can be made without writing a single line of, often cumbersome, CSS. (edit: I rebuilt the One Tap Homepage with Tachyons. I only needed 35 lines of CSS for custom font, colors, and special effects.) And since it’s plain CSS, it can work with existing CSS frameworks. Want to make your buttons more or less roundy? No problem! And no need to tweak the CSS, just add the appropriate Tachyons class(es) and BLAM!
I am a huge fan of both Ionic the software and Ionic the company. However, I’m recognizing the rise in popularity in other frameworks, specifically React Native. I know that I need to switch soon. What’s awesome is that Tachyons actually has first class support for React Native as well, making it completely portable wherever I could want to go. It’s a CSS framework I can use in both my mobile apps, as well as my web apps.
I’ve spent a few years in the world of front-end web dev and experienced all the churn firsthand. I started with Less, then I moved to Sass. I had to learn how to install Sass in Grunt, then a year later, Gulp, then a year later, Webpack. I’ve had similar experiences with JS as well of course, like Underscore to LoDash, and Angular 1 to Angular 2 for example. I’ve learned that simple, stable, and future proof technology is worth its weight in gold. And Tachyons is all of those things.
