Layout patterns – Collection of layout patterns built using CSS(web.dev)
web.dev
Layout patterns – Collection of layout patterns built using CSS
https://web.dev/patterns/layout/
21 comments
Anyone interested in CSS layout should visit https://every-layout.dev, it's an extraordinary resource. The free content is great, but I'm happy I paid for the book and component generator. No affiliation, I'm just a delighted customer (who's been doing web-related work since 1998).
thanks for the link, I went and bought both and happy too.
I never get tired of scanning these summaries. For someone who does ground-up CSS once a year or even less often, it is nice to see quick and clean solutions for common patterns in one place outside of an opinionated framework (bootstrap) or a insanely huge toolbox (tailwind). Thanks, OP.
Nifty little site! Though I don't think it's a great 'learning' tool. I would love if it presented multiple ways of achieving the same layout (EG legacy, flex, grid), so you could compare and see which is best.
For example, the 'holy grail' layout used to be done using tables. Then we moved away from tables, to using divs with clearfix and other positioning hacks. I lean heavily on flex these days - but they only show grid. I think it would be interesting to see the reason why grid was picked, by comparing it to other methods - so you can show off how clean the implementation is by contrast.
For example, the 'holy grail' layout used to be done using tables. Then we moved away from tables, to using divs with clearfix and other positioning hacks. I lean heavily on flex these days - but they only show grid. I think it would be interesting to see the reason why grid was picked, by comparing it to other methods - so you can show off how clean the implementation is by contrast.
For the "Container query card" pattern, I get this (Firefox but that's not relevant):
"""
Warning: Your browser does not support CSS container queries. Please open this demo in Chrome Canary with the experimental #enable-container-queries flag turned on.
"""
Can you really call something a "pattern" if it's unavailable or broken to 99.9999% of users?
"""
Warning: Your browser does not support CSS container queries. Please open this demo in Chrome Canary with the experimental #enable-container-queries flag turned on.
"""
Can you really call something a "pattern" if it's unavailable or broken to 99.9999% of users?
the pattern is fine, its just this implementation using the bleeding edge of CSS isn't so good, but, will, eventually, be a good way to implement it.
There's a warning about it in the intro, and a huge yellow warning sign next to said pattern. They did acknowledge that it was an experimental CSS feature.
That said, this looks really useful! I wonder if there are more resources like this? So often with CSS I write layouts from scratch when all I want to do is implement something that should be really common
That said, this looks really useful! I wonder if there are more resources like this? So often with CSS I write layouts from scratch when all I want to do is implement something that should be really common
Keenly waiting for masonry layout support in browsers.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_La...
Anyone know alternatives to achieve it without requiring Javascript?
I want to use it for my own website: https://searchableguy.com which is going to get a lot more cards added soon.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_La...
Anyone know alternatives to achieve it without requiring Javascript?
I want to use it for my own website: https://searchableguy.com which is going to get a lot more cards added soon.
Google really has some amazing web development documentation. It‘s so detailed and goes really deep down the different rabbit holes. If you follow all their advice, you really have a great, fast and responsive piece of digital media.
Interesting bits here:
Usage of the aspect-ratio property which you cannot use yet, because support is still lacking. (using the padding-bottom trick works fine though!)
And the absolute most amazing CSS feature coming to our browsers soon: Container queries! Cannot fkn wait to use these!
Interesting bits here:
Usage of the aspect-ratio property which you cannot use yet, because support is still lacking. (using the padding-bottom trick works fine though!)
And the absolute most amazing CSS feature coming to our browsers soon: Container queries! Cannot fkn wait to use these!
This video may be relevant
https://m.youtube.com/watch?v=qm0IfG1GyZU
https://m.youtube.com/watch?v=qm0IfG1GyZU
I love seeing different patterns in a simple layout.
I wish there was way more of this throughout software development.
Some examples:
1. High level sketches for login pages, settings pages, payment pages, etc.
2. Diagrammed patterns for async functionality after a user signs up, such as putting them in a queue, sending a follow up email, etc.
3. Different DB schemas for storing user preferences, stripe information, shopping carts, message queues, etc.
I wish there was way more of this throughout software development.
Some examples:
1. High level sketches for login pages, settings pages, payment pages, etc.
2. Diagrammed patterns for async functionality after a user signs up, such as putting them in a queue, sending a follow up email, etc.
3. Different DB schemas for storing user preferences, stripe information, shopping carts, message queues, etc.
Do you know any books or websites that cover these things?
(That you described)
(That you described)
I don't sadly, but it would be amazing
If you really want to be a master of css layout I would suggest you to learn everything you can about flexbox
Flexbox is all you need imo
Flexbox is all you need imo
One of the things I really like about using Grid for layout is that it eliminates the need for any HTML tags that exist solely for layout, but you can def get away with only using Flexbox if that is your preference.
Or just use the HTML table tag, it's better and also works on older browsers.
the right answer here IMHO is "depends on your viewers with their devices"
there is nothing broken about simple HTML table for a minimalistic and standards-compliant page, right?
there is nothing broken about simple HTML table for a minimalistic and standards-compliant page, right?
I can't believe we have grid and flex and sass and incredible frameworks. I'm inspired to go write the holy grail layout in tables and floats just for the heck of it, a cheerful nostalgic trip, and without frustration because at any moment I can recognize it's just a bad dream and it's all in the rear-view mirror and I can stop at any time. My table cells are going to have cool inline onmouseover functions too with whacky colours. It's going to be a good night!
I'd be interested in learning these layouts in a CSS-independent way, so that I can implement them using other tools, or even write a layout system myself (e.g. for a game UI). The layouts don't really seem to be CSS-specific.