It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
static: the default relative: allows you to nudge around with top/right/bottom/left, making z-index work, gives you a positioning contextabsolute: top/right/bottom/left moves the element to that exact position, otherwise the same as relativefixed: like absolute, but scrolling the page doesn’t move the element sticky: like fixed, but it doesn’t become fixed until the page is scrolled past your set
Kyle is a JavaScript guy. He knows a ton about the web, and plenty about CSS too, but isn’t as up-to-date on modern CSS layout tools like flexbox and grid. We didn’t go from 0 to 100 here, but we did have a great chat about modern layout while live coding and we chatted through layout situations.
Along the way, we let the VS Code extension TabNine see what it could do to help us write CSS.… Read article “#196: Learning Grid & Flexbox with Kyle Simpson”
We’ve covered techniques before for when you want a full-width element within a constrained-width column, like an edge-to-edge image within a narrower column of text. There are loads of techniques.
Perhaps my favorite is this little utility class:… Read article “Full Bleed”
Back in May, I learned about Firefox adding masonry to CSS grid. Masonry layouts are something I’ve been wanting to do on my own from scratch for a very long time, but have never known where to start. So, naturally, I checked the demo and then I had a lightbulb moment when I understood how this new proposed CSS feature works.
Support is obviously limited to Firefox for now (and, even there, only behind a flag), but it still offered … Read article “A Lightweight Masonry Solution”
Una doing an amazing job of showing just how (dare I say it?) easy CSS layout has gotten. There is plenty to learn, but what you learn makes sense, and once you have, it’s quite empowering. … Read article “10 modern layouts in 1 line of CSS”
Two things that strike me often about the web are how many ways there are to go about the same thing and how many considerations go into even the most seemingly simple things.
Working with wrapper elements is definitely on both those lists. Wrappers (or containers or whatever) are so common — especially when establishing grid layouts and boundaries for the elements inside them — that it’s easy to take them for granted and reach for them without stepping back … Read article “Styling Layout Wrappers In CSS”
Snook shows off a classic design with an oversized header up top, and a content area that is “pulled up” into that header area. My mind goes to the same place:
Historically, I’ve done this with negative margins. The header has a height that adds a bunch of padding to the bottom and then the body gets a
margin-top: -50pxor whatever the design calls for.
If you match the margin and padding with a situation like this, it’s not … Read article “Overlapping Header with CSS Grid”
Michelle Barker notes that it’s been a heck of a week for us CSS layout nerds.
gap for display: flex, which is great, and now Chrome is getting that too. Robin recently lamented the common complaint that CSS is frustrating. There are misconceptions about what it is and what it does. There are debates about what kind of language it is. There are even different views on where it should be written.
Rachel Andrew has a new talk from An Event Apart DC 2019 available that walks us back; back to the roots of the issues we used to have with CSS and the “hacks” we used to overcome … Read article “Making Things Better: Redefining the Technical Possibilities of CSS”
Ahmad Shadeed covers the idea of a card component that has a fixed set of semantic HTML with some BEMy classes on it. There is a title, author, image, and tags. Then he redesigns the card into five totally different designs without touching any of the HTML just the CSS.
If this is an ah-ha moment for you, awesome! It might be worth knowing that this exact concept essentially excited an entire generation of front-end developers, in no small part … Read article “Same HTML, Different CSS”
