Awesome CSS

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

Introduction

Motivation

This document is a curated list of frameworks, style guides, and cool nuggets of information for writing awesome CSS. It does not contain resources to learn CSS.

Complementary Resources

If you're struggling with something CSS-related, look for answers within the following resources:

• 🌎 CSS - MDN - Mozilla
• 🌎 Reddit (CSS)
• 🌎 StackOverflow (CSS)

Table of Contents

• CSS Working Group
  • Editor's Draft ✒️
• Parsers 🔍
• Preprocessors 💊
• Frameworks 🎨
• Toolkits 🔧
• Reset and Normalize
• CSS Development at Large-Scale Websites
• Code Style Guidelines 📖
• Style Guide
• Style Guide Generators 🎰
• Naming conventions & Methodologies 💡
• CSS in JS
• CSS Polyfills
• Miscellaneous
• Podcasts 📻
• Twitter 📡
• Videos 📺
  • 2019
  • 2016
  • 2015
• Books 📚
• Tutorials 🎬
• Maintainers
• Contribute

CSS Working Group

The CSS Working Group creates and defines CSS specifications. These specifications are assigned 🌎 maturity levels as they move through the design process. If you would like to learn more, visit 🌎 CSS Working Group Page.

Editor's Draft ✒️

Editor's drafts of CSS specifications

•   4542⭐    680🍴 W3c/csswg-drafts) - Mirror of CSS WG Editor Draft repository.
•   1838⭐    142🍴 W3c/css-houdini-drafts) - Mirror of Houdini WG Editor repository.

Parsers 🔍

•    754⭐     98🍴 CSSOM) - CSS Object Model implemented in pure JavaScript.
•   1916⭐     90🍴 CSSTree) - Detailed CSS parser with syntax validator.
•    330⭐     67🍴 Gonzales PE) - CSS parser with support for preprocessors.
•    114⭐     13🍴 Mensch) - A decent CSS parser.
•    288⭐     82🍴 ParserLib) - CSSLint/parser-lib.
•  28590⭐   1565🍴 PostCSS) - Transforming styles with JS plugins.
•   2757⭐    122🍴 Rework) - Plugin framework for CSS preprocessing in Node.js.
•    163⭐      6🍴 Stylecow) - Modern CSS for all browsers.

_{⇧ back to top}

Preprocessors 💊

Write CSS faster

•  17043⭐   3406🍴 LESS) - Backwards compatible with CSS, and the extra features it adds use existing CSS syntax.
•  28590⭐   1565🍴 PostCSS) - Transforming CSS with JS plugins.
•  15158⭐   2172🍴 Sass) - Mature, stable, and powerful professional-grade CSS extension language.
•   1739⭐     85🍴 STYLIS) - Light-weight CSS preprocessor.
• Stylus - Expressive, robust, feature-rich CSS language built for NodeJs.
• 🌎 Vanilla Extract - Generate static CSS using Typescript. Write type‑safe, locally scoped classes, variables and themes.

_{⇧ back to top}

Frameworks 🎨

• 🌎 AgnosticUI - Accessible CSS component primitives that also work with React, Vue 3, Svelte, and Angular.
• 🌎 Bonsai - A complete Utility First CSS Framework for less than 50kb.
• 🌎 Bootstrap - The most popular HTML, CSS, and JS framework.
• Bulma - A modern CSS framework based on Flexbox. Also has Sass import for modification.
• Butter Cake - A Modern Lightweight Front End CSS framework for faster and easier web development.
• 🌎 Charts.css - CSS data visualization framework.
• 🌎 Chota - A responsive, customizable micro-framework (3kb) with helpful utilities and a grid system.
• 🌎 Cirrus - A fully responsive and comprehensive CSS framework with beautiful controls and simplistic structure.
• Foundation - advanced responsive front-end framework.
• Gralig - A modest, grayish CSS library.
• 🌎 Halfmoon - A responsive front-end framework with a built-in dark mode.
•      3⭐      0🍴 Hasser CSS) - A lightweight (12k, not minified) but useful CSS framework with flexible Grid, Hero and more.
• Inuit.css - Powerful, scalable, Sass-based, BEM, OOCSS framework.
•  17144⭐   2140🍴 Material-components-web) - Modular and customizable Material Design UI components for the web.
• Materialize - A modern responsive front-end framework based on Material Design.
• Milligram - A minimalist CSS framework.
• 🌎 Numl - An HTML-based language and design system that lets you create responsive and accessible high-quality web interfaces with any look.
• 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.
•    256⭐     18🍴 Shorthand Framework) - Feature rich CSS framework for the new decade.
• 🌎 Spectre.css - A lightweight, responsive and modern CSS framework.
•     73⭐      5🍴 Strawberry) - A set of common flexbox utilities focused on making your life easier and faster with nested flexboxes.
• Tachyons - Functional CSS for humans.
• 🌎 Tacit - CSS framework for dummies with zero skills in graphic design.
•  84125⭐   4263🍴 Tailwindcss) - A utility-first CSS framework for rapid UI development.
• 🌎 Tronic247 Material - A responsive framework based on CSS and some JS while following Material Design guidelines.
• UIkit - A lightweight and modular front-end framework.
• Unsemantic - Fluid grid for mobile, tablet, and desktop.
• 🌎 Wing - A Minimal, Lightweight, Responsive framework.

  8130⭐    449🍴 You can find more frameworks at "awesome-css-frameworks")

