Awesome CSS Frameworks
List of awesome CSS frameworks.
Feel free to contribute .
Supported by FrontAid CMS:
Contents
Base / Reset / Normalize
Class-less
Frameworks that use semantic HTML and do not rely on classes.
Very Lightweight
Frameworks that are smaller than ~5KB.
General Purpose
-
Bootstrap - The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
Demo,
Docs,
Repo
| #SCSS
-
Bulma - Modern CSS framework based on Flexbox.
Demo,
Docs,
Repo
| #Sass
-
Foundation - The most advanced responsive front-end framework in the world.
Demo,
Docs,
Repo
| #SCSS
-
UIkit - Lightweight and modular front-end framework for developing fast and powerful web interfaces.
Demo,
Docs,
Repo
| #LESS #SCSS
-
Primer - CSS framework that powers GitHub’s front-end design.
Docs,
Repo
| #SCSS
-
Pico.css - Elegant styles for all native HTML elements, dark mode automatically enabled.
Demo,
Docs,
Repo
| #SCSS
-
Carbon Components - Component library behind IBM’s Carbon Design System.
Docs,
Repo
| #SCSS
-
U.S. Web Design System - Components used by U.S. federal government websites.
Docs,
Repo
| #SCSS
-
Fomantic-UI - Build beautiful websites fast, with concise HTML, intuitive javascript, and simplified debugging.
Docs,
Repo
| #LESS
-
Blaze UI - Open source modular toolkit providing great structure for building websites quickly with a scalable and maintainable foundation.
Demo,
Docs,
Repo
| #SCSS
-
Cirrus - Component and utility centric SCSS framework designed for rapid prototyping.
Demo,
Docs,
Repo
| #CSS
-
Vanilla Framework - Simple, extensible CSS framework. Written by the Canonical Web Team.
Demo,
Docs,
Repo
| #SCSS
-
PatternFly - UI framework for enterprise web applications.
Demo,
Docs,
Repo
| #SCSS #LESS
-
Stacks - UI components used by Stack Overflow.
Docs,
Repo
| #LESS
-
HiQ - Simple CSS foundation with responsive typography and input styling.
Docs,
Repo
| #PostCSS
Material Design
Utility-based
Specialized
Toolkits are closer to a library than to a framework.
They do not provide actual styling but utilities (e.g. mixins) that you can use in your CSS preprocessor.
Stalled Development
Frameworks that have not seen any real development for more than about one year or officially have been deprecated.
We are keeping them here for reference/inspiration and hope for a revival.
Show Section
- [**Semantic UI**](https://semantic-ui.com) - User interface is the language of the web.
![](https://img.shields.io/github/stars/semantic-org/semantic-ui.svg?style=social&label=Star)
[Docs](https://semantic-ui.com/introduction/getting-started.html),
[Repo ![GitHub Repo Stars](https://img.shields.io/github/stars/semantic-org/semantic-ui) ![GitHub last commit](https://img.shields.io/github/last-commit/semantic-org/semantic-ui)](https://github.com/semantic-org/semantic-ui)
| #LESS
- [**Materialize**](https://materializecss.com) - CSS framework based on material design.
![](https://img.shields.io/github/stars/Dogfalo/materialize.svg?style=social&label=Star)
[Demo](https://materializecss.com/showcase.html),
[Docs](https://materializecss.com/getting-started.html),
[Repo ![GitHub Repo Stars](https://img.shields.io/github/stars/Dogfalo/materialize) ![GitHub last commit](https://img.shields.io/github/last-commit/Dogfalo/materialize)](https://github.com/Dogfalo/materialize)
| #SCSS
- [**Spectre.css**](https://picturepan2.github.io/spectre/) - Lightweight, responsive and modern CSS framework.
![](https://img.shields.io/github/stars/picturepan2/spectre.svg?style=social&label=Star)
[Docs](https://picturepan2.github.io/spectre/getting-started.html),
[Repo ![GitHub Repo Stars](https://img.shields.io/github/stars/picturepan2/spectre) ![GitHub last commit](https://img.shields.io/github/last-commit/picturepan2/spectre)](https://github.com/picturepan2/spectre)
| #SCSS
- [**Tachyons**](https://tachyons.io) - Quickly build and design new UI without writing CSS.
![](https://img.shields.io/github/stars/tachyons-css/tachyons.svg?style=social&label=Star)
[Demo](https://tachyons.io/gallery/),
[Docs](https://tachyons.io/docs/),
[Repo ![GitHub Repo Stars](https://img.shields.io/github/stars/tachyons-css/tachyons) ![GitHub last commit](https://img.shields.io/github/last-commit/tachyons-css/tachyons)](https://github.com/tachyons-css/tachyons/)
| #CSS
- [**Milligram**](https://milligram.io) - Minimalist CSS framework.
![](https://img.shields.io/github/stars/milligram/milligram.svg?style=social&label=Star)
[Demo](https://milligram.io/showcase.html),
[Docs](https://milligram.io/#getting-started),
[Repo ![GitHub Repo Stars](https://img.shields.io/github/stars/milligram/milligram) ![GitHub last commit](https://img.shields.io/github/last-commit/milligram/milligram)](https://github.com/milligram/milligram)
| #Sass
- [**Water.css**](https://watercss.kognise.dev/) - Just-add-CSS collection of styles to make simple websites just a little nicer.
![](https://img.shields.io/github/stars/kognise/water.css.svg?style=social&label=Star)
[Repo ![GitHub Repo Stars](https://img.shields.io/github/stars/kognise/water.css) ![GitHub last commit](https://img.shields.io/github/last-commit/kognise/water.css)](https://github.com/kognise/water.css)
| #CSS
- [**Basscss**](https://basscss.com) - Low-level CSS toolkit.
![](https://img.shields.io/github/stars/basscss/basscss.svg?style=social&label=Star)
[Repo ![GitHub Repo Stars](https://img.shields.io/github/stars/basscss/basscss) ![GitHub last commit](https://img.shields.io/github/last-commit/basscss/basscss)](https://github.com/basscss/basscss/)
- [**sanitize.css**](https://csstools.github.io/sanitize.css/) - The best-practices CSS foundation.
![](https://img.shields.io/github/stars/csstools/sanitize.css.svg?style=social&label=Star)
[Repo ![GitHub Repo Stars](https://img.shields.io/github/stars/csstools/sanitize.css) ![GitHub last commit](https://img.shields.io/github/last-commit/csstools/sanitize.css)](https://github.com/csstools/sanitize.css)
| #CSS
- [**MUI**](https://www.muicss.com) - Lightweight CSS framework that follows Google's Material Design guidelines.
![](https://img.shields.io/github/stars/muicss/mui.svg?style=social&label=Star)
[Docs](https://www.muicss.com/docs/v1/getting-started/introduction),
[Repo ![GitHub Repo Stars](https://img.shields.io/github/stars/muicss/mui) ![GitHub last commit](https://img.shields.io/github/last-commit/muicss/mui)](https://github.com/muicss/mui)
| #SCSS
- [**modern-css-reset** ![GitHub Repo Stars](https://img.shields.io/github/stars/hankchizljaw/modern-css-reset) ![GitHub last commit](https://img.shields.io/github/last-commit/hankchizljaw/modern-css-reset)](https://github.com/hankchizljaw/modern-css-reset) - Tiny little reset that you can use as the basis of your CSS projects.
![](https://img.shields.io/github/stars/hankchizljaw/modern-css-reset.svg?style=social&label=Star)
[Repo ![GitHub Repo Stars](https://img.shields.io/github/stars/hankchizljaw/modern-css-reset) ![GitHub last commit](https://img.shields.io/github/last-commit/hankchizljaw/modern-css-reset)](https://github.com/hankchizljaw/modern-css-reset)
| #CSS
- [**minireset.css**](https://jgthms.com/minireset.css/) - Tiny modern CSS reset.
![](https://img.shields.io/github/stars/jgthms/minireset.css.svg?style=social&label=Star)
[Repo ![GitHub Repo Stars](https://img.shields.io/github/stars/jgthms/minireset.css) ![GitHub last commit](https://img.shields.io/github/last-commit/jgthms/minireset.css)](https://github.com/jgthms/minireset.css)
| #Sass
- [**CSS Remedy** ![GitHub Repo Stars](https://img.shields.io/github/stars/jensimmons/cssremedy) ![GitHub last commit](https://img.shields.io/github/last-commit/jensimmons/cssremedy)](https://github.com/jensimmons/cssremedy) - Start your project with a remedy for the technical debt of CSS.
![](https://img.shields.io/github/stars/jensimmons/cssremedy.svg?style=social&label=Star)
| #CSS
- [**inuitcss** ![GitHub Repo Stars](https://img.shields.io/github/stars/inuitcss/inuitcss) ![GitHub last commit](https://img.shields.io/github/last-commit/inuitcss/inuitcss)](https://github.com/inuitcss/inuitcss) - Extensible, scalable, Sass-based, OOCSS framework for large and long-lasting UI projects.
![](https://img.shields.io/github/stars/inuitcss/inuitcss.svg?style=social&label=Star)
[Repo ![GitHub Repo Stars](https://img.shields.io/github/stars/inuitcss/inuitcss) ![GitHub last commit](https://img.shields.io/github/last-commit/inuitcss/inuitcss)](https://github.com/inuitcss/inuitcss)
| #SCSS
- [**Cutestrap**](https://www.cutestrap.com) - Sassy, opinionated CSS framework, a tiny alternative to Bootstrap.
![](https://img.shields.io/github/stars/tylerchilds/cutestrap.svg?style=social&label=Star)
[Repo ![GitHub Repo Stars](https://img.shields.io/github/stars/tylerchilds/cutestrap) ![GitHub last commit](https://img.shields.io/github/last-commit/tylerchilds/cutestrap)](https://github.com/tylerchilds/cutestrap)
- [**unsemantic**](https://unsemantic.com) - Fluid grid for mobile, tablet, and desktop.
![](https://img.shields.io/github/stars/nathansmith/unsemantic.svg?style=social&label=Star)
[Demo](https://unsemantic.com/demo-responsive),
[Docs](https://unsemantic.com/css-documentation),
[Repo ![GitHub Repo Stars](https://img.shields.io/github/stars/nathansmith/unsemantic) ![GitHub last commit](https://img.shields.io/github/last-commit/nathansmith/unsemantic)](https://github.com/nathansmith/unsemantic)
- [**Base**](https://getbase.org) - Rock solid, responsive HTML/CSS framework.
![](https://img.shields.io/github/stars/getbase/base.svg?style=social&label=Star)
[Docs ![GitHub Repo Stars](https://img.shields.io/github/stars/getbase/base) ![GitHub last commit](https://img.shields.io/github/last-commit/getbase/base)](https://github.com/getbase/base/blob/master/readme.md#documentation),
[Repo ![GitHub Repo Stars](https://img.shields.io/github/stars/getbase/base) ![GitHub last commit](https://img.shields.io/github/last-commit/getbase/base)](https://github.com/getbase/base)
| #SCSS #LESS
- [**Propeller**](https://propeller.in) - Front-end responsive framework based on Google's Material Design standards & Bootstrap.
![](https://img.shields.io/github/stars/digicorp/propeller.svg?style=social&label=Star)
[Docs](https://propeller.in/frameworks/open-source/get-started/),
[Repo ![GitHub Repo Stars](https://img.shields.io/github/stars/digicorp/propeller) ![GitHub last commit](https://img.shields.io/github/last-commit/digicorp/propeller)](https://github.com/digicorp/propeller)
| #SCSS
- [**Concise CSS**](https://concisecss.com) - Give up the bloat. Stop tripping over your classes. Be concise.
![](https://img.shields.io/github/stars/ConciseCSS/concise.css.svg?style=social&label=Star)
[Docs](https://concisecss.com/documentation/),
[Repo ![GitHub Repo Stars](https://img.shields.io/github/stars/ConciseCSS/concise.css) ![GitHub last commit](https://img.shields.io/github/last-commit/ConciseCSS/concise.css)](https://github.com/ConciseCSS/concise.css)
| #SCSS
- [**Responsive Boilerplate**](https://responsivebp.com) - Powerful, accessible, developer friendly framework for building responsive websites.
![](https://img.shields.io/github/stars/responsivebp/responsive.svg?style=social&label=Star)
[Docs](https://responsivebp.com/getting-started/),
[Repo ![GitHub Repo Stars](https://img.shields.io/github/stars/responsivebp/responsive) ![GitHub last commit](https://img.shields.io/github/last-commit/responsivebp/responsive)](https://github.com/responsivebp/responsive)
| #SCSS
- [**turretcss**](https://turretcss.com) - Responsive front-end framework for accessible and semantic websites.
![](https://img.shields.io/github/stars/turretcss/turretcss.svg?style=social&label=Star)
[Demo](https://turretcss.com/demo/),
[Docs](https://turretcss.com/getting-started/),
[Repo ![GitHub Repo Stars](https://img.shields.io/github/stars/turretcss/turretcss) ![GitHub last commit](https://img.shields.io/github/last-commit/turretcss/turretcss)](https://github.com/turretcss/turretcss)
| #CSS
- [**Centurion**](https://www.centurionframework.com) - Web-based framework for rapid prototyping and building larger web projects.
![](https://img.shields.io/github/stars/justinhough/Centurion.svg?style=social&label=Star)
[Docs ![GitHub Repo Stars](https://img.shields.io/github/stars/justinhough/Centurion) ![GitHub last commit](https://img.shields.io/github/last-commit/justinhough/Centurion)](https://github.com/justinhough/Centurion/blob/master/DOCUMENTATION.md),
[Repo ![GitHub Repo Stars](https://img.shields.io/github/stars/justinhough/Centurion) ![GitHub last commit](https://img.shields.io/github/last-commit/justinhough/Centurion)](https://github.com/justinhough/Centurion)
License
License CC0 1.0:
You can copy, modify, distribute and perform the work, even for commercial purposes, all without asking permission.
Images of GitHub stars are provided by Shields .