Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Learn CSS Grid with a virtual garden game

cssgridgarden.com

Post reply on HN
Print view View original

51–60 of 63 posts

Re: Learn CSS Grid with a virtual garden game

#51

Post by micromacrofoot »

bluelightning2k wrote: post #22

I did this and enjoyed it. Maybe I'm getting old but I just use flexbox every time. Makes me very "meh" about CSS grid.

Flexbox generally tends to be great for a single row/column layout, grid excels at multicolumn/row (especially considering subgrid)

One of the most useful features of grid that replaces flexbox, in my experience, is auto-fit and auto-fill, which are great for "card" style layouts. You can use flexbox for these, but the treatment of wrapping items in non-full rows was always a point of frustration for me. This is even better if you can utilize subgrid to align the card contents.

https://css-tricks.com/auto-sizing-columns-css-grid-auto-fil...

Re: Learn CSS Grid with a virtual garden game

#52

Post by willio58 »

I used to work at a place where weekly we'd have a show-and-tell with the team for about 30 minutes. One week I brought this and I let people who don't code give answers to see how far we'd get. It's interesting to see some who "got it" and others who struggled.

Overall people loved it! I think it was a great way to develop some basic programming skills in people who would otherwise never code in their entire life. For years after I did this my coworkers would bring it up as kind of a "You do _that_ all day?", which I thought was funny because this is like the easiest part of my job and they thought I was a magician for it but it was nice to see they respected the work more because they did it themselves a little once.

Re: Learn CSS Grid with a virtual garden game

#53

Post by bromuro »

christophilus wrote: post #46
squidbeak wrote: post #40

Earlier quoted context omitted.

The problem with tailwind is it does away with separation of concerns and messes up HTML, like the old styling tags in HTML. We moved on from those for good reasons.

It really isn’t the same as inline styles at all. It’s the best of both worlds, in my opinion. It’s hard to see myself ever going back to the old ways.

I have given a chance to Tailwind and it was neither nice or easy. I actually give up, wondering why my younger colleagues appreciate writing CSS using class names.

I write CSS since its debut. Clearly it wasn’t enough suffering: they reimplemented it as a class-name based language - with horrible IDE support. I am perplexed - I must be the boomer around here… :)

Re: Learn CSS Grid with a virtual garden game

#55

Post by andrei_says_ »

bromuro wrote: post #53
christophilus wrote: post #46

Earlier quoted context omitted.

It really isn’t the same as inline styles at all. It’s the best of both worlds, in my opinion. It’s hard to see myself ever going back to the old ways.

I have given a chance to Tailwind and it was neither nice or easy. I actually give up, wondering why my younger colleagues appreciate writing CSS using class names. I write CSS since its debut. Clearly it wasn’t enough suffering: they reimplemented it as a class-name based language - with horrible IDE support. I am perplexed - I must be the boomer around here… :)

I think it makes sense when writing css for isolated components - usually ignoring the cascade. Makes it possible to not name things which is a plus in componentworld.

The thing is, it’s the cascade that makes css as powerful and elegant as it is.

And not naming the things comes at the cost of listing all css properties as classes on each element.

I write CSS and must say that in 2024 CSS is an amazingly powerful and elegant language.

If one is willing / given the time to learn it.

Using conventions like ITCSS, a few libraries like https://utopia.fyi and placing colors, font sizes and spacing into variables + the use of a few utility classes provide most of the conveniences of a utility-first framework with no downsides.

I can also see how devs focusing on components prefer utility-first frameworks for the speed of development. Despite the low maintainability and the horrible markup.

Re: Learn CSS Grid with a virtual garden game

#56

Post by kmoser »

nawgz wrote: post #49

I dislike CSS Grid because it takes away almost all the semantic of the HTML. Flexbox at least means your HTML tree corresponds to some kind of structure on the page, CSS Grid means you see this And you're suddenly required to cross reference CSS to make sense of what's on the page. It's just ugly, even if it is wildly effective.

Different topic, but this could be solved if somebody wrote an IDE that understood all the relationships between your HTML and CSS and let you manipulate it visually, rather than having to manually cross-reference symbols.

Re: Learn CSS Grid with a virtual garden game

#57

Post by bromuro »

rimliu wrote: post #24
spyrosk wrote: post #20

For a moment I thought this was about https://csszengarden.com/pages/about/ (A long time ago) it was an amazing source to learn CSS, and get design inspiration.

I still consider those years to be the golden years of the web development. When the fruits of web standards movement started to appear. Alas, then came react and all the good stuff was thrown out of the window. I guess tag soup is palatable, when it is buried deep in node_modules.

Golden years ? I do remember spending nights without sleep against browsers and their CSS support.

Re: Learn CSS Grid with a virtual garden game

#58

Post by alwillis »

andrei_says_ wrote: post #55
bromuro wrote: post #53

Earlier quoted context omitted.

I have given a chance to Tailwind and it was neither nice or easy. I actually give up, wondering why my younger colleagues appreciate writing CSS using class names. I write CSS since its debut. Clearly it wasn’t enough suffering: they reimplemented it as a class-name based language - with horrible IDE support. I am perplexed - I must be the boomer around here… :)

I think it makes sense when writing css for isolated components - usually ignoring the cascade. Makes it possible to not name things which is a plus in componentworld. The thing is, it’s the cascade that makes css as powerful and elegant as it is. And not naming the things comes at the cost of listing all css properties as classes on each element. I write CSS and must say that in 2024 CSS is an amazingly powerful and…

+1 for ITCSS

Re: Learn CSS Grid with a virtual garden game

#59

Post by chuckadams »

georgesimon wrote: post #38
rimliu wrote: post #24

Earlier quoted context omitted.

I still consider those years to be the golden years of the web development. When the fruits of web standards movement started to appear. Alas, then came react and all the good stuff was thrown out of the window. I guess tag soup is palatable, when it is buried deep in node_modules.

Nowadays, I think the opposite. I feel a pang of jealousy and regret when I load a page from before CSS Zen Garden that uses tables for layouts. It still exists and works perfectly. I love how I can automatically date it in my mind, like period furniture or buildings. Unlike the thousands of pages that I made at the time, which are either gone or broken. I yearn for the html files that I lovingly handcrafted as uniqu…

I used to do web dev during the tables-as-layout days. I don’t miss them a little bit. For one, Netscape wouldn’t render anything if the table tag wasn’t closed, and still nothing regardless until it did hit the end tag. And that’s to say nothing of the dodgy layout quirks they had. No thanks.

Re: Learn CSS Grid with a virtual garden game

#60

Post by 7bit »

renegade-otter wrote: post #31

I've always found this Rachel Andrews series a superb learning source: https://www.smashingmagazine.com/2020/01/understanding-css-g... For someone such as myself, doing backend, this gave me a solid foundation for building modern UI apps while keeping them lean and simple. No Bootstraps, no Tailwinds.

Bootstrap is specifically for the case where you don't want to care about CSS Grid or Flexbox.

Tailwind on the other hand does nothing on that regard. If you don't know Grid or Flexbox, then Tailwind will be just as much of a pain, as pure CSS.

Post reply on HN