Skip to content

Issue 140

Scroll Snap, Responsive Images, Focus Styles and Logical Properties

Rachel Andrew
1 min read


Issue 140

I am writing today from An Event Apart in Seattle. Yesterday I gave my talk Graduating to Grid, kicking off an afternoon of CSS Layout from myself, Eric Meyer and Jen Simmons. Jeremy Keith managed to liveblog the talks, as did Torre Capistran.

Quite a mix of interesting stuff this week, thank you to sponsor Design Principles.

Rachel Andrew, CSS Layout News


Understanding Logical Properties And Values — Smashing Magazine

Logical Properties and Values move the web away from being tied to the physical dimensions of the screen to the writing mode of the document. Understanding this is helpful when using new layout methods such as grid and flexbox. In this article I explain.

How display: contents; Works

Ire Aderinokun has written a really in-depth article on how display: contents works.

Focusing on Focus Styles | CSS-Tricks

A really excellent and in-depth look at focus styles from Eric Bailey.

w descriptors and sizes: Under the hood / Observable

I love a deep look into how and why the browser does things. Here is one such piece which will help you properly understand Responsive Images.

Swipe Views with CSS Snap Points: Building a More Efficient Mobile Web Navigation

An explanation of how CSS Scroll Snap can be used to create a better carousel.

Cropping images with Object Fit - YouTube

Another Layout Land video from Jen Simmons, this time on object-fit.


A neat expaGrid Menu | Demo 1 | Codrops

A neat expanding menu with CSS Grid - a tip, inspect the grid with Firefox to see how it goes together.

Our Sponsor

An open-source collection of design principles & methods

An open-source collection of design principles & methods

What are design principles?  Why are they important? Who uses them? How can you create your own? is a growing collection of examples and methods designed to help us answer these questions.

Design Principles have benefitted concepts, brands, processes, projects, products and teams. Learn from others or add your own.