What Bootstrap could borrow from Tachyons

Refactoring: Title Preview Author Media

This is sort of a CSS-in-HTML approach that requires very little custom CSS code 💅

Bootstrap always had helper classes, like the famous .clearfix 😀 However, in version 4 they greatly improved support for functional CSS by introducing Bootstrap Utilities. So, I was curious to compare Tachyons and Bootstrap Utilities to see how compatible they are.

It was obvious that there would be some classes that are 1-to-1 replacements for each other: such as .bt .bb for .border-top and .border-bottom respectively; .db for .d-block and .center for .mx-auto 😌

But there also would be some that require approximation, for example, color classes. Tachyons has a very basic color naming system, there is black, near-black, there is red, green, and blue, and all the rest of the 🌈 rainbow colors. Bootstrap’s color space is more contextual: primary color, secondary, success, danger, etc. In v4 they also added dark color, which is essentially the near-black from Tachyons 😐

And finally, there are some classes that are unique to Tachyons, and maybe it would make sense to adopt them in Bootstrap 😊

Both libraries favor flex based layouts. The component that I’m refactoring has a vertical layout on small screens, and horizontal on larger screens. In Tachyons it’s achieved by flex flex-column flex-row-ns, this is pretty much how Bootstrap’s row class works, if we omit flex-wrap 😉

The poster image is styled to be full width on small screens and 40% on larger screens (w-100 w-40-ns); Bootstrap only has w-25 with 25% increments, but a more canonical way would be to use columns, ie col-md-5. Another thing worth mentioning is that Tachyons img has max-width: 100% by default, which seems useful 👍 For Bootstrap I had to add .mw-100.

To set the maximum width of the outer container the example uses .mw7, which on the Tachyons’ scale of maximum widths translates to 48rem. Bootstrap only has a standard size .container. This is something that is definitely missing from Bootstrap 😟

Tachyons defines a few CSS classes for common font families 😕 This is not a common practice, as very few fonts are universally supported across different platforms. This example is using .baskerville for titles and .avenir for everything else, I’m leaving them as is. It’s worth mentioning that Bootstrap is using system fonts by default, and the only font family utility class that I know of is text-monospace.

Another interesting thing about titles is that the example is using .fw1(font-weight: 100). Bootstrap has font-weight-light which equals to 300. But when it comes to Baskerville font, there is no difference between the two. Most fonts don’t implement all of the possible weights.

Bootstrap 4 sets the default font-size of 1rem which usually translates to 16px, and default line-height is 1.5. Since Tachyons does not have defaults for that, there are .lh-copy and .lh-title which have similar values 🙂

Bootstrap does not have font size utility classes. .f5 is 1rem which is the base font size in Bootsrap. There is a scale for headings, but .h1 is not the same thing as .f1, as headings have additional styling. In this case, Tachyons is just exposing CSS through classes, and bootstrap is using more of a semantic approach. Not to defend bootstrap, but an argument could be made, that font size is not the most useful tool when it comes to communicating meaning in the text, see illustration below.

Both libraries implement .w-100 (width 100%). The only problem is, Bootstrap has !important👎 and that breaks Tachyon’s .w-40-ns (width 40% on larger screens). I switched to columns from Bootstrap’s grid to avoid this issue.

Both libraries also implement .h4. But they actually do different things. Tachyon’s .h4 sets height to 8rem. But for Bootstrap it’s a heading level 4. I fixed this by adding .h-auto from 🤔

Bootstrap’s links are not underlined by default, but they are on hover. a:hover takes precedence over .no-underline. Changing Tachyon’s rule to a.no-underline helps take the precedence 🔝 This would be great to have in Bootstrap.

And the last thing I’ll mention is that Tachyons has a class called .dim, it changes opacity for various mouse states. This is useful to highlight interactive components, especially from the accessibility point of view. Another potential great addition to Bootstrap 🤩

It was an interesting experiment, and I think that it’s safe to say that Bootstraps Utilities are powerful enough to compete with Tachyons. Bootstrap has a lot more defaults, that reduce the code you as a developer have to write. But Tachyons library size is much much smaller, so fewer bytes shipped to your end user. I think ultimately the library choice depends on how familiar and comfortable your team is with both technologies 😎

Check out the Styles I could not remove because there is no equivalent in bootstrap ☝️

Related posts:

I have never had a clear explanation for this but certain things about this place just make me so happy. The smell, the expansiveness, the lights, the huge machines, the sound, the rush. I don’t even…

Running a security program can be an overwhelming task. There are so many factors to consider including: encryption, application security, disaster recovery and let’s not forget adherence to…

GraphQL is a query language for your API, and a server side runtime for executing queries. A single endpoint can return data about multiple resources, which makes it a great fit for Vue.js single…