[HN Gopher] Layout patterns - Collection of layout patterns buil...
___________________________________________________________________
Layout patterns - Collection of layout patterns built using CSS
Author : DerekBickerton
Score : 107 points
Date : 2021-11-17 15:31 UTC (7 hours ago)
(HTM) web link (web.dev)
(TXT) w3m dump (web.dev)
| chrisweekly wrote:
| 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).
| jorgesborges wrote:
| 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!
| searchableguy wrote:
| 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.
| jamestimmins wrote:
| 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.
| donum wrote:
| 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!
| daertommy wrote:
| 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
| 13415 wrote:
| Or just use the HTML table tag, it's better and also works on
| older browsers.
| mistrial9 wrote:
| 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?
| bennyp101 wrote:
| 1993, you're back! Don't leave again!
| bryanrasmussen wrote:
| I'm thinking 1994.
| sodapopcan wrote:
| 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.
| hamdouni wrote:
| This video may be relevant
|
| https://m.youtube.com/watch?v=qm0IfG1GyZU
| SavantIdiot wrote:
| 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.
| throw10920 wrote:
| 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.
| Steltek wrote:
| 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?
| keithnz wrote:
| 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.
| yathern wrote:
| 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.
___________________________________________________________________
(page generated 2021-11-17 23:01 UTC)