Opinions on Tachyons?


#1

So, I wanted to create a quick Hugo site to add some additional info/images for some items I have for sale (the Norwegian market place for this is a little 1990 in this department). Camera lenses, so some images and some info …

So I had a look at:

https://tachyons.io/

And was kind of impressed how simple it was to get a fairly solid and good looking responsive grid collection:


http://bep.is/forsale/

Just a copy and paste from here https://tachyons.io/components/collections/square-title-subtitle/index.html – I will add “bundle and resource logic” etc., but that I know how to do.

So, gohugo.io uses Tachyons, so It has to be good, but I haven’t spent time to learn it (I have only guessed :slight_smile: ),


#3

I used it some months ago and was impressed as well. I developed a small site with it and got a lot of help looking at the source code of Hugo-Site. I needed only a few lines of custom css. Impressive. I’ll give it a try for the next bigger project. Should work in every scale. Currently it’s 4.9.1 and it seems that version 5 is around the corner. No date yet.


#4

Try changing one of those subtitle to two lines and your grid is broken.

I really don’t know about tachyons (other than my experience in the hugo doc) but this system is using float so in order to make it work you either have to make sure every block is the exact same height or wrap each of your rows in a distinct html tag.

All the cool kids use css grid these days :wink: Maybe tachyon has an implementation of it…


#5

A similar system that I really like is Tailwind:

To me it has a slight advantage over Tachyons in being more customizable but also offers an “out-of-the-box” experience like Tachyons.

For quick-and-dirty site development I’ve come to strongly prefer this category of styling tool over Bootstrap/Bulma/Foundation/etc.


#6

Yea, that is correct. No css grid support as of now (they are discussing it), but they have flexbox support, which seems to do what I want even when I add some more lines:

http://bep.is/forsale/


#7

I’ve used tachyons on several sites now. As I see it, advantages: simplicity, rapid prototyping and a consistent look.

A disadvantage I suppose is your class tags get pretty cluttered because it, and tailwind, are “atomic”. So you can set things quite quickly, and pretty much figure out what’s going on while you’re doing it, but, it’s fairly cryptic if you go back and try to remember what tc or mt2 are. I like how it “calls it like it is” though, so colors are simply their name.

After finishing a tachyons project, I decided to use bulma for my business’ site. Pretty good, some things it suprisingly lacks, like spacing commands. Also it’s comically verbose, with your tag classes filling up with stuff like: has-text-is-primary. It “bundles” things more than tachyons.


#8

Yea, the class names are funky. I’ve been doing some adjustments to the Hugo site and have been totally guessing and trying …


#9

But there’s also a “verbose” version of Tachyons: https://github.com/tachyons-css/tachyons-verbose


#10

Well, Tachyons model is verbose by nature (“bnt-large” vs 100 composable classes), so verbose classnames would make you need a “css class minifier”.


#11

Completely OT

@bep from where is that Roman(?) column capital?

I’ve never seen this variant before and it’s quite interesting.


#12

Funny you should ask … It is from Istanbul Archaeology Museums, Impost capital, image of emperor and empress, marble, Haznedar Bakırköy, 5th-6th century.

My photo. In full size here:


#13

I use Tachyons plenty. Great for prototyping, and rapid enough given it does not use JS.

It serves a purpose, and pretty extendible too.


#14

I tried using tachyons. I think it is good for prototyping and showing functionality. However, if I am working with a designer and get complete design files I find it easier to just write out the css.


#15

As you might guess, I love using utility class-based CSS. Makes it really easy to look into your code and know what’s going on; allow you to change one element without breaking something else; you can add them to any other CSS.

I now use Tailwinds because it’s configurable and pluggable (currently getting good use out of a Grid plugin), but there’s some overhead in using it because the way it’s structured you really need to use PurgeCSS, which means you’re probably using Webpack. If you don’t want to worry about a build, Tachyons is still great.


#16

By the way, lots of discussion on this topic for the skeptical: https://johnpolacek.github.io/the-case-for-atomic-css/ . My favorite is https://adamwathan.me/css-utility-classes-and-separation-of-concerns/


#17

I agree. I just checked the Hugo site for which I have no idea about the CSS. But I can read these lines due to my knowledge of Tachyons and could immediately change the styles without writing new CSS.

<nav class="bg-primary-color-dark pv4 w-100" role="navigation">

This Navigation has a background with the primary color and a vertical padding with the value 4. The width is 100%.

<div class="center flex-ns flex-wrap items-center justify-start mw9">

This DIV is centered and uses flexbox if the viewport is not small. The items of the DIV are centered as well and the grid justifies at the start point. The max-width has the value 9.

This quick reading would not be possible if the site would have been done with Bootstrap for example.

Like it.


#18

Yea, well, it requires some training …


#19

I’m a huge tachyons fan, all I use these days. It works so well with a component workflow.

If you already know css well, tachyons is just like a shorthand delivered direct to the html class.

Tailwind appeals to me in its ability to compose together pre existing classes but hey I can do that with the tachyons SASS version with @extend albeit a bit clunky.

My current experiment is tachyons + MDC web components to create an entire application layout. Going well!


#20

For those wanting a deep dive into decisions made for Tailwind I can recommend

Episode 76
And
Episode 77

Of the fullstack radio, where the creators introduce it.
It is also useful as a general introduction for utility based css in general like Tachyons.

TLDR: Tailwind is utility first but realistic enough to offer a convenient way to build common components like buttons.


#21

I would love to see that in action, as I’ve been looking to experiment with MDC as well. If this work is open source, could you possibly share your results here?