troxler / awesome-css-frameworks

List of awesome CSS frameworks in 2024
https://frontaid.io/web/css/
7.84k stars 442 forks source link
awesome awesome-list collection css css-framework framework list scss

Awesome CSS Frameworks Awesome

List of awesome CSS frameworks.
Feel free to contribute.

Supported by FrontAid CMS:

<img src="media/frontaid.png" width="600" alt="FrontAid CMS - Agile Content Management with Git.">

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

Material Design

Utility-based

Specialized

Toolkits

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](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](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](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](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](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](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](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](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](https://github.com/muicss/mui) | #SCSS - [**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 - [**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](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](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](https://github.com/getbase/base/blob/master/readme.md#documentation), [Repo](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](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.