Git Product home page Git Product logo

awesome-css-frameworks's Introduction

Awesome CSS Frameworks Awesome

List of awesome CSS frameworks.
Feel free to contribute.

Supported by FrontAid CMS:

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

  • 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

  • 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

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 - User interface is the language of the web.
    Docs, Repo | #LESS

  • Materialize - CSS framework based on material design.
    Demo, Docs, Repo | #SCSS

  • Spectre.css - Lightweight, responsive and modern CSS framework.
    Docs, Repo | #SCSS

  • Tachyons - Quickly build and design new UI without writing CSS.
    Demo, Docs, Repo | #CSS

  • Milligram - Minimalist CSS framework.
    Demo, Docs, Repo | #Sass

  • Water.css - Just-add-CSS collection of styles to make simple websites just a little nicer.
    Repo | #CSS

  • Basscss - Low-level CSS toolkit.
    Repo

  • sanitize.css - The best-practices CSS foundation.
    Repo | #CSS

  • MUI - Lightweight CSS framework that follows Google's Material Design guidelines.
    Docs, Repo | #SCSS

  • modern-css-reset - Tiny little reset that you can use as the basis of your CSS projects.
    Repo | #CSS

  • minireset.css - Tiny modern CSS reset.
    Repo | #Sass

  • CSS Remedy - Start your project with a remedy for the technical debt of CSS.
    | #CSS

  • inuitcss - Extensible, scalable, Sass-based, OOCSS framework for large and long-lasting UI projects.
    Repo | #SCSS

  • Cutestrap - Sassy, opinionated CSS framework, a tiny alternative to Bootstrap.
    Repo

  • unsemantic - Fluid grid for mobile, tablet, and desktop.
    Demo, Docs, Repo

  • Base - Rock solid, responsive HTML/CSS framework.
    Docs, Repo | #SCSS #LESS

  • Propeller - Front-end responsive framework based on Google's Material Design standards & Bootstrap.
    Docs, Repo | #SCSS

  • Concise CSS - Give up the bloat. Stop tripping over your classes. Be concise.
    Docs, Repo | #SCSS

  • Responsive Boilerplate - Powerful, accessible, developer friendly framework for building responsive websites.
    Docs, Repo | #SCSS

  • turretcss - Responsive front-end framework for accessible and semantic websites.
    Demo, Docs, Repo | #CSS

  • Centurion - Web-based framework for rapid prototyping and building larger web projects.
    Docs, Repo


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.

awesome-css-frameworks's People

Contributors

anthonydillon avatar argyleink avatar ayushichoudhary-19 avatar cmiksche avatar develmood avatar filfreire avatar gregorypratt avatar igoradamenko avatar jessechavez avatar jnardiello avatar khang-nd avatar kytta avatar lalaithama avatar linkyu avatar lucaslarroche avatar martinmuzatko avatar maxshalom avatar milesmcc avatar mkropat avatar n-ce avatar oliver3 avatar rafa-br34 avatar rinatvaliullov avatar spekulatius avatar spiderpig86 avatar troxler avatar wooky avatar z00rat avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

awesome-css-frameworks's Issues

Add more info about Frameworks

Hey.. This list is amazing.. Thanks...

I'd like to add more info about each framework, as number of stars, last commit, watchers, forks and issues.
Do you think that I can add this info to your list with shields.io?

Look the idea here: JavaScript Crypto Libraries

If you think that it can be valuable just tell me and I will update your list.

Thanks.

Add the Ink Framework

Ink is an interface kit for quick development of web interfaces, simple to use and expand on. It uses a combination of HTML, CSS and JavaScript to offer modern solutions for building layouts, display common interface elements and implement interactive features that are content-centric and user friendly for both your audience and your designers & developers. Ink is part of SAPO's Open Source Software initiative.

Their website is http://ink.sapo.pt/.

metro ui 4

hi .
why metro ui 4 is not in your list or other people list ?

Demo site and Docs site can be the same

according to CONTRIBUTING.md

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

this template has been asked to use ^

but for few entries demo site and docs site can be that same
for those cases it will be better to use

  [Demo, Docs](TODO),

or

  [Demo and Docs](TODO),

Spectre.css is dead

It's been over a year since there's been a new commit in the project.
I think it's better to move it to the stalled development session.

Fomantic-UI

Since you list Semantic-UI, maybe you want to mention Fomantic-UI, too.

Add SpryCss

Just wanted to check to see if you might be interested in SpryCss
One nice feature is that it is easy to manage unneeded breakpoints, colors, sizing options through the Sass Maps in the variables file. Which intern reduces or increases the package size based on your needs. By default it comes with 3 breakpoints, but for most of my projects I only use 2 and I don't use all the colors which brings the package size down to 9kb gzipped.

Add Bourbon?

Hey, what about https://www.bourbon.io?

I realize it's actually entirely a Sass library (it doesn't come with, or output, any CSS by default but provides Sass functions and mixins), but maybe it still qualifies.

Also in the Bourbon family: Neat (Sass-based grid), Bitters (Bourbon-based scaffolding with some default styles - since on its own Bourbon has no visual opinions).

Shoelace.style

I would want to "nominate" shoelace.style.
It has on github 8k stars, and has (IMO) a nice style.
AFAIK it's even partnered now with fontawesome.

Edit: I should mention it's a web component library (with custom elements), so I don't know if it counts on here. But there's a class-less category here as well, that would be the best spot I guess.

Add a section for libs that didn't make it

I noticed there are a ton of libraries that are not being added due to standard requirements not being fulfilled while this is a good practice to keep the list clean, It does hinder discovery of such libraries, some of them are even quite popular.
So I would suggest opening up another section same as stalled developement but for Not Standard Compliant or something like that.
No we cannot add every other css library to it so we'll have to choose an abritrary rule (such as no. of gh stars > 1k) for limiting the list.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.