inline-block versus flexbox for horizontal arrangements
Something I’ve found interesting while reviewing recent code test submissions (within job applications) at work is that more developers than I’d expect still use
display: inline-block when they need to lay out multiple elements horizontally such as the items in a navigation menu. It’s interesting because Flexbox – which has now been around for almost 10 years – gives you a modern, purpose-built solution to that.
Changing visual order with CSS
When considering using Flexbox or CSS Grid to change the visual order of elements, remember that “with great power comes great responsibility”.
Create an Automatically Responsive Flexbox Gallery (on egghead.io)
Here’s a lovely intrinsically responsive (no media queries) photo gallery solution from Stephanie Eckles. It can accommodate differently sized images and achieves its layout by a combination of flexbox features (
flex-basis) and by applying
object-fit: cover to photos to make them fully cover their parent list items.
Modern CSS Solutions
Modern CSS Solutions for Old CSS Problems
Old CSS, new CSS (eev.ee)
I first got into web design/development in the late 90s, and only as I type this sentence do I realize how long ago that was. Here’s a history of CSS and web design, as I remember it.
You don’t need a media query for that: #1 Inline content separators
Create a more flexible component which allows the text to wrap based on the content rather than the viewport size.
Relearn CSS layout: Every Layout
Every now and then something comes along in the world of web design that represents a substantial shift. The launch of Every Layout, a new project from Heydon Pickering and Andy Bell, feels like one such moment.
Using the tabindex attribute | TPG
Léonie Watson explains how the HTML tabindex attribute is used to manage keyboard focus. Of particular interest to me was a clarification of what
tabindex="-1" does (because I always forget).
See all tags.