Work in progress
Resources
General
- CSS Selector and Property Almanac
- CSS Selectors: A Visual Guide
- CSS Snippets, collection of interactive examples
- Defensive CSS, tips for future-proof user interfaces
- Guide to Debugging CSS
- Modern CSS, new solutions for old CSS problems
- SmolCSS, minimal snippets for modern CSS layouts and components
- Conditional CSS
Specific Topics
Accessibility
- A Complete Guide To Accessible Front-End Components, by Vitaly Friedman
- Tota11y, visualize widespread accessibility errors
- Inclusive Design Principles, design for the needs of all people
Backgrounds
- CSS Pattern, a collection of CSS gradients
Buttons vs. Links
Color
- Accessible Color Systems
- Gradientify, all-in-one gradient editor
Components
- uiverse, beautiful custom elements made with HTML and CSS
Design Tokens
- Open Props, supercharged CSS variables/web design tokens
Fonts
- Modern Font Stacks, system font stack CSS organized by typeface
Icons
- Bootstrap Icons, high quality, open source library of 2,000+ icons
- Lucide, beautiful and consistent icon toolkit
- Sargam, 700+ open-source icons
Illustrations
- 21 websites for free illustrations, by Koding Kitty
Layout
- CSS Layout, popular layouts and patterns made with CSS
- Understanding Layout Algorithms, proper mental models
- 1-Line Layouts, 10 modern CSS layouts in a single line
Semantic CSS
- Using CSS to Enforce Accessibility
- Style with Stateful, Semantic Selectors
- User Facing State
- Semantic CSS With Intelligence Selectors
Three Dimensional (3D)
Frameworks
Minimal
Minimal frameworks stick to only modifying the base elements, instead of creating a heavy set of classes. These allow you to focus on semantic HTML.
They're ideal for simple websites and prototypes:
Full
Full frameworks provide higher level components such as menus and cards. Full frameworks usually also provide layout and utility classes, sometimes icons.
They may require JavaScript for some higher level components to fully function: