Skip to content

brandonhimpfen/awesome-css

Repository files navigation

Awesome CSS Awesome Lists

GitHub Sponsors   Ko-Fi   PayPal   Stripe   X   Facebook

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

  • 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

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

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

Contribute

Contributions are welcome. Please ensure your submission fully follows the requirements outlined in CONTRIBUTING.md, including formatting, scope alignment, and category placement.

Pull requests that do not adhere to the contribution guidelines may be closed.

License

CC0

About

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

Topics

Resources

Code of conduct

Contributing

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages