https://github.com/awesomelistsio/awesome-css
A curated list of awesome CSS frameworks, libraries, tools, resources, and inspiration.
https://github.com/awesomelistsio/awesome-css
List: awesome-css
awesome awesome-list awesome-lists css web-design web-development webdesign webdevelopment
Last synced: 3 months ago
JSON representation
A curated list of awesome CSS frameworks, libraries, tools, resources, and inspiration.
- Host: GitHub
- URL: https://github.com/awesomelistsio/awesome-css
- Owner: awesomelistsio
- Created: 2025-08-02T22:59:09.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-08-02T23:08:52.000Z (3 months ago)
- Last Synced: 2025-08-03T01:07:59.972Z (3 months ago)
- Topics: awesome, awesome-list, awesome-lists, css, web-design, web-development, webdesign, webdevelopment
- Language: Python
- Homepage: https://awesome.himpfen.com/
- Size: 7.81 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-tailwindcss - Awesome CSS - end development. (Related Awesome Lists)
- awesome-tailwindcss - Awesome CSS - end development. (Related Awesome Lists)
- awesome-web-design - Awesome CSS
- awesome-web-design - Awesome CSS
- awesome-codepen - Awesome CSS
- awesome-codepen - Awesome CSS
- ultimate-awesome - awesome-css - A curated list of awesome CSS frameworks, libraries, tools, resources, and inspiration. (Other Lists / TeX Lists)
README
# Awesome CSS [](https://github.com/awesomelistsio/awesome)
[](https://ko-fi.com/awesomelists) [](https://www.paypal.com/donate/?hosted_button_id=3LLKRXJU44EJJ) [](https://tinyurl.com/e8ymxdw3) [](https://x.com/ListsAwesome) [](https://www.facebook.com/awesomelists)
> 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](#frameworks)
- [Preprocessors](#preprocessors)
- [Architecture](#architecture)
- [Design Systems](#design-systems)
- [CSS-in-JS](#css-in-js)
- [Typography](#typography)
- [Tools & Utilities](#tools--utilities)
- [Inspiration](#inspiration)
- [Learning Resources](#learning-resources)
- [Code Playgrounds](#code-playgrounds)
- [Related Awesome Lists](#related-awesome-lists)
## Frameworks
- [Tailwind CSS](https://tailwindcss.com/) – Utility-first CSS framework for rapid UI development.
- [Bootstrap](https://getbootstrap.com/) – Popular front-end toolkit for building responsive layouts.
- [Bulma](https://bulma.io/) – A modern CSS framework based on Flexbox.
- [Foundation](https://get.foundation/) – Responsive front-end framework from Zurb.
- [UIkit](https://getuikit.com/) – Lightweight and modular front-end framework.
## Preprocessors
- [Sass](https://sass-lang.com/) – Powerful CSS extension language.
- [Less](https://lesscss.org/) – CSS preprocessor with variables, mixins, and functions.
- [Stylus](https://stylus-lang.com/) – Expressive, dynamic, robust CSS preprocessor.
## Architecture
- [BEM](https://en.bem.info/) – Block Element Modifier methodology for scalable CSS.
- [OOCSS](http://oocss.org/) – Object-Oriented CSS encourages reusability.
- [SMACSS](https://smacss.com/) – Scalable and Modular Architecture for CSS.
## Design Systems
- [Material Design](https://m3.material.io/) – Google’s design system with CSS/JS components.
- [Carbon Design System](https://carbondesignsystem.com/) – IBM’s open-source design system.
- [Lightning Design System](https://www.lightningdesignsystem.com/) – Salesforce’s enterprise-grade design framework.
## CSS-in-JS
- [Styled Components](https://styled-components.com/) – Visual primitives for the component age.
- [Emotion](https://emotion.sh/docs/introduction) – Performant and flexible CSS-in-JS library.
- [JSS](https://cssinjs.org/) – Author styles in JavaScript with full power of the language.
## Typography
- [Fontsource](https://fontsource.org/) – Self-host open-source fonts with NPM.
- [Google Fonts](https://fonts.google.com/) – Free and open-source web fonts.
- [Type Scale](https://type-scale.com/) – Preview typography scales with different fonts.
## Tools & Utilities
- [Autoprefixer](https://github.com/postcss/autoprefixer) – Parses CSS and adds vendor prefixes.
- [PurgeCSS](https://purgecss.com/) – Remove unused CSS for optimized builds.
- [PostCSS](https://postcss.org/) – Transform CSS with JavaScript plugins.
- [CSS Stats](https://cssstats.com/) – Visualize and analyze your CSS.
- [Can I use](https://caniuse.com/) – Browser support tables for modern CSS features.
## Inspiration
- [CSS Zen Garden](http://www.csszengarden.com/) – Showcase of CSS design possibilities.
- [Codrops](https://tympanus.net/codrops/) – Tutorials and design experiments.
- [CSS-Tricks](https://css-tricks.com/) – Articles and snippets on CSS and front-end dev.
## Learning Resources
- [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference) – Authoritative CSS documentation.
- [Learn CSS](https://web.dev/learn/css/) – Google’s structured guide to CSS.
- [CSS Grid Garden](https://cssgridgarden.com/) – Game to learn CSS Grid.
- [Flexbox Froggy](https://flexboxfroggy.com/) – Game to learn Flexbox.
## Code Playgrounds
- [CodePen](https://codepen.io/) – Front-end playground for live CSS demos.
- [JSFiddle](https://jsfiddle.net/) – Test and share HTML, CSS, and JS code snippets.
- [CSSDeck](http://cssdeck.com/) – Online HTML/CSS/JS playground and sharing platform.
## Related Awesome Lists
- **[Awesome Web Performance](https://github.com/awesomelistsio/awesome-wpo)** – Optimize CSS for performance.
- **[Awesome Web Accessibility](https://github.com/awesomelistsio/awesome-web-accessibility)** – CSS tools for accessibility.
- **[Awesome Tailwind CSS](https://github.com/awesomelistsio/awesome-tailwindcss)** – Ecosystem around Tailwind CSS.
- **[Awesome Design Systems](https://github.com/awesomelistsio/awesome-design-systems)** – Includes CSS-related systems and frameworks.
## Contribute
Contributions are welcome!
## License
[](http://creativecommons.org/licenses/by-sa/4.0/)