User Experience on mobile might not be great yet, but I'm working on it.

Your first time on this page? Allow me to give some explanations.

Awesome CSS

A curated contents of amazing CSS :)

Here you can see meta information about this topic like the time we last updated this page, the original creator of the awesome list and a link to the original GitHub repository.

Last Update: Nov. 24, 2020, 6:07 p.m.

Thank you awesome-css-group & contributors
View Topic on GitHub:
awesome-css-group/awesome-css

Search for resources by name or description.
Simply type in what you are looking for and the results will be filtered on the fly.

Further filter the resources on this page by type (repository/other resource), number of stars on GitHub and time of last commit in months.

Complementary Resources

Editor's Draft :black_nib:

CSS Working Group Editor Drafts

2.58K
406
4d
n/a

Mirror of https://hg.css-houdini.org/drafts

1.7K
141
40d
n/a

Parsers :mag:

CSS Object Model implemented in pure JavaScript. It's also a parser!

674
83
6m
MIT

A tool set for CSS including fast detailed parser, walker, generator and lexer based on W3C specs and browser implementations

1.04K
56
7d
MIT

CSS parser with support of preprocessors

289
60
8m
MIT

A decent CSS parser.

100
11
1y 17d
n/a

Collection of parsers written in JavaScript

273
83
1y 4m
n/a

Transforming styles with JS plugins

23.51K
1.28K
3d
MIT

Plugin framework for CSS preprocessing in Node.js

2.78K
137
5y 9m
n/a

Modern CSS to all browsers

142
5
9m
MIT

Preprocessors :pill:

Less. The dynamic stylesheet language.

16.45K
3.46K
119d
Apache-2.0

Transforming styles with JS plugins

23.51K
1.28K
3d
MIT

Sass makes CSS fun!

12.92K
1.94K
7d
n/a

light – weight css preprocessor

1.11K
63
8d
MIT

Expressive, robust, feature-rich CSS language built for NodeJs.

Frameworks :art:

A lite and flexible CSS framework (Inspired by Skeleton CSS)

3
0
98d
GPL-3.0

Modular and customizable Material Design UI components for the web

15.07K
2K
5d
MIT

Feature rich CSS framework for the new decade https://shorthandcss.com

228
12
8m
n/a

A new flexbox based CSS micro-framework.

71
5
1y 4m
MIT

A utility-first CSS framework for rapid UI development.

31.15K
1.44K
6d
MIT

Simple CSS library for semantic HTML markup.

A complete Utility First CSS Framework for less than 50kb.

The most popular HTML, CSS, and JS framework.

A modern CSS framework based on Flexbox. Also has Sass import for modification.

A Modern Lightweight Front End CSS framework for faster and easier web development.

A responsive, customizable micro-framework (3kb) with helpful utilities and a grid system.

A fully responsive and comprehensive CSS framework with beautiful controls and simplistic structure.

CSS framework which without using JavaScript is interactive and animated.

advanced responsive front-end framework.

A modest, grayish CSS library.

A responsive front-end framework with a built-in dark mode.

Powerful, scalable, Sass-based, BEM, OOCSS framework.

A modern responsive front-end framework based on Material Design.

A minimalist CSS framework.

An HTML-based language and design system that lets you create responsive and accessible high-quality web interfaces with any look.

A set of small, responsive CSS modules that you can use in every web project.

UI Kit with lots of themes and elements.

A lightweight, responsive and modern CSS framework.

Functional CSS for humans.

CSS framework for dummies with zero skills in graphic design.

A lightweight and modular front-end framework.

Fluid grid for mobile, tablet, and desktop.

A Minimal, Lightweight, Responsive framework.

Toolkits :wrench:

A simple and lightweight mixin library for Sass.

Responsive layout toolkit for Sass.

CSS Structure

Reasonable System for CSS Stylesheet Structure

3.76K
173
2y 11m
n/a

