17 ms·

Tachyons – A CSS Toolkit

67 points by impoppy 3y ago

no_wizard 3y ago
I don't know if this is maintained anymore. Last commits are from 3 years ago
- pkdpic 3y ago
  Yeah, I remember liking tachyons but whats it doing on the front page?
- cmitsakis 3y ago
  This branch was updated 5 days ago https://github.com/tachyons-css/tachyons/tree/v5-final-final https://github.com/tachyons-css/tachyons/tree/v5-final-final more info on this PR https://github.com/tachyons-css/tachyons/pull/705 https://github.com/tachyons-css/tachyons/pull/705
- impoppy 3y ago
  Oh, damn, you are right, I had no idea. I just saw their front page, really liked its design and felt like you guys might like it as well. It's very much like Tailwind, but, unlike the latter one, it doesn't hide example components behind the paywall, which puts TACHYONS far ahead.
- naasking 3y ago
  I'm not sure what "maintained" means for a CSS toolkit. Unless the CSS directives it uses are deprecated at some point, what maintenance is needed?
  - no_wizard 3y ago
    Dark mode would be a nice addition. Some utilities could be cleaned up or expanded etc.
qingcharles 3y ago
No dark mode support? :(
omegabravo 3y ago
Tailwind before tailwind. It's strange, I never saw the point of it, however I saw the value in tailwind almost straight away. I think that might be the difference in examples. The tachyon examples always look uninspiring.
- PaulHoule 3y ago
  For me it is the opposite, tailwind makes me immediately feel ill, Tachyon looks like fun.
  - positus 3y ago
    Tachyons __is__ fun! I have found it to be better for rapid prototyping than Tailwind. The class names are more intuitive as they seem to line up somewhat with Emmet text-expansion triggers, and it's much faster to throw the single <link> in the header than to set up Tailwind every time. Tachyons has always felt so fast.
  - pelagicAustral 3y ago
    I second this. Tailwind is an awful little tech that will fade away in a few years (already doing so) and will leave behind nothing but a horrendous, unreadable overhead of technical debt. There was a push to build tutorials for whatever using Tailwinds (Build a blog with Hotwire, or something), those were there fastest tab closes ever performed on my lifetime. Those tutorials are useless, they have so much added nonsense that will not stand the test of time that might as well not exist at all.
- snarkyturtle 3y ago
  Tailwind was great because it made it obvious how the classes connected to the configuration. Tachyons was very much was marketed as a "bootstrap" sort of thing where it wanted you to use their configuration and that's it.
- toastercat 3y ago
  Tachyons and Basscss were Tailwind before Tailwind. Both are proof that a good idea (debatable) alone is not a enough to earn the collective mindshare of front-end devs; you need shiny examples, a cool splash page, and a looooot of marketing. For what it's worth, I enjoyed Basscss more than Tailwind, although I mostly just stick to CSS Modules + CSS variables these days.
PaulHoule 3y ago
I like it and I don’t. I mean <b>bold</b> is a little simpler than <div class=“b”>bold</b> Certainly designers have struggled to think systematically enough to define a set of classes that are basically semantic even though, when they do it puts their skills on wheels because they can design it and other people can knock out pages consistent with the design. Things like this make me think CSS needs namespaces though, just the other day I found out there was more than one library in an application I am working on that declares properties of “.dropdown” which could be a problem. More generally you really ought to be able to pull some HTML out of page A and transcode it into page B and that means copying the styles and a lack of namespaces for id(s) and class(es) gets in the way of that. In principle you could have syntactic macros for HTML or frameworks that work on the DOM more imaginatively than React does but you run headlong into the “macro hygiene” problem.
- seanwilson 3y ago
  There's lots of cases in web design where you want to change the font weight, color, size, font family, capitalisation etc. of some text to create contrast with other text where the semantics of <b> don't make much sense and there aren't other tags that would help. See this example where semantic HTML tags aren't going to help much with the styling or getting the information hierarchy right: https://twitter.com/steveschoger/status/997125312411570176/photo/1 https://twitter.com/steveschoger/status/997125312411570176/p...
- shortcake27 3y ago
  > I like it and I don’t. I mean <b>bold</b> is a little simpler than <div class=“b”>bold</b> Of course in this example, semantic HTML makes sense. How do you compose styles? Do you have a semantic element for every CSS property and every combination of every CSS property? Utility frameworks are used for much more than making text bold. The idea is to write as little CSS as possible, which reduces CSS bloat, collisions, specificity hell etc. > More generally you really ought to be able to pull some HTML out of page A and transcode it into page B and that means copying the styles and a lack of namespaces for id(s) and class(es) gets in the way of that. That is quite literally what tools such as tachyons/tailwind solve. > or frameworks that work on the DOM more imaginatively than React does I don’t really know what this means. But if you’re using React, you can leverage CSS Modules or one of the many CSS-in-JS frameworks. Both of these approaches solve your issue with namespacing.
umtksa 3y ago
I love their components page and modular system. With article components any one can create a clean, responsible blog or landing pages. As a non profesional it's a perfects system for me.
- NayamAmarshe 3y ago
  You could also use Tailwind.
  - WhatWorkingOn 3y ago
    Many of the patterns Tailwind classes encourage are invalid per the CSS spec and can't be selected via javascript
    - CSSer 3y ago
      I have no idea what "invalid per the CSS spec" is supposed to mean but if you need a selector add one.
      - WhatWorkingOn 3y ago
        Invalid per the CSS spec is pretty self explanatory. There is a common CSS spec used by the JS engine and web browser. When the class used does not comply to that defined standard, the class is invalid. You can see this when trying to trying to use querySelector with responsive:property-[arbitrary] classes (I think, or it might be a different pattern of which I'd have to go back and check) and other cases where the JS engine will throw an error for trying to use a class Tailwind encourages you to write.
        CSSer 3y ago
        Okay, but I struggle to see how this has a meaningful impact given that you can simply just add a different class to use when selecting with JS.
xswhiskey 3y ago
I’ve been using it for a couple years now, absolutely love it. I personally prefer it over Tailwind (and don’t feel like learning _another_ css framework) and, ngl, the “components” section of the page is a big reason for it. When I started using it, if I needed a card or a list I could go to the components section and pick one, copy-paste it and then change it to my liking. When I tried the same in tailwind I was faced with a paywall and automatically lost all interest.
- naasking 3y ago
  There's this from last week: https://news.ycombinator.com/item?id=36697366 https://news.ycombinator.com/item?id=36697366
toastal 3y ago
Quick fix: - .sans-serif { - font-family: -apple-system, BlinkMacSystemFont, - 'avenir next', avenir, - helvetica, 'helvetica neue', - ubuntu, - roboto, noto, - 'segoe ui', arial, - sans-serif; - } + .sans-serif { font-family: sans-serif; } I already set my preferred sans serif in my user agent; if you don’t care enough about the design to provide a real font stack, I don’t need your site trying to override my preferred default with Ubuntu, Roboto, or ugh Arial. If you just want something sans serif, please just fall back to the user agent so users can define the value.
- jwells89 3y ago
  I believe the issue with this is that the font that the browser picks with “sans serif” can vary wildly depending on the user’s system, with totally different metrics, weights, etc, meaning that the page might look anywhere between passable and broken. The most egregious case of this is probably on some of the more “libre” type Linux distributions that default to that one oddly wide sans serif that I can’t remember the name of. The idea of user configurability is nice but most users have no idea how to do that or that it’s even possible, and browsers bury these settings increasingly more deeply which doesn’t help matters either.
  - cantSpellSober 3y ago
    Then put the desired typeface at the beginning of the stack, and the generic (sans-serif) at the end. I've never had a designer ask for 17 fallback options before selecting a generic (like this font stack).
  - Ennea 3y ago
    The other side of that coin is that Nimbus (if it's installed) will happily insert itself as an alternative to Arial and/or Helvetica (cannot remember), even though it's a trash typeface with a broken baseline. I think just going with sans-serif is the better choice.
    - 3y ago
quadral 3y ago
I won't be using this. The grid system is still using floats instead of flex/grid.
- packetslave 3y ago
  thanks for letting us know. we were all waiting to hear if you'd be using it or not.
  - isleyaardvark 3y ago
    We don’t make those kinds of comments here.
meerita 3y ago
The project is outdated. The grid system is not using any CSS3 feature. So, yeah, it's an old framework. If you want better features, you may go Tailwind CSS.
- cantSpellSober 3y ago
  Last release in 2018, last commit in 2021. Why was this posted?
  - nelsonic 3y ago
    Tachyons is feature complete for most people's/project's needs. It doesn't need to be updated. Every day we all use code that was last updated 10+ years ago without realising it. Having said that we switched to Tailwind for a very specific reason: customisability. see: https://github.com/dwyl/learn-tailwind#what-about-tachyons https://github.com/dwyl/learn-tailwind#what-about-tachyons Still Tachyons is a perfectly valid and lightweight utility class based CSS library.
    - deleted 3y ago
      [deleted]
- photonerd 3y ago
  I want a CSS framework. Tailwind is practically a JS framework at this point. It’s own custom build system & everything. Personally? Not a fan. Wish it would have stuck to utility classes.
  - meerita 3y ago
    Well, I wrote a functional CSS framework that is platform agnostic. It was built on sass. Post: https://www.minid.net/2019/4/7/the-css-utilitarian-methodology https://www.minid.net/2019/4/7/the-css-utilitarian-methodolo..., github https://github.com/meerita/utilcss https://github.com/meerita/utilcss I am working a different project now, and now I evolved it to simply pure css files that i compile later with postcss and purge everything. The latest and newest i did https://github.com/meerita/fcss https://github.com/meerita/fcss just drop into your react app, in this order: root.css normalizer.css generics.css (all css classes) sm.css (mobile classes) md.css (mid desktop/iPad) lg.css (standard desktop) xl.css (large desktop) xxl for large large desktops The usage is easy, lets build a grid: <div className='display--grid gap--8'>...</div> Those are from the generics.css, but if you need 2 cols in mobile and 4 in desktop you can do it <div className='display--grid gap--8 sm-template-columns--2 md-template-columns--4'>...</div> The structure of every class is made using the css language, contrary to tailwind has its own syntax. it takes huge amount of time and mental effort to get it. With FCSS you learn the pattern and you can advance it or extend it.
mska 3y ago
This is really Tailwind before Tailwind. I didn't know about it. I'm working on a css style copying project on the side (DivMagic https://divmagic.com/ https://divmagic.com/) and I might add Tachyons as an option there
- nelsonic 3y ago
  Shameless plug: https://github.com/dwyl/learn-tachyons https://github.com/dwyl/learn-tachyons if you're learning Tachyons. ;)
frankfrank13 3y ago
always liked Tachyons, and honestly bootstrap. If HTMX catches on I could see both of these getting popular again on over Tailwind, since you won't need a build step
stcg 3y ago
> Functional css for humans (https://github.com/tachyons-css/tachyons https://github.com/tachyons-css/tachyons) What makes this 'functional'? Is it related to functional programming? Or is it used as a synonym for 'usable'?
- huydotnet 3y ago
  From the `learn-tachyons` project in the other comment: https://github.com/dwyl/learn-tachyons#functional-css-is https://github.com/dwyl/learn-tachyons#functional-css-is
hit8run 3y ago
The version 5 branch is fully ongoing. I talked to Adam and it’s already in beta. You can check out the branch on GitHub. A few minor things still to iron out but it’s the way to go. I also maintain a version with darkmode support based on v1 :) Feature wise it has grid, css variables and a full color palette.

67 points by impoppy 3y ago

no_wizard 3y ago

I don't know if this is maintained anymore. Last commits are from 3 years ago

pkdpic 3y ago
Yeah, I remember liking tachyons but whats it doing on the front page?
cmitsakis 3y ago
This branch was updated 5 days ago https://github.com/tachyons-css/tachyons/tree/v5-final-final https://github.com/tachyons-css/tachyons/tree/v5-final-final more info on this PR https://github.com/tachyons-css/tachyons/pull/705 https://github.com/tachyons-css/tachyons/pull/705
impoppy 3y ago
Oh, damn, you are right, I had no idea. I just saw their front page, really liked its design and felt like you guys might like it as well. It's very much like Tailwind, but, unlike the latter one, it doesn't hide example components behind the paywall, which puts TACHYONS far ahead.
naasking 3y ago
I'm not sure what "maintained" means for a CSS toolkit. Unless the CSS directives it uses are deprecated at some point, what maintenance is needed?
- no_wizard 3y ago
  Dark mode would be a nice addition. Some utilities could be cleaned up or expanded etc.

qingcharles 3y ago

No dark mode support? :(

omegabravo 3y ago

Tailwind before tailwind. It's strange, I never saw the point of it, however I saw the value in tailwind almost straight away. I think that might be the difference in examples. The tachyon examples always look uninspiring.

PaulHoule 3y ago
For me it is the opposite, tailwind makes me immediately feel ill, Tachyon looks like fun.
- positus 3y ago
  Tachyons __is__ fun! I have found it to be better for rapid prototyping than Tailwind. The class names are more intuitive as they seem to line up somewhat with Emmet text-expansion triggers, and it's much faster to throw the single <link> in the header than to set up Tailwind every time. Tachyons has always felt so fast.
- pelagicAustral 3y ago
  I second this. Tailwind is an awful little tech that will fade away in a few years (already doing so) and will leave behind nothing but a horrendous, unreadable overhead of technical debt. There was a push to build tutorials for whatever using Tailwinds (Build a blog with Hotwire, or something), those were there fastest tab closes ever performed on my lifetime. Those tutorials are useless, they have so much added nonsense that will not stand the test of time that might as well not exist at all.
snarkyturtle 3y ago
Tailwind was great because it made it obvious how the classes connected to the configuration. Tachyons was very much was marketed as a "bootstrap" sort of thing where it wanted you to use their configuration and that's it.
toastercat 3y ago
Tachyons and Basscss were Tailwind before Tailwind. Both are proof that a good idea (debatable) alone is not a enough to earn the collective mindshare of front-end devs; you need shiny examples, a cool splash page, and a looooot of marketing. For what it's worth, I enjoyed Basscss more than Tailwind, although I mostly just stick to CSS Modules + CSS variables these days.

PaulHoule 3y ago

I like it and I don’t. I mean <b>bold</b> is a little simpler than <div class=“b”>bold</b> Certainly designers have struggled to think systematically enough to define a set of classes that are basically semantic even though, when they do it puts their skills on wheels because they can design it and other people can knock out pages consistent with the design. Things like this make me think CSS needs namespaces though, just the other day I found out there was more than one library in an application I am working on that declares properties of “.dropdown” which could be a problem. More generally you really ought to be able to pull some HTML out of page A and transcode it into page B and that means copying the styles and a lack of namespaces for id(s) and class(es) gets in the way of that. In principle you could have syntactic macros for HTML or frameworks that work on the DOM more imaginatively than React does but you run headlong into the “macro hygiene” problem.

seanwilson 3y ago
There's lots of cases in web design where you want to change the font weight, color, size, font family, capitalisation etc. of some text to create contrast with other text where the semantics of <b> don't make much sense and there aren't other tags that would help. See this example where semantic HTML tags aren't going to help much with the styling or getting the information hierarchy right: https://twitter.com/steveschoger/status/997125312411570176/photo/1 https://twitter.com/steveschoger/status/997125312411570176/p...
shortcake27 3y ago
> I like it and I don’t. I mean <b>bold</b> is a little simpler than <div class=“b”>bold</b> Of course in this example, semantic HTML makes sense. How do you compose styles? Do you have a semantic element for every CSS property and every combination of every CSS property? Utility frameworks are used for much more than making text bold. The idea is to write as little CSS as possible, which reduces CSS bloat, collisions, specificity hell etc. > More generally you really ought to be able to pull some HTML out of page A and transcode it into page B and that means copying the styles and a lack of namespaces for id(s) and class(es) gets in the way of that. That is quite literally what tools such as tachyons/tailwind solve. > or frameworks that work on the DOM more imaginatively than React does I don’t really know what this means. But if you’re using React, you can leverage CSS Modules or one of the many CSS-in-JS frameworks. Both of these approaches solve your issue with namespacing.

umtksa 3y ago

I love their components page and modular system. With article components any one can create a clean, responsible blog or landing pages. As a non profesional it's a perfects system for me.

NayamAmarshe 3y ago
You could also use Tailwind.
- WhatWorkingOn 3y ago
  Many of the patterns Tailwind classes encourage are invalid per the CSS spec and can't be selected via javascript
  - CSSer 3y ago
    I have no idea what "invalid per the CSS spec" is supposed to mean but if you need a selector add one.
    - WhatWorkingOn 3y ago
      Invalid per the CSS spec is pretty self explanatory. There is a common CSS spec used by the JS engine and web browser. When the class used does not comply to that defined standard, the class is invalid. You can see this when trying to trying to use querySelector with responsive:property-[arbitrary] classes (I think, or it might be a different pattern of which I'd have to go back and check) and other cases where the JS engine will throw an error for trying to use a class Tailwind encourages you to write.
      - CSSer 3y ago
        Okay, but I struggle to see how this has a meaningful impact given that you can simply just add a different class to use when selecting with JS.

xswhiskey 3y ago

I’ve been using it for a couple years now, absolutely love it. I personally prefer it over Tailwind (and don’t feel like learning _another_ css framework) and, ngl, the “components” section of the page is a big reason for it. When I started using it, if I needed a card or a list I could go to the components section and pick one, copy-paste it and then change it to my liking. When I tried the same in tailwind I was faced with a paywall and automatically lost all interest.

naasking 3y ago
There's this from last week: https://news.ycombinator.com/item?id=36697366 https://news.ycombinator.com/item?id=36697366

toastal 3y ago

Quick fix: - .sans-serif { - font-family: -apple-system, BlinkMacSystemFont, - 'avenir next', avenir, - helvetica, 'helvetica neue', - ubuntu, - roboto, noto, - 'segoe ui', arial, - sans-serif; - } + .sans-serif { font-family: sans-serif; } I already set my preferred sans serif in my user agent; if you don’t care enough about the design to provide a real font stack, I don’t need your site trying to override my preferred default with Ubuntu, Roboto, or ugh Arial. If you just want something sans serif, please just fall back to the user agent so users can define the value.

jwells89 3y ago
I believe the issue with this is that the font that the browser picks with “sans serif” can vary wildly depending on the user’s system, with totally different metrics, weights, etc, meaning that the page might look anywhere between passable and broken. The most egregious case of this is probably on some of the more “libre” type Linux distributions that default to that one oddly wide sans serif that I can’t remember the name of. The idea of user configurability is nice but most users have no idea how to do that or that it’s even possible, and browsers bury these settings increasingly more deeply which doesn’t help matters either.
- cantSpellSober 3y ago
  Then put the desired typeface at the beginning of the stack, and the generic (sans-serif) at the end. I've never had a designer ask for 17 fallback options before selecting a generic (like this font stack).
- Ennea 3y ago
  The other side of that coin is that Nimbus (if it's installed) will happily insert itself as an alternative to Arial and/or Helvetica (cannot remember), even though it's a trash typeface with a broken baseline. I think just going with sans-serif is the better choice.
  - 3y ago

quadral 3y ago

I won't be using this. The grid system is still using floats instead of flex/grid.

packetslave 3y ago
thanks for letting us know. we were all waiting to hear if you'd be using it or not.
- isleyaardvark 3y ago
  We don’t make those kinds of comments here.

meerita 3y ago

The project is outdated. The grid system is not using any CSS3 feature. So, yeah, it's an old framework. If you want better features, you may go Tailwind CSS.

cantSpellSober 3y ago
Last release in 2018, last commit in 2021. Why was this posted?
- nelsonic 3y ago
  Tachyons is feature complete for most people's/project's needs. It doesn't need to be updated. Every day we all use code that was last updated 10+ years ago without realising it. Having said that we switched to Tailwind for a very specific reason: customisability. see: https://github.com/dwyl/learn-tailwind#what-about-tachyons https://github.com/dwyl/learn-tailwind#what-about-tachyons Still Tachyons is a perfectly valid and lightweight utility class based CSS library.
  - deleted 3y ago
    [deleted]
photonerd 3y ago
I want a CSS framework. Tailwind is practically a JS framework at this point. It’s own custom build system & everything. Personally? Not a fan. Wish it would have stuck to utility classes.
- meerita 3y ago
  Well, I wrote a functional CSS framework that is platform agnostic. It was built on sass. Post: https://www.minid.net/2019/4/7/the-css-utilitarian-methodology https://www.minid.net/2019/4/7/the-css-utilitarian-methodolo..., github https://github.com/meerita/utilcss https://github.com/meerita/utilcss I am working a different project now, and now I evolved it to simply pure css files that i compile later with postcss and purge everything. The latest and newest i did https://github.com/meerita/fcss https://github.com/meerita/fcss just drop into your react app, in this order: root.css normalizer.css generics.css (all css classes) sm.css (mobile classes) md.css (mid desktop/iPad) lg.css (standard desktop) xl.css (large desktop) xxl for large large desktops The usage is easy, lets build a grid: <div className='display--grid gap--8'>...</div> Those are from the generics.css, but if you need 2 cols in mobile and 4 in desktop you can do it <div className='display--grid gap--8 sm-template-columns--2 md-template-columns--4'>...</div> The structure of every class is made using the css language, contrary to tailwind has its own syntax. it takes huge amount of time and mental effort to get it. With FCSS you learn the pattern and you can advance it or extend it.

mska 3y ago

This is really Tailwind before Tailwind. I didn't know about it. I'm working on a css style copying project on the side (DivMagic https://divmagic.com/ https://divmagic.com/) and I might add Tachyons as an option there

nelsonic 3y ago
Shameless plug: https://github.com/dwyl/learn-tachyons https://github.com/dwyl/learn-tachyons if you're learning Tachyons. ;)

frankfrank13 3y ago

always liked Tachyons, and honestly bootstrap. If HTMX catches on I could see both of these getting popular again on over Tailwind, since you won't need a build step

stcg 3y ago

> Functional css for humans (https://github.com/tachyons-css/tachyons https://github.com/tachyons-css/tachyons) What makes this 'functional'? Is it related to functional programming? Or is it used as a synonym for 'usable'?

huydotnet 3y ago
From the `learn-tachyons` project in the other comment: https://github.com/dwyl/learn-tachyons#functional-css-is https://github.com/dwyl/learn-tachyons#functional-css-is

hit8run 3y ago

The version 5 branch is fully ongoing. I talked to Adam and it’s already in beta. You can check out the branch on GitHub. A few minor things still to iron out but it’s the way to go. I also maintain a version with darkmode support based on v1 :) Feature wise it has grid, css variables and a full color palette.