#Development #Approaches
Building a UI without breakpoints · Moving to fluid CSS components for the modern web https://ilo.im/16c7es

_____
#Components #CssGrid #CssFlex #ContainerQueries #MediaQueries #FluidDesign #ResponsiveDesign #WebDev #Frontend #CSS

Building a UI Without Breakpoints – Frontend Masters Blog

This article covers a layout approach that better fits the modern web: fluid, intrinsic components that adapt by default, and treat conditional rules as local, intentional exceptions.

So I saw a demo in the @codepen Spark and I liked the idea, but it was too JS-heavy for my taste, plus I would have preferred the rotation animations to be "hinged" around the top/ bottom edge depending on direction.

So I did it with pure #CSS on scroll https://codepen.io/thebabydino/pen/JoKqRjZ

cc @bramus

#cssScrollAnimation #scrollEffect #code #cssTransforms #cssTransform #css3D #3D #coding #frontend #cssLayout #web #dev #webDev #webDevelopment #cssGrid #cssFlex #flexbox #cssVariables #cssTransition

#Development #Releases
CSS ‘reading-flow’ and ‘reading-order’ · New properties to make visual order accessible https://ilo.im/163mvw

_____
#Layout #Accessibility #Keyboard #CssGrid #CssFlex #Chrome #Browser #WebDev #Frontend #CSS

Use CSS reading-flow for logical sequential focus navigation  |  Blog  |  Chrome for Developers

Learn how to use the new reading-flow and reading-order properties in Chrome 137.

Chrome for Developers

Up for a layout challenge?

I’ve browsed several online grid generators and watched several videos, I have yet to find a solution for a grid with items that have a 1/1 aspect ratio image, & featured cards that span multiple columns, AND be responsive *w/o media queries*.
With the featured card that spans 2 or 3, inevitably end up with squished card (see pic) on mobile.

https://codepen.io/luxuryluke/pens/public

https://www.youtube.com/playlist?list=PLbSquHt1VCf1x_-1ytlVMT0AMwADlWtc1
#cssGrid #cssLayout #layoutLand #cssFlex #css
cc
@kevinpowell
@jensimmons

Luke Dorny on CodePen

CodePen