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 …
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.
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 Maybe tachyon has an implementation of it…
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:
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.
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.
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.
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.
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.
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.
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!
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?