Last year, Dan started developing a CSS mini-framework to use on Fore Design projects. Designed around a flexible grid system, it had a handful of pithy classes like title, headline, and intro and was meant to be designer friendly, semantic, modular, and extendible.

The idea was to make something that helped us execute our then-new web design process that started with a clickable outline and, over time, evolved into a finished website. He struggled to create a system that could smoothly make the transition but also offered enough design flexibility to satisfy our needs. In a bout of frustration, he gave Tachyons a try.

At first he hated it. All of the classes in his HTML looked ugly and seemed inscrutable and the technique seemed to violate everything he knew about CSS, the benefits of the cascade, and semantic naming. Still he pushed forward with the idea that it’s good to challenge your habits and, as he grew to understand and trust the conventions of the Tachyons design system, he began to love it.

What is Tachyons?

At its most basic, Tachyons is a bunch of tiny utility classes that map to CSS properties that can be chained together to create design. You might be tempted to think of Tachyons as a CSS framework but it’s not really. There aren’t any nav bars or default button styles or other design decisions to pollute your blank canvas. Instead, it’s built around a scale that governs type size and measurements for padding, margins, and other properties where size comes into play.

Tachyons also elegantly handles responsive design with breakpoints for “not small,” “medium,” and “large.”

If you’re interested in learning more about Tachyons’ technical qualities or how to use it, you should read the documentation or, if you’re looking for examples of Tachyons in action, you can view the source code for a few of the sites we’ve built with it: Shubox, KCFA, and our own site.

For now, let's focus on the tangible benefits we've experienced as a design team:

Velocity

Not long after experimenting with Tachyons, it became clear that semantics were holding us back from making design decisions and quickly iterating in the browser. Not only did we have to make the actual design decision, but then we needed to figure out what to call it, how to structure it, make sure there weren’t any naming conflicts, etc.

With Tachyons’ functional approach, we didn’t need to worry about what to call different elements. We could design in a much more fluid way because we were making the majority of our design notation in HTML, therefore writing way less CSS and switching contexts less often.

Stability

You might be thinking, “What if I want all my headlines to be a different color? Won’t I need to go back and change all those classes?” Yes, you will, and that can be a substantial effort if you’re making a change late in the process, however; if you’ve worked on any code base of sufficient size, you’ll know the feeling of dread of understanding the code, let alone deleting or making a significant change. The fear of unexpected consequences either becomes paralyzing or leads to bloated CSS.

With Tachyons, we felt like we were given the license to experiment, evolve our design systems, and make granular design decisions. Finding and replacing classes doesn’t seem like a bad compromise when you’re gaining creative flexibility along with stability in your code. There’s a liberation to knowing that your site will never appear to be broken to the end user and, because there’s a predesigned scale, nothing will ever look truly out-of-whack even if it doesn’t adhere to your style guide 100 percent.

Efficiency

For us, Tachyons eased the transition from design software to code editor so much so that we’ve completely cut making comps out of our process.

One big, albeit unsurprising, benefit from working directly in the medium of the web is that we’ve been able to experiment and push our design and technical boundaries further — with much less time and effort.

We’d love to hear whether anyone is using Tachyons currently and what your experience has been like. And if you haven’t tried it yet, we’d love to know if you do.