_{⇧ back to top}

Toolkits 🔧

• Bourbon - A simple and lightweight mixin library for Sass.

_{⇧ back to top}

Reset and Normalize

•    579⭐     14🍴 CSS Checker) - Find and Reduce Similar & Duplicated CSS Scripts.
•   2788⭐    518🍴 MiniReset.css) - A tiny modern CSS reset.
•    793⭐     29🍴 Normalize-OpenType) - Adds OpenType features—ligatures, kerning, and more—to Normalize.css.
•  52648⭐  10643🍴 Normalize) - A set of CSS rules that provide better cross-browser consistency in the default styling of HTML elements.
• 🌎 Reset.css - CSS Tools: Reset CSS.
•   1224⭐     86🍴 Reseter.css) - A Futuristic CSS Reset/Normalizer. That Redifines Instead Of Preserving.
•      ?⭐      ?🍴 Sanitize.css) - A set of CSS rules that style with today’s best practices out-of-the-box.
•     29⭐      8🍴 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
• 🌎 CSS at BBC Sport by Shaun Bent
• 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
• Refining The Way We Structure Our CSS At Trello by 🌎 Bobby Grace
•   1540⭐     83🍴 Scalable-css-reading-list)

_{⇧ back to top}

Code Style Guidelines 📖

• Code Guide by 🌎 Mark Otto
• CSS Guidelines by 🌎 Harry Roberts
•    420⭐     15🍴 CSS Styleguide) by Guilherme Rv Coelho
•   1175⭐     83🍴 Dropbox (S)CSS Style Guide) by Dropbox
• 🌎 Google HTML/CSS Style Guide by Google
•   6654⭐    614🍴 Idiomatic CSS) by 🌎 Nicolas Gallagher
• 🌎 Official Trello CSS Guide by Bobby Grace
• 🌎 Sass Guidelines by 🌎 Kitty Giraudel
• SASS Style Guide by Sass team
•      ?⭐      ?🍴 ThinkUp CSS Style Guide) by ThinkUp
• 🌎 WordPress CSS Coding Standards by WorldPress

_{⇧ back to top}

Style Guide

• AUI by Atlassian Design
• Design Elements by lonely planet
•  18705⭐   2752🍴 Fluent UI) by Microsoft
• 🌎 GitHub CSS Style Guide by Github
• 🌎 Lighting Design System by Salesforce
• 🌎 Patterns by MailChimp
• Solid by BuzzFeed
• 🌎 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 🎰

•   2162⭐    200🍴 Hologram)
•    687⭐     23🍴 mdcss)
•    548⭐     49🍴 Source)
•      ?⭐      ?🍴 Styledoc)
•   1064⭐    119🍴 Styledocco)
•    667⭐     60🍴 Styledown)
•   1260⭐    167🍴 Sc5-styleguide)

_{⇧ back to top}

Naming conventions & Methodologies 💡

• Atomic Design
• 🌎 Atomic OOBEMITSCSS
• 🌎 BEM
• ITCSS
• Kickoff CSS
• MaintainableCSS
• 🌎 NCSS
• 🌎 OOCSS
• Point North
• 🌎 RSCSS
•   3806⭐    229🍴 SUIT CSS)
• 🌎 Title CSS

_{⇧ back to top}

CSS in JS

•   5352⭐    187🍴 Aphrodite)
•    298⭐     11🍴 Babel-plugin-css-in-js)
•     24⭐      2🍴 Classy)
•    575⭐     32🍴 Csjs)
•   4317⭐    605🍴 Css-loader)
•   7081⭐    399🍴 JSS)
•     39⭐      5🍴 React-styled)
•   1705⭐     96🍴 React-with-styles)
•   7735⭐    262🍴 Styled-jsx)
•  40581⭐   2502🍴 Styled-components)
•    181⭐      5🍴 Stylin)

Here is a   5524⭐    288🍴 CSS in JS techniques comparison)

_{⇧ back to top}

CSS Polyfills

