i thought this was excellent. very engaging way to quickly learn a useful tool
Learn CSS Grid with a virtual garden game
41–50 of 63 posts
Re: Learn CSS Grid with a virtual garden game
#42I'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.
I would also recommend Jen Simmons Layout Land series of videos: https://www.youtube.com/layoutland
Re: Learn CSS Grid with a virtual garden game
#43I 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 is simpler and covers most use cases. No need to go grid unless there is a special need.
> Flexbox is simpler and covers most use cases.
CSS Grid was the first specification for page layout using rows and columns (grids) since the creation of the web. Everything else prior was a compromise.
Flexbox is for laying out rows or columns; while you can do some limited page layout, that's not what it's designed for. Just like tables and floats weren't designed for page layout either.
Another way to grok this: CSS Grid is for two dimensional layout and Flexbox is for one dimensional layout.
Flexbox and CSS Grid were designed to work together, each doing what it was designed to do.
Re: Learn CSS Grid with a virtual garden game
#44I don't recommend spending time on this. It doesn't teach you the right things. The problems you'll be solving in this "game" do not relate to the problems you actually need to solve when you actually need to do something with CSS Grid.
Re: Learn CSS Grid with a virtual garden game
#45I'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.
While Bootstrap certainly abstracts CSS away for you in a way that you can get by without knowing much about CSS (for simple things), Tailwind is just tokenized CSS. You can't use Tailwind without knowing CSS or learning CSS in the process. That feels pretty lean and simple to me.
> You can't use Tailwind without knowing CSS or learning CSS in the process.
Disagree. Tailwind abstracts lots of CSS away; you can get away with using it with only having a surface level understanding of CSS.
As we know, a little knowledge can be a dangerous thing, especially in web development.
Re: Learn CSS Grid with a virtual garden game
#46Earlier quoted context omitted.
While Bootstrap certainly abstracts CSS away for you in a way that you can get by without knowing much about CSS (for simple things), Tailwind is just tokenized CSS. You can't use Tailwind without knowing CSS or learning CSS in the process. That feels pretty lean and simple to me.
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.
Re: Learn CSS Grid with a virtual garden game
#47I thought Flexbox was a CSS gamechanger and then came Grid, which is so amazing and predictible.
Really, the only pain I have left with CSS is when I get into weird cases of "I want a component to use up any remaining space that its siblings don't use, but one of its children should use up everything it gets that its siblings don't use, and then overflow scroll if there's not enough space."
There's a whole bunch of cases where I find these weird interactions between flexbox and grid and some sort of priority for sizing layout that I don't quite understand. I suspect this is mostly on me, but it's something that, unlike flexbox and grid, still feels not straightforward.
Re: Learn CSS Grid with a virtual garden game
#48Earlier 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.
It's the exact same as inline styles...
Re: Learn CSS Grid with a virtual garden game
#49I 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.
Re: Learn CSS Grid with a virtual garden game
#50Earlier 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.
It's the exact same as inline styles...
it's really not - utility classes avoid specificity conflicts and enforces a consistent design system as defined in the Tailwind config.