Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Correia-jpv/fucking-awesome-css-frameworks
List of awesome CSS frameworks. With repository stars⭐ and forks🍴
https://github.com/Correia-jpv/fucking-awesome-css-frameworks
List: fucking-awesome-css-frameworks
awesome awesome-list collection css css-framework css-frameworks css3 list modern-web sanitize sass scss scss-framework styled styled-component styled-components web webdevelopment
Last synced: 3 months ago
JSON representation
List of awesome CSS frameworks. With repository stars⭐ and forks🍴
- Host: GitHub
- URL: https://github.com/Correia-jpv/fucking-awesome-css-frameworks
- Owner: Correia-jpv
- Created: 2022-08-04T09:52:41.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-24T07:26:39.000Z (4 months ago)
- Last Synced: 2024-10-25T02:16:49.162Z (4 months ago)
- Topics: awesome, awesome-list, collection, css, css-framework, css-frameworks, css3, list, modern-web, sanitize, sass, scss, scss-framework, styled, styled-component, styled-components, web, webdevelopment
- Language: CSS
- Homepage:
- Size: 172 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
- ultimate-awesome - fucking-awesome-css-frameworks - List of awesome CSS frameworks. With repository stars⭐ and forks🍴. (Other Lists / Julia Lists)
README
# Awesome CSS Frameworks [](https://awesome.re)
List of awesome CSS frameworks.
Feel free to [contribute](https://github.com/correia-jpv/fucking-awesome-css-frameworks/blob/master/.github/CONTRIBUTING.md).**Supported by 🌎 [FrontAid CMS](frontaid.io/?pk_campaign=cssfw)**:
## Contents
- [Base / Reset / Normalize](#base--reset--normalize)
- [Class-less](#class-less)
- [Very Lightweight](#very-lightweight)
- [General Purpose](#general-purpose)
- [Material Design](#material-design)
- [Utility-based](#utility-based)
- [Specialized](#specialized)
- [Toolkits](#toolkits)
- [Stalled Development](#stalled-development)## Base / Reset / Normalize
-
6339⭐
368🍴
[**modern-normalize**](https://github.com/sindresorhus/modern-normalize)) - Normalize browsers' default style.

6339⭐
368🍴
[Repo](https://github.com/sindresorhus/modern-normalize))
| #CSS-
2030⭐
433🍴
[**ress**](https://github.com/filipelinhares/ress)) - Modern CSS reset.

2030⭐
433🍴
[Repo](https://github.com/filipelinhares/ress))
| #CSS-
201⭐
11🍴
[**Natural Selection**](https://github.com/frontaid/natural-selection)) - Collection of best-practice CSS selectors.

| #CSS## Class-less
Frameworks that use semantic HTML and do not rely on classes.
- 🌎 [**MVP.css**](andybrewer.github.io/mvp/) - Minimalist stylesheet for HTML elements.

🌎 [Docs](andybrewer.github.io/mvp/#docs),
?⭐
?🍴
[Repo](https://github.com/andybrewer/mvp/))
| #CSS- 🌎 [**sakura**](oxal.org/projects/sakura/) - Minimal classless CSS framework/theme.

🌎 [Demo](oxal.org/projects/sakura/demo/),
4161⭐
184🍴
[Repo](https://github.com/oxalorg/sakura))
| #SCSS- 🌎 [**Simple.css**](simplecss.org/) - Lightweight, classless CSS framework.

🌎 [Demo](simplecss.org/demo),
?⭐
?🍴
[Docs](https://github.com/kevquirk/simple.css/wiki)),
?⭐
?🍴
[Repo](https://github.com/kevquirk/simple.css/))
| #CSS- 🌎 [**Tacit**](yegor256.github.io/tacit/) - CSS framework for dummies, without classes.

?⭐
?🍴
[Repo](https://github.com/yegor256/tacit/))
| #SCSS## Very Lightweight
Frameworks that are smaller than ~5KB.
- 🌎 [**Pure**](purecss.io) - Set of small, responsive CSS modules that you can use in every web project.

🌎 [Demo](purecss.io/layouts/),
🌎 [Docs](purecss.io/start/),
23612⭐
2477🍴
[Repo](https://github.com/pure-css/pure))
| #CSS- 🌎 [**Picnic CSS**](picnicss.com) - Lightweight and beautiful library.

🌎 [Demo](picnicss.com/tests),
🌎 [Docs](picnicss.com/documentation),
3827⭐
223🍴
[Repo](https://github.com/franciscop/picnic))
| #SCSS- 🌎 [**Chota**](jenil.github.io/chota/) - Really small CSS framework.

🌎 [Demo](raw.githack.com/jenil/chota/master/test/index.html),
🌎 [Docs](jenil.github.io/chota/#docs),
1431⭐
102🍴
[Repo](https://github.com/jenil/chota))
| #CSS## General Purpose
- 🌎 [**Bootstrap**](getbootstrap.com) - The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

🌎 [Demo](getbootstrap.com/docs/4.0/examples/),
🌎 [Docs](getbootstrap.com/docs/4.0/),
170997⭐
78901🍴
[Repo](https://github.com/twbs/bootstrap))
| #SCSS- 🌎 [**Bulma**](bulma.io) - Modern CSS framework based on Flexbox.

🌎 [Demo](bulma.io/expo/),
🌎 [Docs](bulma.io/documentation/overview/start/),
49419⭐
3953🍴
[Repo](https://github.com/jgthms/bulma))
| #Sass- 🌎 [**Foundation**](get.foundation/) - The most advanced responsive front-end framework in the world.

🌎 [Demo](get.foundation/templates.html),
🌎 [Docs](get.foundation/sites/docs/),
29674⭐
5474🍴
[Repo](https://github.com/foundation/foundation-sites))
| #SCSS- 🌎 [**UIkit**](getuikit.com) - Lightweight and modular front-end framework for developing fast and powerful web interfaces.

🌎 [Demo](getuikit.com/v2/showcase/index.html),
🌎 [Docs](getuikit.com/docs/introduction),
18338⭐
2326🍴
[Repo](https://github.com/uikit/uikit))
| #LESS #SCSS- 🌎 [**Primer**](primer.style/) - CSS framework that powers GitHub's front-end design.

🌎 [Docs](primer.style/css/),
12576⭐
1220🍴
[Repo](https://github.com/primer/css))
| #SCSS- 🌎 [**Pico.css**](picocss.com/) - Elegant styles for all native HTML elements, dark mode automatically enabled.

🌎 [Demo](picocss.com/#examples),
🌎 [Docs](picocss.com/docs/),
13891⭐
410🍴
[Repo](https://github.com/picocss/pico))
| #SCSS- 🌎 [**Carbon Components**](www.carbondesignsystem.com/) - Component library behind IBM's Carbon Design System.

🌎 [Docs](www.carbondesignsystem.com/components/overview/),
7882⭐
1822🍴
[Repo](https://github.com/carbon-design-system/carbon))
| #SCSS- 🌎 [**U.S. Web Design System**](designsystem.digital.gov/) - Components used by U.S. federal government websites.

🌎 [Docs](designsystem.digital.gov/components/overview/),
6827⭐
935🍴
[Repo](https://github.com/uswds/uswds))
| #SCSS- 🌎 [**Fomantic-UI**](fomantic-ui.com/) - Build beautiful websites fast, with concise HTML, intuitive javascript, and simplified debugging.

🌎 [Docs](fomantic-ui.com/introduction/getting-started.html),
?⭐
?🍴
[Repo](https://github.com/fomantic/fomantic-ui/))
| #LESS- 🌎 [**Blaze UI**](www.blazeui.com) - Open source modular toolkit providing great structure for building websites quickly with a scalable and maintainable foundation.

🌎 [Demo](www.blazeui.com/components/buttons/),
🌎 [Docs](www.blazeui.com/getting-started/install/),
1557⭐
112🍴
[Repo](https://github.com/BlazeSoftware/atoms))
| #SCSS- 🌎 [**Cirrus**](cirrus-ui.netlify.app/) - Component and utility centric SCSS framework designed for rapid prototyping.

🌎 [Demo](cirrus-ui.netlify.app/getting-started/examples),
🌎 [Docs](cirrus-ui.netlify.app/getting-started/setup),
1381⭐
75🍴
[Repo](https://github.com/Spiderpig86/Cirrus))
| #CSS- 🌎 [**Vanilla Framework**](vanillaframework.io/) - Simple, extensible CSS framework. Written by the Canonical Web Team.

🌎 [Demo](vanillaframework.io/docs/examples),
🌎 [Docs](vanillaframework.io/docs/),
850⭐
169🍴
[Repo](https://github.com/canonical/vanilla-framework))
| #SCSS- 🌎 [**PatternFly**](www.patternfly.org/) - UI framework for enterprise web applications.

🌎 [Demo](www.patternfly.org/patterns/about-patterns),
🌎 [Docs](www.patternfly.org/get-started/),
712⭐
97🍴
[Repo](https://github.com/patternfly/patternfly))
| #SCSS #LESS- 🌎 [**Stacks**](stackoverflow.design/) - UI components used by Stack Overflow.

🌎 [Docs](stackoverflow.design/product/develop/using-stacks/),
617⭐
90🍴
[Repo](https://github.com/StackExchange/Stacks))
| #LESS- 🌎 [**HiQ**](jonathanharrell.github.io/hiq/) - Simple CSS foundation with responsive typography and input styling.

🌎 [Docs](jonathanharrell.github.io/hiq/guide/),
?⭐
?🍴
[Repo](https://github.com/jonathanharrell/hiq/))
| #PostCSS## Material Design
- 🌎 [**Material Components Web**](material.io/components/web/) - Modular and customizable Material Design UI components for the web.

🌎 [Demo](material.io/components?platform=web),
🌎 [Docs](material.io/develop/web/getting-started),
17143⭐
2142🍴
[Repo](https://github.com/material-components/material-components-web))
| #SCSS- 🌎 [**Beer CSS**](www.beercss.com) - Build material design interfaces in record time without stress for devs.

1434⭐
56🍴
[Repo](https://github.com/beercss/beercss))
| #CSS- 🌎 [**Materialize**](materializecss.github.io/materialize/) - Responsive front-end library based on Google's Material Design.

🌎 [Docs](materializecss.github.io/materialize/getting-started.html),
920⭐
105🍴
[Repo](https://github.com/materializecss/materialize))
| #SCSS## Utility-based
- 🌎 [**Tailwind CSS**](tailwindcss.com) - Utility-first CSS framework for rapid UI development.

🌎 [Docs](tailwindcss.com/docs),
83666⭐
4237🍴
[Repo](https://github.com/tailwindlabs/tailwindcss))
| #CSS- 🌎 [**Open Props**](open-props.style) - CSS custom properties to help accelerate adaptive and consistent design.

🌎 [Demo](open-props.style/#gallery),
🌎 [Docs](open-props.style/#getting-started),
?⭐
?🍴
[Repo](https://github.com/argyleink/open-props/))
| #CSS #PostCSS## Specialized
- 🌎 [**NES.css**](nostalgic-css.github.io/NES.css/) - NES-style CSS Framework.

🌎 [Demo](nostalgic-css.github.io/NES.css/),
20760⭐
1659🍴
[Docs](https://github.com/nostalgic-css/NES.css#installation)),
20760⭐
1659🍴
[Repo](https://github.com/nostalgic-css/NES.css))
| #SCSS- 🌎 [**98.css**](jdan.github.io/98.css/) - CSS library for building interfaces that look like Windows 98.

9684⭐
314🍴
[Repo](https://github.com/jdan/98.css))
| #CSS- 🌎 [**Tufte CSS**](edwardtufte.github.io/tufte-css/) - Style your webpage like Edward Tufte’s handouts.

5992⭐
459🍴
[Repo](https://github.com/edwardtufte/tufte-css))
| #CSS-
4836⭐
142🍴
[**Gutenberg**](https://github.com/BafS/Gutenberg)) - Modern framework to print the web correctly.

🌎 [Demo](bafs.github.io/Gutenberg/),
4836⭐
142🍴
[Docs](https://github.com/BafS/Gutenberg#what-does-the-framework-do-))
| #SCSS- 🌎 [**XP.css**](botoxparty.github.io/XP.css/) - CSS library for building interfaces that look like Windows XP.

2326⭐
109🍴
[Repo](https://github.com/botoxparty/XP.css))
| #PostCSS-
1636⭐
72🍴
[**TuiCss**](https://github.com/vinibiavatti1/TuiCss)) - Library to create MS-DOS interfaces.

?⭐
?🍴
[Demo](https://github.com/vinibiavatti1/TuiCss/wiki/Examples)),
?⭐
?🍴
[Docs](https://github.com/vinibiavatti1/TuiCss/wiki))
| #SCSS- 🌎 [**7.css**](khang-nd.github.io/7.css/) - CSS library for building interfaces that look like Windows 7.

1688⭐
86🍴
[Repo](https://github.com/khang-nd/7.css))
| #PostCSS- 🌎 [**Bojler**](bojler.slicejack.com) - Email framework for developing responsive and lightweight email templates.

🌎 [Docs](bojler.slicejack.com/documentation/getting-started/),
1031⭐
59🍴
[Repo](https://github.com/Slicejack/bojler))
| #SCSS## 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.- 🌎 [**Bourbon**](www.bourbon.io/) - Lightweight Sass tool set.

🌎 [Docs](www.bourbon.io/docs/latest/),
?⭐
?🍴
[Repo](https://github.com/thoughtbot/bourbon/))
| #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**](semantic-ui.com) - User interface is the language of the web.

🌎 [Docs](semantic-ui.com/introduction/getting-started.html),
51117⭐
4942🍴
[Repo](https://github.com/semantic-org/semantic-ui))
| #LESS- 🌎 [**Materialize**](materializecss.com) - CSS framework based on material design.

🌎 [Demo](materializecss.com/showcase.html),
🌎 [Docs](materializecss.com/getting-started.html),
38865⭐
4737🍴
[Repo](https://github.com/Dogfalo/materialize))
| #SCSS- 🌎 [**Spectre.css**](picturepan2.github.io/spectre/) - Lightweight, responsive and modern CSS framework.

🌎 [Docs](picturepan2.github.io/spectre/getting-started.html),
11333⭐
806🍴
[Repo](https://github.com/picturepan2/spectre))
| #SCSS
- 🌎 [**Tachyons**](tachyons.io) - Quickly build and design new UI without writing CSS.

🌎 [Demo](tachyons.io/gallery/),
🌎 [Docs](tachyons.io/docs/),
?⭐
?🍴
[Repo](https://github.com/tachyons-css/tachyons/))
| #CSS- 🌎 [**Milligram**](milligram.io) - Minimalist CSS framework.

🌎 [Demo](milligram.io/showcase.html),
🌎 [Docs](milligram.io/#getting-started),
10222⭐
746🍴
[Repo](https://github.com/milligram/milligram))
| #Sass- 🌎 [**Water.css**](watercss.kognise.dev/) - Just-add-CSS collection of styles to make simple websites just a little nicer.

8341⭐
494🍴
[Repo](https://github.com/kognise/water.css))
| #CSS- 🌎 [**Basscss**](basscss.com) - Low-level CSS toolkit.

?⭐
?🍴
[Repo](https://github.com/basscss/basscss/))- 🌎 [**sanitize.css**](csstools.github.io/sanitize.css/) - The best-practices CSS foundation.

5226⭐
312🍴
[Repo](https://github.com/csstools/sanitize.css))
| #CSS
- 🌎 [**MUI**](www.muicss.com) - Lightweight CSS framework that follows Google's Material Design guidelines.

🌎 [Docs](www.muicss.com/docs/v1/getting-started/introduction),
4511⭐
426🍴
[Repo](https://github.com/muicss/mui))
| #SCSS
-2960⭐
448🍴
[**modern-css-reset**](https://github.com/hankchizljaw/modern-css-reset)) - Tiny little reset that you can use as the basis of your CSS projects.

2960⭐
448🍴
[Repo](https://github.com/hankchizljaw/modern-css-reset))
| #CSS- 🌎 [**minireset.css**](jgthms.com/minireset.css/) - Tiny modern CSS reset.

2781⭐
519🍴
[Repo](https://github.com/jgthms/minireset.css))
| #Sass-
2201⭐
114🍴
[**CSS Remedy**](https://github.com/jensimmons/cssremedy)) - Start your project with a remedy for the technical debt of CSS.

| #CSS-
1849⭐
206🍴
[**inuitcss**](https://github.com/inuitcss/inuitcss)) - Extensible, scalable, Sass-based, OOCSS framework for large and long-lasting UI projects.

1849⭐
206🍴
[Repo](https://github.com/inuitcss/inuitcss))
| #SCSS- 🌎 [**Cutestrap**](www.cutestrap.com) - Sassy, opinionated CSS framework, a tiny alternative to Bootstrap.

1569⭐
78🍴
[Repo](https://github.com/tylerchilds/cutestrap))- 🌎 [**unsemantic**](unsemantic.com) - Fluid grid for mobile, tablet, and desktop.

🌎 [Demo](unsemantic.com/demo-responsive),
🌎 [Docs](unsemantic.com/css-documentation),
1376⭐
160🍴
[Repo](https://github.com/nathansmith/unsemantic))- 🌎 [**Base**](getbase.org) - Rock solid, responsive HTML/CSS framework.

1269⭐
157🍴
[Docs](https://github.com/getbase/base/blob/master/readme.md#documentation)),
1269⭐
157🍴
[Repo](https://github.com/getbase/base))
| #SCSS #LESS- 🌎 [**Propeller**](propeller.in) - Front-end responsive framework based on Google's Material Design standards & Bootstrap.

🌎 [Docs](propeller.in/frameworks/open-source/get-started/),
1126⭐
139🍴
[Repo](https://github.com/digicorp/propeller))
| #SCSS- 🌎 [**Concise CSS**](concisecss.com) - Give up the bloat. Stop tripping over your classes. Be concise.

🌎 [Docs](concisecss.com/documentation/),
942⭐
71🍴
[Repo](https://github.com/ConciseCSS/concise.css))
| #SCSS- 🌎 [**Responsive Boilerplate**](responsivebp.com) - Powerful, accessible, developer friendly framework for building responsive websites.

🌎 [Docs](responsivebp.com/getting-started/),
867⭐
135🍴
[Repo](https://github.com/responsivebp/responsive))
| #SCSS- 🌎 [**turretcss**](turretcss.com) - Responsive front-end framework for accessible and semantic websites.

🌎 [Demo](turretcss.com/demo/),
🌎 [Docs](turretcss.com/getting-started/),
799⭐
47🍴
[Repo](https://github.com/turretcss/turretcss))
| #CSS- 🌎 [**Centurion**](www.centurionframework.com) - Web-based framework for rapid prototyping and building larger web projects.

326⭐
56🍴
[Docs](https://github.com/justinhough/Centurion/blob/master/DOCUMENTATION.md)),
326⭐
56🍴
[Repo](https://github.com/justinhough/Centurion))---
## License
License 🌎 [CC0 1.0](creativecommons.org/publicdomain/zero/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
23929⭐
5510🍴
[Shields](https://github.com/badges/shields)).## Source
8080⭐
448🍴
[troxler/awesome-css-frameworks](https://github.com/troxler/awesome-css-frameworks))