Skip to main content
CSS is fun and cool and I like it.
Video

#198: About the Position Property

  • static: the default
  • relative: allows you to nudge around with top/right/bottom/left, making z-index work, gives you a positioning context
  • absolute: top/right/bottom/left moves the element to that exact position, otherwise the same as relative
  • fixed: 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
Read article “#198: About the Position Property”
Video

#196: Learning Grid & Flexbox with Kyle Simpson

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”

Article

Full Bleed

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”

Article

A Lightweight Masonry Solution

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”

Link

10 modern layouts in 1 line of CSS

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”

Link

Styling Layout Wrappers In CSS

Link

Overlapping Header with CSS Grid

Link

Exciting Things on the Horizon For CSS Layout

Sponsored Link

Making Things Better: Redefining the Technical Possibilities of CSS

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”

Link

Same HTML, Different CSS