Issue 140
Scroll Snap, Responsive Images, Focus Styles and Logical Properties
News
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
Learn
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.
Interesting
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
What are design principles? Why are they important? Who uses them? How can you create your own? principles.design 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.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.