3 ms·
Tachyons is based on mathematical scales: http://tachyons.io/docs/layout/spacing/ http://tachyons.io/docs/layout/spacing/ Practical example: I have a form with
by cel1ne 10y ago
Tachyons is based on mathematical scales: http://tachyons.io/docs/layout/spacing/ http://tachyons.io/docs/layout/spacing/
Practical example: I have a form with a header. I look at it and think "there needs to be more space below the header". So I change
className="mt0"
to
className="mt1"
It hot-reloads etc. It took me exactly two keystrokes to change this and I know that the spacing is consistent with all the other spacing in my app.
- ryannevius 10y agoBut how is that any more efficient than changing: style="margin-top: 1rem;" to style="margin-top: 2rem;" It's also two keystrokes, and is mathematically determined...
- cel1ne 10y ago1. way less clutter and repeating, my whole style is in one line per tag. 2. the scale also has fractional rem values. I'd rather change "f5" to "f6" for a smaller font than: "fontSize: 1rem" to "fontSize: 0.875rem". 3. the author of tachyons clearly understand design. If he improves his stylesheet, I benefit. 4. Apparently inline-styles are slower [0], but I don't count that since everything could be extracted. [0] http://ctheu.com/2015/08/17/react-inline-styles-vs-css-stupid-benchmark/ http://ctheu.com/2015/08/17/react-inline-styles-vs-css-stupi... 5. I thoroughly enjoy using it. :)
- deleted 10y ago[deleted]
- bshimmin 10y agoPerhaps I'm just a fuddy-duddy, but I rather like MDN's description of what classes used to be for: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att... (The second paragraph.)