Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

Tachyons.css: http://tachyons.io/

Suddenly CSS became fun again and my time designing websites went down by a guessed factor of 5.



What happens when your boss all of a sudden wants to change all the colors from blue to red?


I have the same problem, and I've yet to find an acceptable solution.

Another problem I've encountered: functional CSS (such as Tachyons) is only good for minimal layout. I was recently converting a mobile+tablet+desktop PSD design to CSS with very complicated reordering rules (this <div> is full height on the right on desktop, floated bottom of the page on tablet, etc.) and all my elements had 20+ classes attached to them.

So I went back and converted regular 60+ lines of CSS. Still, for some reason, working with Tachyons was for some reason faster and "easier" to reason about.

I think it's a step in the right direction, but we're not there yet.


That's a problem for your text-editor. Use search and replace.

Also, if you're using something like React, you can share the style strings in variables.


you reach for sed/awk ;)


I bookmarked it. Are you using bootstrap / foundation?


I've used bootstrap in the past, but not anymore.

Tachyons is different, it doesn't give you components but single-purpose classes and a font-relative layouting system:

http://tachyons.io/docs/layout/spacing/

It takes a while getting used to the names, but after that it's just awesome that you don't have to think about padding, margin and font-size values anymore. Just slap "pa1" or "pa2" there and everything looks pretty.


Doesn't it lead to inconsistent layout if someone forgets to add it? I am not a designer, but few things irks me more than paddings varying across the same 'components'.

From experience, your method is easier to think through, but later on it is more time consuming to modify a layout. pa1 and the like should be treated the same as magic numbers.


That is the point. Padding can't be inconsistent if there are only 7 values to choose from, not 1..7, but powers of two, so 0.125, 0.25, 0.5, 1, 2, 4, 8rem.


Joe will chooses 0.25, Mary picks with 0.125 while Huan goes with whatever is the default. There will be inconsistency if there is more than one choice available (empty is also a choice). Someone will slip up, it is only inevitable.


And if somebody doesn't use the library, but pixels or percentages, you get the same problem. You can't use a library to replace communication in a team.

But having 7 rem-relative steps, that fit together makes the common use-case way easier: Joe: "I need more padding on this, so I use pa2 instead of pa1".

If you feel the urge to check your code base it's easy to write scripts that count the occurences of "pa1..pa7". It's not so easy if you have to take into account "padding: 1px", "padding: 20%", "padding: 3em" etc.


It's like emmet all turned on CSS.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: