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.
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!
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:
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.
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.
Our expertise is only as good as our ability to share it with you. Here are the latest thoughts and ideas from our team.
Throughout my 14 years in the design industry, I’ve used countless tools to work on my design projects. One of the first tools I used was the venerable design workhorse Adobe Photoshop, and it became my favorite tool for web and print design back in 2004. In the early days of my career, I considered Photoshop to be the most complete tool in terms of web design and mobile application design. Challenging Adobe’s dominance, Sketch arrived in 2010 and in my opinion revolutionized the UI/UX design process for Mac users. I loved Sketch and used it whenever I could for my web projects, but its lack of compatibility with PCs proved to be an inconvenient limitation in mixed-platform environments.
When I tell people that I’m a user experience (UX) designer, most people nod politely as their eyes glaze over for a second, and they try to move the conversation along. Early in my career I thought they were completely uninterested, but over time, I came to realize that many people simply don’t know what UX is and might feel awkward about asking. On behalf of misunderstood UX designers everywhere, please allow me to introduce you to the wonders of quality UX and why you should care about it.
What is a visual brand identity, you ask? It’s only one of the most important things about your business. Branding is far more in depth than aesthetics. It delves into the core of why you exist as a business. It requires hours of research and analysis to ultimately cultivate something visually appealing that communicates your message: your visual identity. A visual identity is comprised of a system of external expressions such as a logo, color palette and texture, typography, iconography, illustration, photography, motion principles, and composition.