CSS Resources

Books

• CSS Secrets: Better Solutions to Everyday Web Design Problems by Lea Verou
• CSS in 44 minutes

References

• MDN CSS Reference
• W3Schools CSS Reference
• Codrops CSS Reference
• CSS Cheat Sheet

Video Training

• Frontend Masters CSS Learning Path
• Kevin Powell's YouTube Channel
• Jen Simmons - Layout Land YouTube Channel

Misc

• Learn and Practice Modern CSS
  • CSS Button Styling Guide

Tools

• Colorzilla - Ultimate CSS Gradient Generator.
• CSS clip-path Maker
• CSS Gradient
• CSS Grid Generator
• Less - It's CSS, with just a little more.
• PostCSS - A tool for transforming CSS with JavaScript.
• Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
• Single Element CSS Spinners
• Stylus
• Test CSS Grid Rules

Animation

• Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects.

Frameworks

• Bootstap - Powerful, extensible, and feature-packed frontend toolkit.
• BULMA - Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.
• Material Web is Google’s component library for building applications that work in any web framework.
  • Material Design Lite lets you add a Material Design look and feel to your websites.
  • Materialize - A modern responsive front-end framework based on Material Design
  • MUI is a lightweight CSS framework that follows Google's Material Design guidelines.
• Milligram - A minimalist CSS framework.
• Paper CSS - The less formal CSS framework.
• Pico - A minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default.
• Pure.css - A set of small, responsive CSS modules that you can use in every web project.
• Styled Components - Styling your way with speed, strong typing, and flexibility.
• Tachyons - Create fast loading, highly readable, and 100% responsive interfaces with as little css as possible.
• Tailwind - A utility-first CSS framework packed with classes.
  • daisyUI - Faster, cleaner, easier Tailwind CSS development.
  • Tailwind Elements - Powerful components for Tailwind CSS. Consistent design & advanced functionalities.
  • UIKit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.

Misc. Libs

• Hint.css - A pure CSS tooltip library for your lovely websites
• Hover.css - A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on.
• Pure CSS Loaders - Open source CSS loading animations dedicated for speed, simplicity & dev-friendly.