List.community

sotayamashita/awesome-css

Submit a resource Curators

Awesome CSS {

/* A curated list of awesome frameworks, style guide and other cool nuggets for the amazing CSS. */

Introduction

Motivation

This document is a curated list of awesome framework, style guide and other cool nuggets for the amazing CSS. It does not help everyone understand what CSS is not only find great cool stuffs.

Complementary Resources

When you struggle to understand a notion, I suggest you look for answers on the following resources:

CSS Working Group

The CSS Working Group defines CSS specifications which move through the their process as they achieve various maturity levels. If you would like to learn more, visit CSS Working Group Page.

Editor's Draft ✒️

Editor's drafts of CSS specifications

w3c/csswg-drafts863 190 - Mirror of CSS WG Editor Draft repository.
w3c/css-houdini-drafts932 77 - Mirror of Houdini WG Etidor repository.

Parser 🔍

CSSOM540 73 - CSS Object Model implemented in pure JavaScript.
CSSTree319 32 - Detailed CSS parser with syntax validator.
Gonzales75 12 - Fast CSS parser.
Gonzales PE209 61 - CSS parser with support of preprocessors.
mensch86 8 - A decent CSS parser.
ParserLib266 98 - CSSLint/parser-lib.
PostCSS19k 1k - Transforming styles with JS plugins.
Rework2k 90 - Plugin framework for CSS preprocessing in Node.js.
Stylecow126 8 - Modern CSS to all browsers.

_{⇧ back to top}

Preprocessors 💊

Build CSS faster

LESS17k 4k - Backwards compatible with CSS and the extra features it adds use existing CSS syntax.
PostCSS19k 1k - Transforming CSS with JS plugins.
Sass12k 2k - Mature, stable, and powerful professional grade CSS extension language.
Stylus - Expressive, robust, feature-rich CSS language built for nodejs.

Find more CSS preprocessors on wiki

_{⇧ back to top}

Frameworks 🎨

Bootstrap - The most popular HTML, CSS, and JS framework.
Bulma - A modern CSS framework based on Flexbox.
inuit.css - Powerful, scalable, Sass-based, BEM, OOCSS framework.
Foundation - advanced responsive front-end framework.
Materialize - A modern responsive front-end framework based on Material Design.
material-components-web8k 1k - Modular and customizable Material Design UI components for the web.
Milligram - A minimalist CSS framework.
Pure.css - A set of small, responsive CSS modules that you can use in every web project.
Semantic UI - Powerful framework that uses human-friendly HTML.
Spectre.css - A lightweight, responsive and modern CSS framework.
Wing - A Minimal, Lightweight, Responsive framework.
UIkit - A lightweight and modular front-end framework.
unsemantic - Fluid grid for mobile, tablet, and desktop.
Tachyons - Functional CSS for humans.
Tacit - Tacit is a CSS framework for dummies with zero skills of graphic design.

You can find more frameworks at "awesome-css-frameworks"

_{⇧ back to top}

Toolkits 🔧

Basscss - A lightweight collection of base element styles and immutable utilities.
Bourbon - A simple and lightweight mixin library for Sass.
Corpus - Yet another CSS toolkit.
Susy - Responsive layout toolkit for Sass.

_{⇧ back to top}

CSS Structure

RSCSS4k 169 - Reasonable Standard for CSS Stylesheet Structure.
ITCSS - A sane, scalable, managed CSS architecture for large UI projects.

_{⇧ back to top}

Reset and Normalize

Normalize28k 7k - A set of CSS rules that provide better cross-browser consistency in the default styling of HTML elements.
Normalize-OpenType822 46 - Adds OpenType features—ligatures, kerning, and more—to Normalize.css.
MiniReset.css773 82 - A tiny modern CSS reset.
Reset - A set of CSS rules that resets the styling of all HTML elements to a consistent baseline.
sanitize.css2k 141 - A set of CSS rules that style with today’s best practices out-of-the-box.
unstyle.css - Specialised stylesheet for removing user agent styles, style the web with your baseline.

_{⇧ back to top}

CSS Development at Large-Scale Websites

Bugsnag's CSS Architecture by Max Luster.
CodePen's CSS by Chris Coyier.
CSS at BBC Sport by Shaun Bent
CSS at Groupon by Mike Aparicio.
CSS AT HOOTSUITE by Steve Mynett.
GitHub's CSS by Mark Otto.
How we do CSS at Ghost by Paul Davis.
Lonely Planet by Ian Feather.
Medium’s CSS is actually pretty good. by Jacob Thornton.
scalable-css-reading-list693 36
Refining The Way We Structure Our CSS At Trello by Bobby Grace.

_{⇧ back to top}

Code Style Guidelines 📖

idiomatic CSS4k 444 by Nicolas Gallagher.
CSS Styleguide378 25 by Guilherme Rv Coelho.
CSS Guidelines by Harry Roberts.
Sass Guidelines by Hugo Giraudel.
Code Guide by Mark Otto.
ThinkUp CSS Style Guide by ThinkUp.
Google HTML/CSS Style Guide by Google.
WordPress CSS Coding Standards by WorldPress.

_{⇧ back to top}

Style Guide

AUI by Atlassian Design.
Design Elements by lonely planet.
Dropbox (S)CSS Style Guide by Dropbox.
Fabric by Microsoft.
GitHub CSS Style Guide by Github.
Official Trello CSS Guide by Bobby Grace.
Solid by BuzzFeed.
Patterns by MailChimp.
Lighting Design System by Salesforce.
Walmart Web Style Guide by Walmartlabs.
SASS Style Guide by Sass team.
Style Guide by Starbucks.
Website Style Guide Resources by Awesome people.

View more style guides at Website Style Guide Resources.

_{⇧ back to top}

Style Guide Generators 🎰

Hologram2k 249
mdcss697 33
Source
styledoc3 0
styledocco968 114
styledown636 62
sc5-styleguide2k 415

_{⇧ back to top}

Naming conventions & Methodologies 💡

_{⇧ back to top}

CSS in JS

Here is a CSS in JS techniques comparison2k 121

_{⇧ back to top}

CSS Polyfills

polyfill.js275 51 - A library to make creating CSS polyfills much easier.
prefixfree4k 819 - Break free from CSS prefix hell.
fixed-sticky1k 171 - A CSS position:sticky polyfill.
selectivizr1k 248 - selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8.
PIE3k 208 - A behavior for Internet Explorer allowing it to recognize and render various CSS3 box decoration properties.

_{⇧ back to top}

Miscellaneous

Single Div Project1k 137 - One . Many possibilities.
Can I use - Browser support for CSS, HTML5 and other front-end web technologies.
Live editor for CSS and LESS15 6 - Magic CSS extension for Chrome, Firefox and Edge.
You Might Not Need JS - CSS alternatives for common JS UI components.

_{⇧ back to top}

Podcasts 📻

Something to listen to while programming.

Shop Talk Show - A live podcast with Chris Coyier and Dave Rupert about front end web design, development, and UX.
Style Guide Podcast - A small batch series of interviews on Style Guides, hosted by Anna Debenham and Brad Frost.
The Big Web Show - Topics like web publishing, art direction, content strategy, typography, web technology, and more. It's everything web that matters.
The Web Ahead - Conversations with world experts on changing technologies and future of the web.
Non Breaking Space Show - Seeking out the best, brightest, and smartest creative people on digital art, design, and development.
The Changelog - 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.
Syntax - A Tasty Treats Podcast for Web Developers.

_{⇧ back to top}

Twitter 📡

Active accounts to follow.

CSS Animation
Andrey Sitnik - Author of @Autoprefixer, http://easings.net and @PostCSS.
Evangelina Ferreira - Web Designer. Professor at @multimedial_utn HTML5 & CSS Freak. Ocassional Translator.
Sara Soueidan - Author of the @Codrops CSS Reference & Co-author of the Smashing Book #5.
Hugo Giraudel - CSS goblin & Sass hacker at @edenspiekermann.
Guy Routledge - Front-end dev, Teacher @GA_London, Screencaster at http://www.atozcss.com, property snob, Foodie.
Heydon Pickering - Moderate consumer of rice. Also a UX designer, author, @smashingmag editor and programmer.
Adam Morse - Advocate for users and open-source.
Donovan Hutchinson - Designer, developer, writer. Occasionally blogs at http://Hop.ie, and currently building @cssanimation.
CSS Commits - Latest commits to @CSSWG’s public Mercurial repository.
Scott Jehl - Author of @responsiblerwd, now on sale from @abookapart.
Dudley Storey - Web development writer, teacher, and speaker.
Zoe M. Gillenwater - Web designer/developer specializing in CSS, RWD, UX, & accessibility.
Ben Briggs - Final year web technologies student. node.js, javascript, open source modules, client side optimisation, web performance.
Paul Lewis - Googler who noodles with code and design.
Thierry Koblentz - CSSer @ Yahoo Only Tweeting Tech.
Nicolas Gallagher - Software Engineer at @twitter.
Harry Roberts- Consultant Front-end Architect: @google, @Etsy, @kickstarter, @BBC, @Deloitte, @FT, more.
Phil Walton - Engineer at Google • Open Source Advocate • Developer • Designer • Writer.
Lea Verou - Research Assistant @MIT_CSAIL, @CSSWG IE, @OReillyMedia author, Ex @W3C staff.
Manoela Ilic - ...aka Mary Lou @codrops ༶ CSS & HTML are my crayons ༶ Interested in Cognitive Science, AI, HCI, UI Design & Astrophysics ༶ Digital nomad.
Una Kravets - Front-end @IBMDesign. Sassvocate, community builder, & handcrafter. STEMinist :) Open source all the things.
Chris Coyier - Designer @CodePen. Writer @Real_CSS_Tricks.
Nicole Sullivan - GEEK.
Eric Bidelman - Engineer at Google working on Chrome, web components, and Polymer.
Patrick Hamann - Lover of mountains, craft beers and discovering new food.
Dave McFarland - Web developer, author of CSS: The Missing Manual, JavaScript & jQuery.
L. David Baron - Mozilla developer, CSS and W3C standards diplomat.
Daniel GlazmanW3C CSS Working Group Co-chairman, entrepreneur, software engineer, geek, father of two, polyglot, duck lover. Nah. Tweets are strictly mine.
The Chris Eppstein - Loves love. Hates hate. Has a kick-ass family. Writes code. Leads stylesheet tech @LinkedIn.
앗킨스 탭 - Literally Jenn Schiffer's Mom.
Natalie Weizenbaum - Trans coder lady. Lead designer/developer of @SassCSS, working for @google on @dart_lang.
Brad Frost - Web designer, speaker, writer, consultant, musician.
Maxime Thirouin - Freelance front-end vigilante, UI/UX developer.
Mark Otto - GitHub and Bootstrap. Formerly at Twitter. Huge nerd.
Simon - UI designer, CSS doodler.
Connor Sears - Designer at GitHub.
Remy Sharp - All about CSS sizing units.
Jonathan Snook - Designer, Developer, Writer, Speaker. I make stuff on the web. I wrote SMACSS.
Rachel Andrew - Web Developer, half of @grabaperch CMS, CSS Working Group Invited Expert.

_{⇧ back to top}

Videos 📺

A good study videos for CSS Must Watch Videos. Some items are quoted from AllThingsSmitty/must-watch-css1k 102 . I told him on Twitter. I appreciate his valuable efforts.

2016

Component-Based Style Reuse 📄 transcript ⌚️ 37:24 - Pete Hunt @ CSS conf 2016.
CSS4 Grid: True Layout Finally Arrives 📄 transcript ⌚️ 29:27 - Jen Kramer @ CSS conf 2016.
Houdini: Demystifying the Future of CSS ⌚️ 36:58 @ Google I/O 2016.

2015

mdo-ular CSS ⌚️ 30:06 - Mark Otto @ jQuery UK.
CSS Architecture with SMACSS ⌚️ 30:15 - Caleb Meredith @ DevTips channel.
CSS Workflow from the Ground Up ⌚️ 46:06 - Jonathan Snook @ Generate conf 2015.

View more about videos in wiki

_{⇧ back to top}

Books 📚

CSS Secrets – Better Solutions to Everyday Web Design Problems
CSS: The Missing Manual – Really Helpful in Advancing your Design Skills to a whole new Level

_{⇧ back to top}

Tutorials 🎬

CSS Diner – Interactive gamified tutorial for learning selection with CSS.
CSS 101 – Detailed interactive tutorial with a lot of additional information (e.g. spec excerpts).
CSS Grid PlayGround - Simple tutorial to learn CSS Grid from Mozilla.
Work With Animations - Inspecting animations.

_{⇧ back to top}

Maintainers

@sotayamashita, @troxler, @Rishabh04-02 and You!

Contribute

Feel free to dive in! Open an issue or submit PRs.

Awesome CSS follows the Contributor Covenant Code of Conduct.

}