Love this Pen from Adrian Roselli where you can easily switch between Physical and Logical Properties. 💡 Someone should fork this and add toggles to change the writing-mode / direction. Related: CSS Logical Properties Are the Future of the Web & i18n →
Tag Archives: layout
CSS Container Queries: A First Look + Demo
CSS Logical Properties Are the Future of the Web & i18n
Linked below is yet another article urging one to use CSS Logical Properties. What caught my eye in this one is the fact that author Daniel Yuschick reworked his personal website to use them, as shown in this video below. Impressive! CSS Logical Properties Are the Future of the Web & I18N → In case …
Continue reading “CSS Logical Properties Are the Future of the Web & i18n”
Debugging Layout Shifts
Over at web.dev, Katie Hempenius learns us how to identify and fix layout shifts using the Layout Instability API and the DevTools. What I take away from this is that you can easily spot them using DevTools: In the Rendering Panel you can enable an option to highlight areas of Layout Shift: To enable Layout …
Digging Into CSS Logical Properties
Ahmad Shadeed digs into CSS Logical Properties The basic idea of CSS logical properties is that we won’t use physical directions in CSS properties. Instead, we will use properties that depend on the direction of the HTML document. Those properties are called logical properties. As I said before: Exciting stuff. This will have a huge …
SmolCSS – Minimal snippets for modern CSS layouts and components
Thinking on ways to solve Centering in CSS
Adam Argyle looking at several techniques to center in CSS, and how they hold up in several conditions (narrow screen, rtl, etc) In today’s challenge, we’re stress testing 5 different CSS centering techniques. See what techniques should earn a place in your tool belt by watching how they react to common layout stress. The contestants: …
Continue reading “Thinking on ways to solve Centering in CSS”
Native Aspect Ratio Boxes in CSS thanks to aspect-ratio
A Lightweight Masonry Solution
With Masonry being specced in Grid Layout Module Level 2 – and already being implemented in Firefox – Ana Tudor looked into whipping up a lightweight fallback for browsers that don’t support it. 🤔 Masonry Layout? Masonry is a grid layout based on columns, as popularized by Pinterest. Unlike other grid layouts, it doesn’t have …
The Just in Case Mindset in CSS
Some nice examples of defensive programming in CSS by Ahmad Shadeed. The just in case mindset aims to educate designers and developers to think ahead of time of some possible failure scenarios for a component. I called it just in case because that’s literally what it means. Just in case the title got longer, do …