Learn Tachyons: Convert Your Bootstrap Columns

Recently I have become a huge fan of Tachyons.

Tachyons is a super flexible frontend framework focused on creating fast and responsive interfaces with as little CSS as possible. Tachyons is about flexibility and limitations.

Tachyons is about supporting 95% of styling needs and knowing that the rest will be a case-by-case situation and probably shouldn’t be supported by your framework.

It continues with each day that I use it…

Tachyons is also a code style. Breaking down components into their common denominators providing atomic classes that serve a single purpose.

Lets look at responsive columns:

<-- bootstrap -->
<div class="row">
<div class="col-xs-12 col-md-3">100/25</div>
<div class="col-xs-12 col-md-6">100/50</div>
<div class="col-xs-12 col-md-3">100/25</div>
</div>

<-- tachyons -->
<div class="cf-ns nl2 nr2">
<div class="fl-ns w-25-ns ph2">100/25</div>
<div class="fl-ns w-50-ns ph2">100/50</div>
<div class="fl-ns w-25-ns ph2">100/25</div>
</div>

These two grids do roughly the same thing. 3 columns respectively 25%, 50%, 25% on viewports greater than a tablet, and stacked on mobile. This is a great starting point but real life apps beyond an mvp NEVER stay with default components.

What if you want to change the grid?

padding? borders? colors?

With bootstrap you’d probably fire up a new scss file and add a class called “that-awesome-blue-column-thing” or hopefully instead more generic like “blue-grid-border”, or potentially update the variables in the scss and rebuild your stylesheets, nothing wrong with any of this… Except given a basic spec requirement would your entire engineering team create the same solution? The same class name? The same variable name? Go hunting to see if someone else has solved their problem already?

Most experienced people know that its almost impossible to expect similar outcomes without restrictions. (Have you seen CSS purge? Its a brilliant dive into the CSS overkill of popular startups.)

So thats how we got here? Yes that’s how we got here!

The problem is that most programmers end up adding colors, borders, font-sizes, padding, margin, position, display, etc. without much attempt to optimize their work. After all they’re busy working on features! I get it. Its hard to accurately clean up CSS files after yourself when moving at a fast pace. Especially given that UI and styling is almost impossible to test.

So what can we do?


Back to the Grids

Our imaginary task is to build a responsive grid(similar to amazon), each column is full-width on mobile and respectively 25%, 50%, 25% on devices greater than 800px.

Please don’t yell at me, i know these are exactly 25/50/25
  1. First with Bootstrap grid:
<div class="row">
<div class="col-xs-12 col-md-3">100/25</div>
<div class="col-xs-12 col-md-6">100/50</div>
<div class="col-xs-12 col-md-3">100/25</div>
</div>

2. Tachyons grid:

<div class="cf-ns nl2 nr2">
<div class="fl-ns w-25-ns ph2">100/25</div>
<div class="fl-ns w-50-ns ph2">100/50</div>
<div class="fl-ns w-25-ns ph2">100/25</div>
</div>

Observations? Tachyons is 2x the class names. bootstrap abstracts what the styles are doing into named variables like row and col-viewportSize-width, where tachyons extracts class names to single-use functions.

Lets Dissect the Tachyons Grid:

Container element uses cf-ns nl2 nr2

which adds a ClearFloat and negative margins on left and right. Bootstrap row does the same.

Each grid column uses fl to Float Left and then a w-SomeNumber Width with an optional media query modifier. Bootstrap column does the same thing.

the -ns after everything means “only apply on NotSmall view ports”. on mobile these rules won’t apply and we’ll have a stacked appearance!

Getting realistic, you probably want different padding on mobile than desktop, and the grid is actually 30/50/20 and NOT 25/50/25 so you will have to re-use the bootstrap mixin or to create a custom grid or just write one yourself. With tachyons you can use w-20 and w-30 instead of adding new components to your stylesheets. Same with padding/margin/borders/etc.

If you’re still here then you’ve learned 2 awesome things:

  1. You’ve learned how bootstrap grids work internally
  2. You’ve learned how to convert a bootstrap grid to tachyons
  3. You’ve learned a little bit about tachyons and modular styling!

I hope this helps people get interested in tachyons because I think its legit.

If you’re looking for a decent template to get started, I recommend Tachyon Templates which has a few open source jekyll/tachyons templates.

If you’re interested in other opinions I’d suggest reading:

Also, shout out to peter: https://medium.com/@schpet/thanks-for-writing-this-77e3a4c1289 in the comments!