Awesome CSS

       

A curated list of awesome CSS frameworks, libraries, tools, resources, and inspiration.

CSS (Cascading Style Sheets) is essential for building visually engaging and responsive web experiences. This list features high-quality resources for developers and designers working with modern CSS.

Contents

• Frameworks
• Preprocessors
• Architecture
• Design Systems
• CSS-in-JS
• Typography
• Tools & Utilities
• Inspiration
• Learning Resources
• Code Playgrounds
• Related Awesome Lists

Frameworks

• Tailwind CSS – Utility-first CSS framework for rapid UI development.
• Bootstrap – Popular front-end toolkit for building responsive layouts.
• Bulma – A modern CSS framework based on Flexbox.
• Foundation – Responsive front-end framework from Zurb.
• UIkit – Lightweight and modular front-end framework.

Preprocessors

• Sass – Powerful CSS extension language.
• Less – CSS preprocessor with variables, mixins, and functions.
• Stylus – Expressive, dynamic, robust CSS preprocessor.

Architecture

• BEM – Block Element Modifier methodology for scalable CSS.
• OOCSS – Object-Oriented CSS encourages reusability.
• SMACSS – Scalable and Modular Architecture for CSS.

Design Systems

• Material Design – Google’s design system with CSS/JS components.
• Carbon Design System – IBM’s open-source design system.
• Lightning Design System – Salesforce’s enterprise-grade design framework.

CSS-in-JS

• Styled Components – Visual primitives for the component age.
• Emotion – Performant and flexible CSS-in-JS library.
• JSS – Author styles in JavaScript with full power of the language.

Typography

• Fontsource – Self-host open-source fonts with NPM.
• Google Fonts – Free and open-source web fonts.
• Type Scale – Preview typography scales with different fonts.

Tools & Utilities

• Autoprefixer – Parses CSS and adds vendor prefixes.
• PurgeCSS – Remove unused CSS for optimized builds.
• PostCSS – Transform CSS with JavaScript plugins.
• CSS Stats – Visualize and analyze your CSS.
• Can I use – Browser support tables for modern CSS features.

Inspiration

• CSS Zen Garden – Showcase of CSS design possibilities.
• Codrops – Tutorials and design experiments.
• CSS-Tricks – Articles and snippets on CSS and front-end dev.

Learning Resources

• MDN CSS Reference – Authoritative CSS documentation.
• Learn CSS – Google’s structured guide to CSS.
• CSS Grid Garden – Game to learn CSS Grid.
• Flexbox Froggy – Game to learn Flexbox.

Code Playgrounds

• CodePen – Front-end playground for live CSS demos.
• JSFiddle – Test and share HTML, CSS, and JS code snippets.
• CSSDeck – Online HTML/CSS/JS playground and sharing platform.

Related Awesome Lists

• Awesome Web Performance – Optimize CSS for performance.
• Awesome Web Accessibility – CSS tools for accessibility.
• Awesome Tailwind CSS – Ecosystem around Tailwind CSS.
• Awesome Design Systems – Includes CSS-related systems and frameworks.

Contribute

Contributions are welcome!

License