CSS-Tricks
Responsive Grid Magazine Layout in Just 20 Lines of CSS
14+ min · · I was recently working on a modern take of the blogroll. The idea was to offer readers a selection of latest posts from those blogs in a magazine-style · Shared by 218, including Marius Bleuer, Veerle Pieters, Brad Brooks, Jacob du Toit, Benoist Lawniczak, CSS Weekly, rohit
designsystemsrepo.com
Design Systems Repo
15+ min · · An organized and frequently updated collection of Design System examples, resources, tools, articles and videos. · Shared by 182, including Matt, Oscar MacDonald, Hugo Corbucci, Marius Bleuer, Scott Williams, Davy De Pauw, Boris Périsset, Kontour Design Studio, Atul Pradhananga, Mike Ivars, Hannah Milan, Matthias Lampe, Yoav Ganbar (🥑 Builder.io/Qwik), René Clausen Nielsen, Adham Dannaway, John Hues, Swizec Teller writing a book on software rewrites, Thomas Kaul
mxb.dev
The CSS Mindset
5 min · · CSS can be difficult to grasp if you think about it in terms of a "traditional" programming language. There is a certain mindset involved that helps to understand why it works the way it does. · Shared by 132, including Design Shack, Alligator.io 🐊, Benoist Lawniczak, Stef Walter, henrik, Florian Hanke 🍎, Karl Schwaier, Sara Soueidan
betterwebtype.com
The State of Fluid Web Typography
12+ min · · Fluid typography gives us so many opportunities to better design the reading experiences on the web but, at the same time, it introduces problems of font sizes scaling uncontrollably and potential… · Shared by 87, including 6clicks | John Robert-Nicoud, David Hellmann, Benoist Lawniczak, Brad Brooks, Rodrigo Noales, Veerle Pieters, sascha aßbach, Fabricio Teixeira
browserdefaultstyles.com
Browser Default Styles
· Search against any element for standardized and default styles from all major rendering engines (WebKit, Blink, Gecko, Trident). · Shared by 80, including Oliver Raduner, Wes Bos, Oscar MacDonald, Adrian Roselli (no blue check) 🗯, Chris Heilmann codepo8@toot.cafe, #MuskOut (not parody)
CodyHouse
Why we prefer CSS Custom Properties to SASS variables
7 min · · Some practical examples of how CSS variables can power-up your workflow · Shared by 58, including 6clicks | John Robert-Nicoud, Clemens, Thomas Kaul
CSS-Tricks
The Many Ways to Change an SVG Fill on Hover (and When to Use Them)
6 min · · SVG is a great format for icons. Vector formats look crisp and razor sharp, no matter the size or device — and we get tons of design control when using · Shared by 51, including David Hellmann, Charles Baldwin, sascha aßbach, Tableless, Benoist Lawniczak
Smashing Magazine 🇺🇦 🏳️🌈
CSS Lists, Markers, And Counters — Smashing Magazine
9 min · · There is more to styling lists in CSS than you might think. In this article, Rachel starts by looking at lists in CSS, and moving onto some interesting features defined in the CSS Lists specification… · Shared by 46, including Davy De Pauw, Alligator.io 🐊, zeldman, Matthew Turland, Benoist Lawniczak, George M 🇪🇺, Rachel Andrew, Michael Musgrove
Prototypr 👁️✨
This Ain’t Disney: A practical guide to CSS transitions and animations
9 min · · Oh, animation… we want to get it right so badly, don’t we? I mean, does anybody really enjoys a stiff, snappy UI? Can anyone admit they’re… · Shared by 44, including Davy De Pauw, David Hellmann
cathydutton.co.uk
Stepping away from Sass
4 min · · User Experience Designer · Shared by 40, including Mohamed Azazy, 6clicks | John Robert-Nicoud, bouiboui, Benoist Lawniczak, Tableless, Chris Schultz✌️ & ❤️
andy-bell.design
Create a responsive grid layout with no media queries, using CSS Grid
4 min · · Embracing the flexible nature of the web gives us powerful, resilient front-ends, where instead of using specific sizes, we give elements sensible boundaries and let them auto-fill where possible. I… · Shared by 39, including Niklaus Gerber, Benoist Lawniczak, numano
Smashing Magazine 🇺🇦 🏳️🌈
Editorial Design Patterns With CSS Grid And Named Columns — Smashing Magazine
8 min · · By naming lines when setting up our CSS Grid layouts, we can tap into some interesting and useful features of Grid — features that become even more powerful when we introduce subgrids. · Shared by 38, including Benoist Lawniczak, Veerle Pieters, Val Head, Chris Heilmann codepo8@toot.cafe, Rachel Andrew
joshwcomeau.com
Folding the DOM
6 min · · In my day-to-day life as a front-end developer, I generally treat CSS as a collection of 2D layers. Other than reordering them using z-index, I don't often move things in 3D space.And yet, for years… · Shared by 38, including bouiboui, Cameron Yick ~ @hydrosquall@vis.social on mastodon, Alligator.io 🐊, Nando 💪🇦🇺🇦🇷, Fabricio Teixeira
Smashing Magazine 🇺🇦 🏳️🌈
Art Direction For The Web Using CSS Shapes — Smashing Magazine
10 min · · Last year, Rachel Andrew wrote “[Take A New Look At CSS Shapes](https://www.smashingmagazine.com/2018/09/css-shapes/)” where she reintroduced readers to the basics of using CSS Shapes. In this new… · Shared by 32, including Oscar MacDonald, Veerle Pieters, Benoist Lawniczak, Joe Lencioni, Davy De Pauw
ishadeed.com
Min and Max Width/Height in CSS
13+ min · · Oftentimes, we want to limit the width of an element relative to its parent, and at the same time, to make it dynamic. So having a base width or height with the ability to make it extend based on the… · Shared by 31, including Veerle Pieters, 6clicks | John Robert-Nicoud, Benoist Lawniczak, Davy De Pauw, Chris Heilmann codepo8@toot.cafe