A sane, scalable, managed CSS architecture for large UI projects.

Reset and Normalize

A modern alternative to CSS resets

41.45K
9.17K
2y 21d
MIT

Adds OpenType features—ligatures, kerning, and more—to Normalize.css.

801
30
3y 86d
MIT

A tiny modern CSS reset

2.17K
406
80d
MIT

A best-practices CSS foundation

4.08K
278
85d
CC0-1.0

Unstyle CSS - Forget inconsistencies, let us start with a blank slate.

17
8
6m
MIT

CSS Development at Large-Scale Websites

Code Style Guidelines :book:

Principles of writing consistent, idiomatic CSS.

6.07K
621
5y 9m
n/a

Opinionated CSS styleguide for scalable applications

390
19
4y 7m
MIT

ThinkUp gives you insights into your social networking activity on Twitter, Facebook, Instagram, and beyond.

3.35K
722
3y 10m
GPL-3.0

Style Guide

Style Guide Generators :slot_machine:

A markdown based documentation system for style guides.

2.18K
208
2y 9m
n/a

Easily create and maintain style guides using CSS comments

672
26
4y 11d
n/a

[ON HOLD] Living Style Guides Engine and Maintenance Environment for Front-end Components. Core repository.

557
53
2y 4m
MIT
4
0
8y 9m
n/a

Automatically generate a style guide from your stylesheets.

1.07K
121
6y 8m
MIT

Markdown-based styleguide generator

679
64
5y 4m
n/a

Styleguide generator is a handy little tool that helps you generate good looking styleguides from stylesheets using KSS notation

1.27K
176
1y 47d
MIT

Naming conventions & Methodologies :bulb:

CSS in JS

Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

5.12K
210
1y 90d
n/a

A plugin for Babel v6 which transforms inline styles defined in JavaScript modules into class names so they become available to, e.g. the className prop of React elements. While transforming, the plugin processes all JavaScript style definitions found and bundles them up into a CSS file, ready to be requested from your web server.

303
10
3y 92d
MIT

React styling. Plain and simple.

22
2
3y 115d
MIT

Modular, scoped CSS with ES6

573
30
3y 9m
MIT

CSS Loader

3.89K
568
9d
MIT

JSS is an authoring tool for CSS which uses JavaScript as a host language.

6.04K
355
7d
MIT

styled component for react & style-loader/usable

34
5
5y 5m
MIT

Use CSS-in-JavaScript with themes for React without being tightly coupled to one implementation

1.62K
117
8m
MIT

Full CSS support for JSX without compromises

5.89K
263
11d
MIT

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

31.65K
1.93K
40d
MIT

CSS Polyfills

A library to make creating CSS polyfills much easier.

294
70
3y 11m
MIT

Break free from CSS prefix hell!

3.81K
747
71d
MIT

DEPRECATED: A position: sticky polyfill that works with filamentgroup/fixed-fixed for a safer position:fixed fallback.

1.49K
163
3y 5m
MIT

selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8.

1.74K
263
8y 1d
n/a

A behavior for Internet Explorer allowing it to recognize and render various CSS3 box decoration properties

2.83K
246
3y 110d
n/a

Miscellaneous

☝️One

. Many possibilities.

1.57K
112
2y 95d
MIT

Source code for Chrome/Edge/Firefox/Opera extension Magic CSS (Live editor for CSS, Less & Sass)

113
22
33d
MIT

A CSS bookmarklet that puts pink error boxes (with messages in comic sans) everywhere you write bad HTML.

658
54
5m
n/a

convert xpath to css selector

0
0
48d
MIT

Browser support for CSS, HTML5 and other front-end web technologies.

CSS alternatives for common JS UI components.

Podcasts :radio:

A live podcast with Chris Coyier and Dave Rupert about front-end web design, development, and UX.

A small batch series of interviews on style guides, hosted by Anna Debenham and Brad Frost.