•      ?⭐      ?🍴 Polyfill.js) - A library to make creating CSS polyfills much easier.
•   3816⭐    713🍴 Prefixfree) - Break free from CSS prefix hell.
•   1488⭐    152🍴 Fixed-sticky) - A CSS position:sticky polyfill.
•   1705⭐    246🍴 Selectivizr) - A JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8.
•   2781⭐    235🍴 PIE) - Allows Internet Explorer to recognize and render various CSS3 box decoration properties.

_{⇧ back to top}

Miscellaneous

• 🌎 Beautiful CSS box-shadow examples - Curated collection of 93 beautiful CSS box-shadow. Click to copy.
• 🌎 Can I use - Browser support for CSS, HTML5 and other front-end web technologies.
• 🌎 Flexbox Patterns by cjcenizal
• 🌎 Glassmorphism CSS Generator - Generate CSS for glassmorphism.
• 🌎 GradientArt - An advanced CSS gradient editor with layering, design tools and free cloud storage.
•    279⭐     60🍴 Live editor for CSS and LESS) - Magic CSS extension for Chrome, Firefox and Edge.
•    842⭐     57🍴 RevengeCSS) - A CSS bookmarklet that uses selectors to find bad markup, displaying ugly pink error messages in comic sans serif wherever you write bad HTML
•   1593⭐    105🍴 Single Div Project) - One <div>. Many possibilities.
• You Might Not Need JS - CSS alternatives for common JS UI components.
•     12⭐      1🍴 Xpath-to-selector) - Convert xpath to css selector.

_{⇧ back to top}

Podcasts 📻

Something to listen to while programming.

• 🌎 CSS Podcast - Una Kravets and Adam Argyle,and development.
• Non Breaking Space Show - Seeking out the best,and smartest creative people on digital art,and the accompanying blog,and UX.
• Shop Talk Show - A live podcast with Chris Coyier and Dave Rupert about front-end web design,hosted by Anna Debenham and Brad Frost.
• Style Guide Podcast - A small batch series of interviews on style guides,art direction,brightest,content strategy,design,Developer Advocates from Google,development,gleefully breakdown complex aspects of CSS into digestible episodes covering everything from accessibility to z-index.
• 🌎 Syntax - A Tasty Treats Podcast for Web Developers.,typography,web technology
• The Big Web Show - Topics like web publishing,is all about keeping you updated with the latest in Open Source Technology.
• 🌎 The Changelog - The tagline for the Changelog says it all: “Open Source moves fast. Keep up.” This podcast,and more. It's everything web that matters.
• The Web Ahead - Conversations with world experts on changing technologies and future of the web.

_{⇧ back to top}

Twitter 📡

Active accounts to follow.

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

_{⇧ back to top}

Videos 📺

Good study videos from CSS Must Watch Videos. Some items are quoted from   4751⭐    246🍴 AllThingsSmitty/must-watch-css). 🌎 I told him on Twitter. I appreciate his valuable efforts.

2019

1. 🌎 Next-Generation Web Styling - Una Kravets & Adam Argyle @ Chrome Dev Summit 2019.

2016

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

2015

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

_{⇧ back to top}

Books 📚

• CSS: The Definitive Guide, 4th Edition - Visual Presentation for the Web
• CSS: The Missing Manual – Really Helpful in Advancing your Design Skills to a whole new Level
• CSS Secrets – Better Solutions to Everyday Web Design Problems
• 🌎 Every Layout: Relearn CSS Layout – Solving responsive layout problems using algorithmic design.
• 🌎 Tiny CSS Projects – Improve the way you write CSS as you build 12 tiny projects.

_{⇧ back to top}

Tutorials 🎬

• 🌎 30 Seconds of CSS - A curated collection of useful CSS snippets you can understand in 30 seconds or less.
• 🌎 All selectors in CSS - All selectors in CSS.
• 🌎 Community Curated CSS Resources - Top Recommended Resources.
• 🌎 CSS Diner – Interactive gamified tutorial for learning selection with CSS.
• 🌎 CSS Grid PlayGround - Simple tutorial to learn CSS Grid from Mozilla.
• 🌎 CSS Grids videos tutorial - Free video course by Wes Bos to learn CSS Grids.
• 🌎 CSS Hands-on Tutorial - Free CSS hands-on tutorial by LabEx.
• 🌎 CSS Math Functions - Using CSS Math for responsive design.
• 🌎 Flexbox video tutorial - Free video course by Wes Bos to learn flexbox.
• 🌎 Organize CSS with a Modular Architecture: OOCSS, BEM, SMACSS - In-depth intro to OOCSS, BEM, SMACSS, with examples.
• 🌎 Work With Animations - Inspecting animations.

_{⇧ back to top}

Maintainers

@sotayamashita, @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.

Source

  5109⭐    423🍴 awesome-css-group/awesome-css)