The best resource that will teach you systematic thinking and give you a proper foundation for how to use CSS is https://every-layout.dev/ . [0] Really enjoyable read and it takes you through the thinking process. [0] Not recommended for absolute beginners
$69 for full access (one-time payment AFAICT). Must be worth it if web design is your profession.
Imagine you charge $69 an hour as a developer. Learning the proper way to think about building resilient CSS layout will save you tens of hours throughout your career by building things the right way from the beginning.
This is a bit easier these days with Grid. You can set grid-template-columns: 1fr; and use gap: 20px; to control the spacing which feels much more natural. You can then pad as you like. edit: realise this is at the end of the article so you probably already know this
`gap` is available on Flexbox in most browsers since earlier this year.
Currently it's ~86% according to caniuse.com. I think it's still a bit low to be used comfortably.
If you want to keep doing this, it’ll save you a whole lot of heartache if you also wholesale prevent margin collapsing. In fact, some people recommended that as a baseline default (I personally find it great for layout but surprisingly mixed for typography).
If only we had (or display:sizer) element that could expand, disappear on wrap and not count as a regular child (sort of like a space in a text node)… But that would be so '90s.
I really think CSS gap is going to cover most of these needs. Adding decorative nodes to the DOM doesn’t seem like a good solution.
I think CSS is approaching the point where it's equivalent to assembly because it's impossible to keep up and write good CSS. It's no longer easy to do it by hand which is why there is a whole ecosystem of tooling that handles CSS. Not to mention that CSS is essentially platform-specific due to differences between chrome, safari and firefox.
What this article describes is no different than programming patterns in more traditional languages. I legitimately can't think of anything that has made it more difficult to write by hand in the last 15 or so years; if anything it's never been easier! Building complex software is...complex, and frameworks and tools in the CSS world are no different than reaching for an MVC framework or ORM. There's minor quirks betw…
Mirroring this sentiment. CSS is fantastic now and they've put a lot of careful attention into the new specifications. I haven't run into a situation in years where I was unable to lay something out the way I pictured it in my mock ups. We used to have to do a lot of hacking just to get simple things into layout in the mid to late 2000's.
This selector has saved me an inordinate amount of time hacking together UIs quickly: .vertical-stack > :not(:last-child) { margin-bottom: 8px } Just add the class to a parent and all the children will have spaced between, but no spacing around the edges. It’s then easy to add padding to the parent: Heading Paragraph Paragraph
Yeah I have a variation of this too. stack-y- and stack-h- for horizontal spacing. This combined with Flex makes a lot of layout implementations easy.
$69 for full access (one-time payment AFAICT). Must be worth it if web design is your profession.
Absolutely worth it. Top 3 books I’ve ever read on web design
May I know what are the other two? I read Every Layout for the past hour and it's good so I'd like to read something else of similar quality in the future.
Also, how did you come across those books? I just found out about Every Layout in this thread. I'm not a web developer so I don't know if it was advertised in a web dev forum or what.
I found the linked article "Axiomatic CSS and Lobotomized Owls" to be a decent read. I'm surprised that it hasn't been highly upvoted in the past despite having many submissions to HN. Article: https://alistapart.com/article/axiomatic-css-and-lobotomized... Prev. submissions: https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que...
While "Axiomatic CSS" per se has (unfortunately) not quite (yet?) gone mainstream, its origins -- see https://every-layout.dev -- are a profoundly excellent resource, and have been highly influential.
I found the linked article "Axiomatic CSS and Lobotomized Owls" to be a decent read. I'm surprised that it hasn't been highly upvoted in the past despite having many submissions to HN. Article: https://alistapart.com/article/axiomatic-css-and-lobotomized... Prev. submissions: https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que...
While "Axiomatic CSS" per se has (unfortunately) not quite (yet?) gone mainstream, its origins -- see https://every-layout.dev -- are a profoundly excellent resource, and have been highly influential.
I was trying to figure out what font they are using and when I was inspecting the page I found the comment below. I have nothing in particular to say about it. I just thought it was interesting.
Okay, I'll bite. Why is #050505 on #FAFAFA (not the reverse, as you stated) "atrocious"? Are we playing the "anything less than #000000 on #FFFFFF is grey text on a grey background and entirely unreadable" card?
I don't understand their complaint either. Some people have a hard time with absolute black on absolute white (and/or vice versa) so easing up a little can be helpful. It's a small difference, 19:52:1 vs. 21:1 contrast ratio. I've seen advice to avoid exceeding 18:1 in large areas, maybe #111 on #f9f9f9.