SVG Style Inheritance and the ‘Flash Of Unstyled SVG’
Sara Soueidan on using SVG presentation attributes to provide style fallback for CSS failure scenarios.
Issue #205
Find out how to use SVG presentation attributes to provide style fallback for CSS failure scenarios, what vertical rhythm is and how it can improve your designs, how to use Repaintless CSS library for creating lightweight, jank-free animations, and more.
The “Living” Style Guide - Pattern-Lab
Simon Taggart shares BigCommerce’s approach to the style guide.
From Our Sponsor (via Syndicate)
Point & click bug reporting with screen capture
If you make websites, then you need Bugherd. Just point, click & send to create visual bug reports & feedback. Bugherd auto captures details like screenshot, browser, O/S and selector data.
Articles & Tutorials
Why is Vertical Rhythm an Important Typography Practice?
Zell Liew explains what vertical rhythm is and how it can improve your designs.
Introducing CSS Scroll Snap Points
Sarah Drasner gives a nice introduction into the new CSS Scroll Snap Points spec.
Boost Your CSS Animation Performance with the Repaintless.css Library
Anna Migas explains how to use Repaintless CSS library for creating lightweight, jank-free animations.
A Grid Solution for the Responsive Tables Problem
An experiment in using CSS Grid Layout to create responsive tables.
5 Tips for Saving SVG for the Web with Illustrator
Solomon Hawk shares a short list of tips for avoiding common problems with exported SVG.
Tools
CSS-Animated Hamburgers
Hamburgers is a collection of modular and customizable CSS-animated hamburger icons.
Balloon.css
Balloon.css lets you add tooltips to elements without JavaScript and in just a few lines of CSS.
Inspiration
Flexbox Defense
In this CSS game, your job is to stop the incoming enemies by positioning your defenses using Flexbox.
Until Next Week
If you enjoy this newsletter, please consider supporting us on Patreon. Thank you!
Happy coding,
Zoran Jambor
Baseline Status for Video
A handy online tool that will let you easily show Baseline Status in your videos.
AI Developer Newsletter
A short, friendly roundup of the most useful tools, ideas, and real-world examples—curated specifically for developers like you.