Next up: Hui Jing Chen demonstrates and discusses CSS styling methods. Because this year I used Twitter’s threading / topics feature, it’s giving me 2 tweets in each embed I do here. I’m embedding every other tweet for readability. There’s a PDF at the bottom of the page in case this all collapses.
We can do responsive text, scroll snaps, sticky elements, masonry layouts, and container queries now with modern CSS. #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
Technique 1 for responsive text: media queries. You have very granular control over the font sizes at each viewport.
What if we let our text grow and shrink smoothly and dynamically? When viewport units were introduced for sizing purposes, that became option 2.
— Anne Gibson (@perpendicularme) October 11, 2021
check out the clamp() function for setting the minimum, preferred value, and maximum value. This allows us to do what option 2 did but with a much more simplified syntax, and that’s option 3.
[omg i’m about to start some typography work and i think i want to try this] #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
[well heck, that makes option 1 the best — safest — one for my typography work for work] #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
Mandatory scroll-snap-type is a strict snap point, which can be good for keyboard navigation.
Proximity scroll-snap-type snaps her when you get near the edge.
you can specify the axis within the syntax as well. #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
position: sticky is between a relatively positioned box and a fixed position box in technique. position:sticky must have an offset position (top: 1em for example)
the offset will never push the sticky box outside the containing block but the box will move as if pinned. #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
Why doesn’t left:0 work? The container block is scrolled away. The container may need to be longer/wider if you’re seeing “sticky” isn’t working properly. #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
Option 1, the old way to do it, you end up with a top to bottom layout. stuff goes top to bottom then left to right. (Think newspaper columns.) important content may be at the bottom. What if you want to do across columns? Also, there’s no spanning 2 cols, ‘all’ is option #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
Option 3 is to do same masonry layout vertically instead of horizontally. [There are additional masonry options that Hui Jing is describing but i can’t type that fast. ;)] #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
Container queries! Miriam will also cover this. (Teamwork!) The ability to change things based on the size of the parent’s layout (not the viewport) is the goal. It was definitely not easy to build because of how browsers work. #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
The parent container has a container type and the query itself uses a media query like style for writing up the context. Size is what’s working right now, more to come as the spec develops. #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
Style and state queries are coming. “Is this sticky positioned container stuck? Is this box visible on the screen?” These will be very valuable. #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
.@hj_chen showing us an implementation of masonry layout using CSS multi-column layout. It’s also coming to level 3 of the CSS grid spec ?
CSS-native masonry layouts? Yes please! #AEAOT
— Josh “The Vax” Vickerson (@joshvickerson) October 11, 2021
new CSS properties will help us remove our workarounds and cut down the number of times we must use javascript. Provides us with more options. It’s the context of which your project operates. #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
Here’s a PDF of this post (which might not be accessible because I’m using print-to-PDF to generate it, my apologies) in case Twitter kicks it and all the tweets disappear.
An Event Apart OT 2021 Our Stylish Future by Hui Jing Chen – Perpendicular Angel Design