Topics like web publishing, art direction, content strategy, typography, web technology, and more. It's everything web that matters.

Conversations with world experts on changing technologies and future of the web.

Seeking out the best, brightest, and smartest creative people on digital art, design, and development.

The tagline for the Changelog says it all: “Open Source moves fast. Keep up.” This podcast, and the accompanying blog, is all about keeping you updated with the latest in Open Source Technology.

A Tasty Treats Podcast for Web Developers.

Twitter :satellite:

Author of @Autoprefixer, http://easings.net and @PostCSS.

Web Designer. Professor at @multimedial_utn HTML5 & CSS Freak. Ocassional Translator.

Author of the @Codrops CSS Reference & Co-author of the Smashing Book #5.

CSS goblin & Sass hacker at @edenspiekermann.

Front-end dev, Teacher @GA_London, Screencaster at http://www.atozcss.com, property snob, Foodie.

Moderate consumer of rice. Also a UX designer, author, @smashingmag editor and programmer.

Advocate for users and open-source.

Designer, developer, writer. Occasionally blogs at http://Hop.ie, and currently building @cssanimation.

Latest commits to @CSSWG’s public Mercurial repository.

Author of @responsiblerwd, now on sale from @abookapart.

Web development writer, teacher, and speaker.

Web designer/developer specializing in CSS, RWD, UX, & accessibility.

Final year web technologies student. node.js, javascript, open source modules, client side optimisation, web performance.

Googler who noodles with code and design.

Software Engineer at @twitter.

Consultant Front-end Architect: @google, @Etsy, @kickstarter, @BBC, @Deloitte, @FT, more.

Engineer at Google • Open Source Advocate • Developer • Designer • Writer.

Research Assistant @MIT_CSAIL, @CSSWG IE, @OReillyMedia author, Ex @W3C staff.

aka Mary Lou @codrops ༶ CSS & HTML are my crayons ༶ Interested in Cognitive Science, AI, HCI, UI Design & Astrophysics ༶ Digital nomad.

Front-end @IBMDesign. Sassvocate, community builder, & handcrafter. STEMinist :) Open source all the things.

Designer @CodePen. Writer @Real_CSS_Tricks.

Engineer at Google working on Chrome, web components, and Polymer.

Lover of mountains, craft beers and discovering new food.

Web developer, author of CSS: The Missing Manual, JavaScript & jQuery.

Mozilla developer, CSS and W3C standards diplomat.

W3C CSS Working Group Co-chairman, entrepreneur, software engineer, geek, father of two, polyglot, duck lover. Nah. Tweets are strictly mine.

Loves love. Hates hate. Has a kick-ass family. Writes code. Leads stylesheet tech @LinkedIn.

Literally Jenn Schiffer's Mom.

Trans coder lady. Lead designer/developer of @SassCSS, working for @google on @dart_lang.

Web designer, speaker, writer, consultant, musician.

Freelance front-end vigilante, UI/UX developer.

GitHub and Bootstrap. Formerly at Twitter. Huge nerd.

UI designer, CSS doodler.

All about CSS sizing units.

Designer, Developer, Writer, Speaker. I make stuff on the web. I wrote SMACSS.

Web Developer, half of @grabaperch CMS, CSS Working Group Invited Expert.

Videos :tv:

A useful list of must-watch talks about CSS

3.89K
231
99d
CC0-1.0

2019

2016

2015

Books :books:

Better Solutions to Everyday Web Design Problems

Really Helpful in Advancing your Design Skills to a whole new Level

Solving responsive layout problems using algorithmic design.

Tutorials :clapper:

Interactive gamified tutorial for learning selection with CSS.

Simple tutorial to learn CSS Grid from Mozilla.

A curated collection of useful CSS snippets you can understand in 30 seconds or less.

Free video course by Wes Bos to learn flexbox.

Free video course by Wes Bos to learn CSS Grids.