tachyons-algolia

CSS framework to build Algolia-branded projects.

⚠ This is primarily made for Algolia employees

note by @haroenv: publish /build

Why do I need it?

tachyons.css is a set of CSS classes that each do one thing and one thing only. For example, .red will put the text in red while .dib will set the display to inline-block. It also comes with a cohesize scale so all the margins, paddings and font-size follow the same curve.

The goal is to stop having to write specific CSS for each new project. By using tachyons, you have a pool of utility classes that you can use and add to your HTML markup.

The biggest advantage is that you only have to look at your HTML markup to understand what it will look like because all the classes are here in front of you. As each classe does only one thing and is only applied to one element it's easy to reason about.

I was very skeptical of this approach when I heard about it, but I finally tried it and can attest that coming back to a project 6 months later is really easy thanks to it. You just look at the HTML code and the associated classes, and you understand how it all fits together quickly.

This projects takes tachyons.css as a base, but also adds Algolia-specific classes (main example would be our branded colors and fonts). It also includes some shorter classnames for things you do often (like flexbox layouts), as well as extending with some utility classes not present in the base tachyons (max/min width/height).

How is that different than adding style elements to each tag?

It can seems similar to adding style elements (something that is considered really bad practice), but in reality it is much different.

style attributes have the highest priority of all CSS selectors, meaning you cannot override them easily. Here, we only have class names, with very straightforward selectors that you can still easily override if you need it in some specific contexts.

Usage

It is supposed to be used with webpack or purifycss, in order to remove all the unused CSS classes. Because it relies on a model where each CSS class does one thing only, a large amount of CSS classes can be generated by default, but you might not need all of them.