master 92b45b3e5a2c cached
4 files
19.2 KB
5.8k tokens
1 requests
Download .txt
Repository: troxler/awesome-css-frameworks
Branch: master
Commit: 92b45b3e5a2c
Files: 4
Total size: 19.2 KB

Directory structure:
gitextract__nyoomdh/

├── .editorconfig
├── .github/
│   └── CONTRIBUTING.md
├── dummy.css
└── readme.md

================================================
FILE CONTENTS
================================================

================================================
FILE: .editorconfig
================================================
root = true

[*]
indent_style = space
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = false
insert_final_newline = true


================================================
FILE: .github/CONTRIBUTING.md
================================================
# Contribution Guidelines


## Goals of this List
* Quality over quantity, i.e. do not add every single framework under the sun
* The frameworks should have a certain maturity and popularity
* Do not add projects that don't have an issue tracker or version control


## Contributing

* Fork the repository
* Add your suggestion
  * Use the template below
  * Choose the appropriate category
  * Sorting should be done roughly by numbers of stars (or importance)
* Create a pull request

```
- [**TODO**](TODO) - TODO.  
  ![](https://img.shields.io/github/stars/TODO/TODO.svg?style=social&label=Star)
  [Demo](TODO),
  [Docs](TODO),
  [Repo](TODO)
  | #TODO
```

Note that there are two whitespaces after the first line to enforce a line break.

Adding links to the demo or documentation is optional, but you should add them if they are explicitly provided by the framework.
The last line is used to add information about what CSS preprocessors (if any) are used by the framework. For example, if something only uses CSS, add `#CSS`. If a framework uses CSS, Sass, and Stylus, add `#CSS #Sass #Stylus`.


================================================
FILE: dummy.css
================================================
/* Annotate this repository as a CSS project */


================================================
FILE: readme.md
================================================
# Awesome CSS Frameworks [![Awesome](https://awesome.re/badge.svg)](https://awesome.re)

