A curated list of awesome frameworks, style guide and other cool nuggets for the amazing CSS.
CSS Working Group
Editor's drafts of CSS specifications
- w3c/csswg-drafts - Mirror of CSS WG Editor Draft repository
- w3c/css-houdini-drafts - Mirror of Houdini WG Etidor repository
- CSSTree - Detailed CSS parser with syntax validator
- Gonzales - Fast CSS parser
- Gonzales PE - CSS parser with support of preprocessors
- mensch - A decent CSS parser.
- ParserLib - CSSLint/parser-lib
- PostCSS - Transforming styles with JS plugins
- Rework - Plugin framework for CSS preprocessing in Node.js
- Stylecow - Modern CSS to all browsers
Build CSS faster
- LESS - Backwards compatible with CSS and the extra features it adds use existing CSS syntax.
- PostCSS - Transforming CSS with JS plugins.
- Sass - Mature, stable, and powerful professional grade CSS extension language.
- Stylus - Expressive, robust, feature-rich CSS language built for nodejs.
- 960 Grid System - An effort to streamline web development workflow.
- Blueprint - CSS framework who gives you an easy-to-use grid system, sensible typography, useful plugins and stylesheet for printing.
- 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.
- Material Design Lite - Great framework to make cool Material Design websites.
- Materialize - A modern responsive front-end framework based on Material Design.
- Pure.css - A set of small, responsive CSS modules that you can use in every web project.
- Scooter - SCSS framework built to provide base styles, CSS components, and rapid static prototyping for Dropbox.
- Semantic UI - Powerful framework that use friendly-human html.
- Skeleton - A dead simple, responsive boilerplate.
- UIkit - A lightweight and modular front-end framework.
- unsemantic - Fluid grid for mobile, tablet, and desktop.
- Tachyons - Functional css for humans.
- Basscss - a lightweight collection of base element styles and immutable utilities.
- Bourbon - simple and lightweight mixin library for Sass.
- Corpus - Yet another CSS toolkit.
- Susy - Responsive layout toolkit for Sass.
- RSCSS - Reasonable Standard for CSS Stylesheet Structure.
- ITCSS - A sane, scalable, managed CSS architecture for large UI projects.
Reset and Normalize
- Normalize - A set of CSS rules that provide better cross-browser consistency in the default styling of HTML elements.
- Normalize-OpenType - Adds OpenType features—ligatures, kerning, and more—to Normalize.css.
- MiniReset.css - A tiny modern CSS reset
- Reset - A set of CSS rules that resets the styling of all HTML elements to a consistent baseline.
- sanitize.css - 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
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 f***ing good. by Jacob Thornton.
- Refining The Way We Structure Our CSS At Trello by Bobby Grace.
Code Style Guideline
- idiomatic CSS by Nicolas Gallagher.
- CSS Styleguide 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.
- 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.
Here is also great resource to understand. Website style guide resource
Style Guide Generators
Naming conventions & Methodologies
- Atomic OOBEMITSCSS
- Point North
- Title CSS
- Atomic Design
- SUIT CSS
- Kickoff CSS
CSS in JS
Here is CSS in JS techniques comparison
- polyfill.js - A library to make creating CSS polyfills much easier.
- prefixfree - Break free from CSS prefix hell!
- fixed-sticky - A CSS position:sticky polyfill.
- PIE - A behavior for Internet Explorer allowing it to recognize and render various CSS3 box decoration properties.
Single Div Project - One
<div>. Many possibilities.
- Can I use - Browser support for CSS, HTML5 and other front-end web technologies.
- You Might Not Need JS - CSS alternatives for common JS UI components.
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.
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.
- 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.
- 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.
Component-Based Style Reuse
37:24- Pete Hunt @ CSS conf 2016
CSS4 Grid: True Layout Finally Arrives
29:27- Jen Kramer @ CSS conf 2016
Houdini: Demystifying the Future of CSS
36:58@ Google I/O 2016
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 .
- 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)
To the extent possible under law, Sota Yamashita has waived all copyright and related or neighboring rights to this work.