Look mum, no breakpoints!
An excellent overview of how to approach fluid design on the web. Lots of excellent references and techniques, particularly those around using Flex layout with flex-basis to control widths, or […]
Archives
CSS regions: a history
I have a vague memory of CSS Regions being talked about, but had completely forgotten them. It turns out that's likely because the spec has effectively been pulled. I think it's technically still out […]
Alternatives to absolute positioning
Ahmad has put together some really interesting examples of where modern CSS techniques can replace traditional use-case for absolute positioning. I'd be really interested to know how some of them […]
Stacks of stacks
Heydon's video is an excellent overview of their much-loved owl selector and "stack" layout pattern. I actually didn't realise that Heydon was the original "inventor" of the owl, though it makes a […]
Tufte CSS
I know very little about Edward Tufte, but they clearly have quite the following in the design/typography space. Tufte CSS is a project aiming to emulate various tenets that Tufte used to […]
Designing for the unexpected
Cathy has produced an exceptional overview of modern responsive/intrinsic design best practices. From fluid units, to content-led design, to subgrid, pretty much every current or on-the-horizon […]
Compose to a vertical rhythm
An interesting look at using consistent line-heights to force a vertical rhythm to a page. Specifically, it looks at setting a base line-height (in this case 18px) and ensuring all text uses it. That […]
Container queries in web components
Max has put together one of the best examples of how container queries will fundamentally change the way front-end development works. Better still, they provide extremely clear explanations of […]
Layout love and drumming
A follow-up to Andy's previous explanation of his compound grid layout in which they explain their logic behind a 4 + 5 compound grid a bit more. It's neat, but this description is what really caught […]
A compound grid
I love Andy's new design over on Stuff & Nonsense. A large part of that are the cleverly diverse page layouts. Turns out, underneath that perceived diversity is a consistent grid, made […]
Fluid typography with CSS clamp
A simple and informative example of how the new CSS clamp property can be used to create fluid layouts (in this case, specifically a fluid type […]
What does 100% mean in CSS
A super useful recap of the main ways that CSS calculates percentage for element layout, each with a brilliant slider-based demo. The […]
Accordion rows in CSS Grid
When Eric first tweeted about the new design on his site, I thought something a bit unusual was going on with the CSS layout. I actually dove straight into the source that day and learnt a little […]
Clever quote design and arrow use
The Markup have recently been doing a great job of analysing some of the big names in the tech world and highlighting some less-than-stellar behaviour or situations. However, what's really caught my […]
Grid-ish Flexbox or Flexible Grid?
The new dominant layout methods in CSS – grid and flexbox – have solved a lot of issues. Still, sometimes the ideal layout is somewhere in the middle: a flexible grid-like mashup. With a bit of outside-the-box thinking, you can there from either angle.
Hamonshu
A really like Eric's latest redesign. I'm a huge fan of ink drawings in general, so it figures I'd like this, but more than the graphic elements I feel like the layout manages to strike a great […]
A guide to responsive images
A pretty exhaustive overview of the HTML and CSS options that we now have for responsive image layouts. Here are some key […]
Utopia CSS
An intriguing new project from some of the brains at ClearLeft for "elegantly scaling type" on the web. Personally, I'm all for anything that reduces or removes the need for breakpoints in my […]