Frameworks
Awesome CSS Frameworks ¶
List of awesome CSS frameworks.
Feel free to contribute.
Supported by FrontAid CMS:
Base / Reset / Normalize¶
-
modern-normalize - Normalize browsers' default style.
Repo | #CSS -
Natural Selection - Collection of best-practice CSS selectors.
| #CSS
Class-less¶
Frameworks that use semantic HTML and do not rely on classes.
-
MVP.css - Minimalist stylesheet for HTML elements.
Docs, Repo | #CSS -
sakura - Minimal classless CSS framework/theme.
Demo, Repo | #SCSS -
Simple.css - Lightweight, classless CSS framework.
Demo, Docs, Repo | #CSS -
Tacit - CSS framework for dummies, without classes.
Repo | #SCSS
Very Lightweight¶
Frameworks that are smaller than ~5KB.
-
Pure - Set of small, responsive CSS modules that you can use in every web project.
Demo, Docs, Repo | #CSS -
Picnic CSS - Lightweight and beautiful library.
Demo, Docs, Repo | #SCSS
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¶
-
Material Components Web - Modular and customizable Material Design UI components for the web.
Demo, Docs, Repo | #SCSS -
Beer CSS - Build material design interfaces in record time without stress for devs.
Repo | #CSS -
Materialize - Responsive front-end library based on Google's Material Design.
Docs, Repo | #SCSS
Utility-based¶
-
Tailwind CSS - Utility-first CSS framework for rapid UI development.
Docs, Repo | #CSS -
Open Props - CSS custom properties to help accelerate adaptive and consistent design.
Demo, Docs, Repo | #CSS #PostCSS
Specialized¶
-
98.css - CSS library for building interfaces that look like Windows 98.
Repo | #CSS -
Tufte CSS - Style your webpage like Edward Tufte’s handouts.
Repo | #CSS -
Gutenberg - Modern framework to print the web correctly.
Demo, Docs | #SCSS -
System.css - Design system for building retro Apple interfaces.
Repo | #PostCSS -
XP.css - CSS library for building interfaces that look like Windows XP.
Repo | #PostCSS -
TuiCss - Library to create MS-DOS interfaces.
Demo, Docs | #SCSS -
7.css - CSS library for building interfaces that look like Windows 7.
Repo | #PostCSS -
Bojler - Email framework for developing responsive and lightweight email templates.
Docs, Repo | #SCSS
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](https://github.com/semantic-org/semantic-ui) | #LESS - [**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](https://github.com/tachyons-css/tachyons/) | #CSS - [**Bourbon**](https://www.bourbon.io/) - Lightweight Sass tool set. ![](https://img.shields.io/github/stars/thoughtbot/bourbon.svg?style=social&label=Star) [Docs](https://www.bourbon.io/docs/latest/), [Repo](https://github.com/thoughtbot/bourbon/) | #SCSS - [**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](https://github.com/kognise/water.css) | #CSS - [**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](https://github.com/csstools/sanitize.css) | #CSS - [**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](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](https://github.com/jgthms/minireset.css) | #Sass - [**CSS Remedy**](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**](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](https://github.com/inuitcss/inuitcss) | #SCSS - [**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](https://github.com/nathansmith/unsemantic) - [**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](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](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](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](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](https://github.com/justinhough/Centurion/blob/master/DOCUMENTATION.md), [Repo](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.