Id officia consectetur esse et cillum fugiat cillum consectetur. Qui pariatur eu nostrud voluptate consequat mollit pariatur nulla sint nulla dolor elit. Reprehenderit officia officia dolore excepteur eiusmod aute deserunt ea irure eiusmod sint. Exercitation dolor culpa et qui pariatur quis laborum incididunt fugiat ea ea sint in.
Generators and Tools
- SVGOMG
- SVG tool for cleaning up, compressing, and simplifying SVGs. I often use this after exporting an SVG from a tool like Figma.
- Josh Comeau’s Shadow Palette Generator
- Generate nice looking, naturalistic drop shadows in CSS.
- Wakamai Fondue (font analysis)
- Web app that can analyze a font file and tell you lots of stuff about it, including the color palettes (if any) and what axes are available.
- Flexbox Labs
- A great way to try out different flexbox properties and see what they do; familiar iconography might help make the dubiously-inuitive property names stick in your head a little better.
- Anchoreum
- Similar to above; an interactive playground for anchor-based positioning. (Browser support is chrome-only at the moment, but on the roadmap for Firefox and Safari.)
References
- Every Layout
- Heydon Pickering & Andy Bell’s composable styles for common layout problems, with a lot of explanation for the thought behind the styles. The layouts themselves are a paid product, but the introductory material is both valuable and free.
- Ahmad Shadeed’s Interactive Guide to CSS Container Queries
- Not just the what, but the why.
- CUBE CSS
- Andy Bell’s CSS organization strategy based partly on BEM but less opinionated on naming conventions.
- Navigating the Web Platform
- A collection of links on how to keep up with changes to the web platform & how to participate in its development.
Videos
- CSS Popover + Anchor Positioning is Magical
- Kevin Powell explains both the basics of popovers and anchor positioning in about 20 minutes.