5 ms·
As someone who only needs to use Flexbox/Grid every once in a while, this is precisely what I needed. I've been struggling with static documentation like the o
by slhck 4y ago
As someone who only needs to use Flexbox/Grid every once in a while, this is precisely what I needed.
I've been struggling with static documentation like the one from Tailwind [1] or MDN [2]. Writing good and intuitive documentation is hard, surely this must have been quite an effort.
[1]: https://tailwindcss.com/docs/flex-direction https://tailwindcss.com/docs/flex-direction
[2]: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...
- nicoburns 4y agoFor Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ is the resource I would recommend, along with https://flexboxfroggy.com/ https://flexboxfroggy.com/ for a more interactive tutorial. For CSS Grid, the equivalent resources would be https://css-tricks.com/snippets/css/complete-guide-grid/ https://css-tricks.com/snippets/css/complete-guide-grid/ and https://cssgridgarden.com/ https://cssgridgarden.com/ These are all tutorial-level documentation. Once you've gone through those you can complement them with the MDN documentation on the individual properties as a reference.
- asddubs 4y agoFor CSS layout related stuff, I think video tutorials are a really good resource. In particular I like Kevin Powell who has guides on both subjects.
- aloisdg 4y agoUpvote for https://flexboxfroggy.com/ https://flexboxfroggy.com/ and https://cssgridgarden.com/ https://cssgridgarden.com/ for grid
- sbergot 4y agoI can't recommend the css tricks guide enough. I don't write enough css to know the properties by heart but with this resource it is easy to find quickly the property you need.
- Cyberdog 4y agoYeah, I have both of those bookmarked myself. I know they sell posters of the articles. I've always wanted to get them, though they're a tad pricey. But I guess I can write it off as a business expense…
- yreg 4y agoI wonder how many hits that article has. It must be one of the most visited development-related articles on the web.
- RheingoldRiver 4y agoAh I came here to recommend Flexbox Froggy and Grid Garden! I didn't come across them until long after I needed them, which is really a tragedy, but I try to rectify it by linking them to everyone I come across who is learning css (which is a lot of people due to some Discords I'm in). They're adorable and wonderful, and if you don't use css frequently enough to keep the properties memorized, but do use it enough that it would be convenient to be slightly more familiar than needing to re-google constantly I recommend re-playing them once a year or so; they're honestly pretty fun just because they're so cute.
- koromak 4y agoMaybe more introductory than you're looking for, but I went through this once a few years ago and its stuck ever since: https://flexboxfroggy.com/ https://flexboxfroggy.com/ Now I just need one for Grid.
- aloisdg 4y agoHere you go https://cssgridgarden.com/ https://cssgridgarden.com/
- lelandfe 4y agoAs far as I'm concerned, Flexbox Froggy is mandatory reading for anyone completely baffled by flexbox. It's really brilliant. CSS grid is heaps more complex than the flexbox spec, so I think the Grid Garden one is not quite as useful. But seriously – if anyone is just squinting when staring at flexbox stuff, go check out that game.
- plondon514 4y agoFor Tailwind I put together "Tailwind Toucan" on my side project https://codeamigo.dev/lessons/243 https://codeamigo.dev/lessons/243. Warning: it touches on more than flexbox.
- tanbog6 4y agoI thought it was just me struggling with the tailwind flex docs...