List of awesome CSS frameworks.  
Feel free to [contribute](https://github.com/troxler/awesome-css-frameworks/blob/master/.github/CONTRIBUTING.md).

**Are you looking for React/Vue/Angular [UI Component Libraries](https://frontaid.ch/web/ui/libraries.html) instead?**


## 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)
- [Stalled Development](#stalled-development)


## Base / Reset / Normalize

- [**modern-normalize**](https://github.com/sindresorhus/modern-normalize) - Normalize browsers' default style.  
  ![](https://img.shields.io/github/stars/sindresorhus/modern-normalize.svg?style=social&label=Star)
  [Repo](https://github.com/sindresorhus/modern-normalize)
  | #CSS

- [**ress**](https://github.com/filipelinhares/ress) - Modern CSS reset.  
  ![](https://img.shields.io/github/stars/filipelinhares/ress.svg?style=social&label=Star)
  [Repo](https://github.com/filipelinhares/ress)
  | #CSS

- [**Natural Selection**](https://github.com/frontaid/natural-selection) - Collection of best-practice CSS selectors.  
  ![](https://img.shields.io/github/stars/frontaid/natural-selection.svg?style=social&label=Star)
  | #CSS


## Class-less

Frameworks that use semantic HTML and do not rely on classes.

- [**Pico.css**](https://picocss.com/) - Elegant styles for all native HTML elements, dark mode automatically enabled.  
  ![](https://img.shields.io/github/stars/picocss/pico.svg?style=social&label=Star)
  [Demo](https://picocss.com/#examples),
  [Docs](https://picocss.com/docs/),
  [Repo](https://github.com/picocss/pico)
  | #SCSS

- [**MVP.css**](https://andybrewer.github.io/mvp/) - Minimalist stylesheet for HTML elements.  
  ![](https://img.shields.io/github/stars/andybrewer/mvp.svg?style=social&label=Star)
  [Docs](https://andybrewer.github.io/mvp/#docs),
  [Repo](https://github.com/andybrewer/mvp/)
  | #CSS

- [**sakura**](https://oxal.org/projects/sakura/) - Minimal classless CSS framework/theme.  
  ![](https://img.shields.io/github/stars/oxalorg/sakura.svg?style=social&label=Star)
  [Demo](https://oxal.org/projects/sakura/demo/),
  [Repo](https://github.com/oxalorg/sakura)
  | #SCSS

- [**Simple.css**](https://simplecss.org/) - Lightweight, classless CSS framework.  
  ![](https://img.shields.io/github/stars/kevquirk/simple.css?style=social&label=Star)
  [Demo](https://simplecss.org/demo),
  [Docs](https://github.com/kevquirk/simple.css/wiki),
  [Repo](https://github.com/kevquirk/simple.css/)
  | #CSS

- [**Tacit**](https://yegor256.github.io/tacit/) - CSS framework for dummies, without classes.  
  ![](https://img.shields.io/github/stars/yegor256/tacit.svg?style=social&label=Star)
  [Repo](https://github.com/yegor256/tacit/)
  | #SCSS


## Very Lightweight

Frameworks that are smaller than ~10KB.

- [**Pure**](https://purecss.io) - Set of small, responsive CSS modules that you can use in every web project.  
  ![](https://img.shields.io/github/stars/pure-css/pure.svg?style=social&label=Star)
  [Demo](https://purecss.io/layouts/),
  [Docs](https://purecss.io/start/),
  [Repo](https://github.com/pure-css/pure)
  | #CSS

- [**Picnic CSS**](https://picnicss.com) - Lightweight and beautiful library.  
  ![](https://img.shields.io/github/stars/franciscop/picnic.svg?style=social&label=Star)
  [Demo](https://picnicss.com/tests),
  [Docs](https://picnicss.com/documentation),
  [Repo](https://github.com/franciscop/picnic)
  | #SCSS

- [**Chota**](https://jenil.github.io/chota/) - Really small CSS framework.  
  ![](https://img.shields.io/github/stars/jenil/chota.svg?style=social&label=Star)
  [Demo](https://raw.githack.com/jenil/chota/master/test/index.html),
  [Docs](https://jenil.github.io/chota/#docs),
  [Repo](https://github.com/jenil/chota)
  | #CSS


## General Purpose

- [**Bootstrap**](https://getbootstrap.com) - The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.  
  ![](https://img.shields.io/github/stars/twbs/bootstrap.svg?style=social&label=Star)
  [Demo](https://getbootstrap.com/docs/4.0/examples/),
  [Docs](https://getbootstrap.com/docs/4.0/),
  [Repo](https://github.com/twbs/bootstrap)
  | #SCSS

- [**Bulma**](https://bulma.io) - Modern CSS framework based on Flexbox.  
  ![](https://img.shields.io/github/stars/jgthms/bulma.svg?style=social&label=Star)
  [Demo](https://bulma.io/expo/),
  [Docs](https://bulma.io/documentation/overview/start/),
  [Repo](https://github.com/jgthms/bulma)
  | #Sass

- [**Foundation**](https://get.foundation/) - The most advanced responsive front-end framework in the world.  
  ![](https://img.shields.io/github/stars/zurb/foundation-sites.svg?style=social&label=Star)
  [Demo](https://get.foundation/templates.html),
  [Docs](https://get.foundation/sites/docs/),
  [Repo](https://github.com/foundation/foundation-sites)
  | #SCSS

- [**UIkit**](https://getuikit.com) - Lightweight and modular front-end framework for developing fast and powerful web interfaces.  
  ![](https://img.shields.io/github/stars/uikit/uikit.svg?style=social&label=Star)
  [Demo](https://getuikit.com/v2/showcase/index.html),
  [Docs](https://getuikit.com/docs/introduction),
  [Repo](https://github.com/uikit/uikit)
  | #LESS #SCSS

- [**Primer**](https://primer.style/) - CSS framework that powers GitHub's front-end design.  
  ![](https://img.shields.io/github/stars/primer/css.svg?style=social&label=Star)
  [Docs](https://primer.style/css/),
  [Repo](https://github.com/primer/css)
  | #SCSS

- [**Carbon Components**](https://www.carbondesignsystem.com/) - Component library behind IBM's Carbon Design System.  
  ![](https://img.shields.io/github/stars/carbon-design-system/carbon-components.svg?style=social&label=Star)
  [Docs](https://www.carbondesignsystem.com/components/overview/),
  [Repo](https://github.com/carbon-design-system/carbon)
  | #SCSS

- [**U.S. Web Design System**](https://designsystem.digital.gov/) - Components used by U.S. federal government websites.  
  ![](https://img.shields.io/github/stars/uswds/uswds.svg?style=social&label=Star)
  [Docs](https://designsystem.digital.gov/components/overview/),
  [Repo](https://github.com/uswds/uswds)
  | #SCSS

- [**Fomantic-UI**](https://fomantic-ui.com/) - Build beautiful websites fast, with concise HTML, intuitive javascript, and simplified debugging.  
  ![](https://img.shields.io/github/stars/fomantic/fomantic-ui.svg?style=social&label=Star)
  [Docs](https://fomantic-ui.com/introduction/getting-started.html),
  [Repo](https://github.com/fomantic/fomantic-ui/)
  | #LESS

- [**Blaze UI**](https://www.blazeui.com) - Open source modular toolkit providing great structure for building websites quickly with a scalable and maintainable foundation.  
  ![](https://img.shields.io/github/stars/BlazeSoftware/atoms.svg?style=social&label=Star)
  [Demo](https://www.blazeui.com/components/buttons/),
  [Docs](https://www.blazeui.com/getting-started/install/),
  [Repo](https://github.com/BlazeSoftware/atoms)
  | #SCSS

- [**Cirrus**](https://cirrus-ui.netlify.app/) - Component and utility centric SCSS framework designed for rapid prototyping.  
  ![](https://img.shields.io/github/stars/spiderpig86/Cirrus.svg?style=social&label=Star)
  [Demo](https://cirrus-ui.netlify.app/getting-started/examples),
  [Docs](https://cirrus-ui.netlify.app/getting-started/setup),
  [Repo](https://github.com/Spiderpig86/Cirrus)
  | #CSS

- [**Vanilla Framework**](https://vanillaframework.io/) - Simple, extensible CSS framework. Written by the Canonical Web Team.  
  ![](https://img.shields.io/github/stars/canonical-web-and-design/vanilla-framework.svg?style=social&label=Star)
  [Demo](https://vanillaframework.io/docs/examples),
  [Docs](https://vanillaframework.io/docs/),
  [Repo](https://github.com/canonical/vanilla-framework)
  | #SCSS

- [**PatternFly**](https://www.patternfly.org/) - UI framework for enterprise web applications.  
  ![](https://img.shields.io/github/stars/patternfly/patternfly.svg?style=social&label=Star)
  [Demo](https://www.patternfly.org/patterns/about-patterns),
  [Docs](https://www.patternfly.org/get-started/),
  [Repo](https://github.com/patternfly/patternfly)
  | #SCSS #LESS

- [**Stacks**](https://stackoverflow.design/) - UI components used by Stack Overflow.  
  ![](https://img.shields.io/github/stars/StackExchange/Stacks.svg?style=social&label=Star)
  [Docs](https://stackoverflow.design/product/develop/using-stacks/),
  [Repo](https://github.com/StackExchange/Stacks)
  | #LESS

- [**HiQ**](https://jonathanharrell.github.io/hiq/) - Simple CSS foundation with responsive typography and input styling.  
  ![](https://img.shields.io/github/stars/jonathanharrell/hiq.svg?style=social&label=Star)
  [Docs](https://jonathanharrell.github.io/hiq/guide/),
  [Repo](https://github.com/jonathanharrell/hiq/)
  | #PostCSS


## Material Design

- [**Beer CSS**](https://www.beercss.com) - Build material design interfaces in record time without stress for devs.  
  ![](https://img.shields.io/github/stars/beercss/beercss.svg?style=social&label=Star)
  [Repo](https://github.com/beercss/beercss)
  | #CSS

- [**Materialize**](https://materializecss.github.io/materialize/) - Responsive front-end library based on Google's Material Design.  
  ![](https://img.shields.io/github/stars/materializecss/materialize.svg?style=social&label=Star)
  [Docs](https://materializecss.github.io/materialize/getting-started.html),
  [Repo](https://github.com/materializecss/materialize)
  | #SCSS


## Utility-based

- [**Tailwind CSS**](https://tailwindcss.com) - Utility-first CSS framework for rapid UI development.  
  ![](https://img.shields.io/github/stars/tailwindlabs/tailwindcss.svg?style=social&label=Star)
  [Docs](https://tailwindcss.com/docs),
  [Repo](https://github.com/tailwindlabs/tailwindcss)
  | #CSS

- [**Open Props**](https://open-props.style) - CSS custom properties to help accelerate adaptive and consistent design.  
  ![](https://img.shields.io/github/stars/argyleink/open-props.svg?style=social&label=Star)
  [Demo](https://open-props.style/#gallery),
  [Docs](https://open-props.style/#getting-started),
  [Repo](https://github.com/argyleink/open-props/)
  | #CSS #PostCSS


## Specialized

- [**NES.css**](https://nostalgic-css.github.io/NES.css/) - NES-style CSS Framework.  
  ![](https://img.shields.io/github/stars/nostalgic-css/NES.css.svg?style=social&label=Star)
  [Demo](https://nostalgic-css.github.io/NES.css/),
  [Docs](https://github.com/nostalgic-css/NES.css#installation),
  [Repo](https://github.com/nostalgic-css/NES.css)
  | #SCSS

- [**98.css**](https://jdan.github.io/98.css/) - CSS library for building interfaces that look like Windows 98.  
  ![](https://img.shields.io/github/stars/jdan/98.css.svg?style=social&label=Star)
  [Repo](https://github.com/jdan/98.css)
  | #CSS

- [**Tufte CSS**](https://edwardtufte.github.io/tufte-css/) - Style your webpage like Edward Tufte’s handouts.  
  ![](https://img.shields.io/github/stars/edwardtufte/tufte-css.svg?style=social&label=Star)
  [Repo](https://github.com/edwardtufte/tufte-css)
  | #CSS

- [**Gutenberg**](https://github.com/BafS/Gutenberg) - Modern framework to print the web correctly.  
  ![](https://img.shields.io/github/stars/BafS/Gutenberg.svg?style=social&label=Star)
  [Demo](https://bafs.github.io/Gutenberg/),
  [Docs](https://github.com/BafS/Gutenberg#what-does-the-framework-do-)
  | #SCSS

- [**System.css**](https://sakofchit.github.io/system.css/) - Design system for building retro Apple interfaces.  
  ![](https://img.shields.io/github/stars/sakofchit/system.css.svg?style=social&label=Star)
  [Repo](https://github.com/sakofchit/system.css)
  | #PostCSS

- [**XP.css**](https://botoxparty.github.io/XP.css/) - CSS library for building interfaces that look like Windows XP.  
  ![](https://img.shields.io/github/stars/botoxparty/XP.css.svg?style=social&label=Star)
  [Repo](https://github.com/botoxparty/XP.css)
  | #PostCSS

- [**TuiCss**](https://github.com/vinibiavatti1/TuiCss) - Library to create MS-DOS interfaces.  
  ![](https://img.shields.io/github/stars/vinibiavatti1/TuiCss.svg?style=social&label=Star)
  [Demo](https://github.com/vinibiavatti1/TuiCss/wiki/Examples),
  [Docs](https://github.com/vinibiavatti1/TuiCss/wiki)
  | #SCSS

- [**7.css**](https://khang-nd.github.io/7.css/) - CSS library for building interfaces that look like Windows 7.  
  ![](https://img.shields.io/github/stars/khang-nd/7.css.svg?style=social&label=Star)
  [Repo](https://github.com/khang-nd/7.css)
  | #PostCSS

- [**Bojler**](https://bojler.slicejack.com) - Email framework for developing responsive and lightweight email templates.  
  ![](https://img.shields.io/github/stars/Slicejack/bojler.svg?style=social&label=Star)
  [Docs](https://bojler.slicejack.com/documentation/getting-started/),
  [Repo](https://github.com/Slicejack/bojler)
  | #SCSS

- [**Orbit**](https://zumerlab.github.io/orbit-docs/) - CSS framework designed for building any kind of radial UI.  
  ![](https://img.shields.io/github/stars/zumerlab/orbit.svg?style=social&label=Star)
  [Docs](https://zumerlab.github.io/orbit-docs/introduction/),
  [Repo](https://github.com/zumerlab/orbit)
  | #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.

<details>
  <summary><strong>Show Section</strong></summary>

- [**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

- [**Material Components Web**](https://material.io/components/web/) - Modular and customizable Material Design UI components for the web.  
  ![](https://img.shields.io/github/stars/material-components/material-components-web.svg?style=social&label=Star)
  [Demo](https://material.io/components?platform=web),
  [Docs](https://material.io/develop/web/getting-started),
  [Repo](https://github.com/material-components/material-components-web)
  | #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

- [**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)

- [**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

- [**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)

</details>

---

## License
License [CC0 1.0](https://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 [Shields](https://github.com/badges/shields).
Download .txt
gitextract__nyoomdh/

├── .editorconfig
├── .github/
│   └── CONTRIBUTING.md
├── dummy.css
└── readme.md
Condensed preview — 4 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (20K chars).
[
  {
    "path": ".editorconfig",
    "chars": 132,
    "preview": "root = true\n\n[*]\nindent_style = space\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = false\ninsert_final_new"
  },
  {
    "path": ".github/CONTRIBUTING.md",
    "chars": 1103,
    "preview": "# Contribution Guidelines\n\n\n## Goals of this List\n* Quality over quantity, i.e. do not add every single framework under "
  },
  {
    "path": "dummy.css",
    "chars": 48,
    "preview": "/* Annotate this repository as a CSS project */\n"
  },
  {
    "path": "readme.md",
    "chars": 18400,
    "preview": "# Awesome CSS Frameworks [![Awesome](https://awesome.re/badge.svg)](https://awesome.re)\n\nList of awesome CSS frameworks."
  }
]

About this extraction

This page contains the full source code of the troxler/awesome-css-frameworks GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 4 files (19.2 KB), approximately 5.8k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.

Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.

Copied to clipboard!