Every once in a while, I’ll share a peek into my ever-changing web design toolbox.
My favorite new addition in the past year has been Tachyons (pronounced "TACKY-ons"), a lightweight, responsive CSS toolkit that accurately bills itself as “functional CSS for humans.”
I’ve been using Tachyons to quickly prototype responsive websites and applications, and I’ve even used it as my primary design tool of choice on some small hobby projects. It’s saved me time and allowed me to focus on the UI instead of fiddling with CSS and its quirks.
Tachyons has become my web design tool of choice for many reasons.
It’s responsive.
Every website should be responsive—it’s not a question anymore. It shocks me how often I observe people (in 2017, where everybody’s using a smartphone for everything) skipping over a mobile experience, or worrying about a desktop experience first.
Tachyons uses a mobile-first architecture, in which base classes are mobile by default. It forces you to always think mobile-first.
It’s lightweight and accessible.
In my recent Lunch & Learn @ Liquid—Empowering Users by Designing for Accessibility—I talked about the unfortunate trend of web page bloat over time, which uses more bandwidth, slows page load time, strains users’ devices, and makes for a poor experience overall. The average webpage size is approaching an unwieldy 3MB!
The entire Tachyons library weighs in at under 14KB when gzipped and minified—and that’s if you’re using the entire thing. Most pages I’ve created with Tachyons, even after including HTML markup, images, and light Javascript, weigh in at under 100KB. That means every page performs well, loads quickly, and creates a better user experience.
And, from using a predictable type scale to documenting accessible color combinations to building in “measures” for readable line length, Tachyons is designed to maximize accessibility.
It’s flexible and easy to use.
I’ve used my fair share of front-end frameworks and web design tools. Tachyons helps minimize design time and allows me to iterate faster, since it’s quite predictable in the way you use the framework.
For example, if I create a <div> that looks like:
<div class="w-100 w-50-ns bg-near-white dark-red pa2 pa4-ns"></div>
I know that it will have:
- w-100: A width of 100% by default (the smallest size).
- w-50-ns: A width of 50% at the “not small” size.
- bg-near-white: A near-white background (as defined in Tachyons Skins).
- dark-red: Dark-red text.
- pa2: Padding of all edges with a value of “2” (as defined in Tachyons Spacing).
- pa4-ns: Padding of all edges with a value of “4” at the “not small” size.
Some people will balk at this “classitis” (lots of classes on one element), but it’s quite simple to manage. It’s actually become quite rare that I touch CSS (Tachyons uses PostCSS, by the way) since it’s easier to apply predictable, descriptive classes to an element.
With the Tachyons approach, I spend more time designing and less time wrestling with CSS.
It’s well-documented.
While Tachyons is easy to learn, and quite predictable in things like its naming conventions, the library’s documentation is well-organized, simple to understand, and incredibly helpful.
An incredible bonus is the open source Tachyons component library. The component library contains a growing list of dozens of common web page and web app elements written in simple, static HTML and out-of-the-box Tachyons CSS. The component library saves a lot of time when prototyping or creating a starting point.
Another helpful resource is the Tachyons Skins documentation. Tachyons includes a collection of color classes for text, backgrounds, and borders. The documentation includes a nicely documented list of hundreds of accessible-friendly color combinations using its stock color classes.
Give it a shot!
Tachyons has become an indispensable tool in my web design arsenal, whether I’m creating a quick, functional prototype or a production-ready design. It’s saved me hours, allowed me to focus on what’s important, and improve my responsive and inclusive design mindsets.