Skip to content

Frameworks

Awesome CSS Frameworks Awesome

List of awesome CSS frameworks.
Feel free to contribute.

Supported by FrontAid CMS:

FrontAid CMS - Agile Content Management with Git.

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

  • NES.css - NES-style CSS Framework.
    Demo, Docs, Repo | #SCSS

  • 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.