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.