{"id":27720414,"url":"https://github.com/correia-jpv/fucking-awesome-css","last_synced_at":"2025-04-27T09:56:55.039Z","repository":{"id":37625880,"uuid":"454376845","full_name":"Correia-jpv/fucking-awesome-css","owner":"Correia-jpv","description":"🎨 A curated contents of amazing CSS :) With repository stars⭐ and forks🍴","archived":false,"fork":false,"pushed_at":"2025-04-14T03:07:15.000Z","size":344,"stargazers_count":9,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-27T09:56:48.978Z","etag":null,"topics":["awesome","awesome-list","css","css-flexbox","css-grid","css3","list","web","webapp","webdev","webdevelopment","website"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc-by-sa-4.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Correia-jpv.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"Correia-jpv"}},"created_at":"2022-02-01T12:21:54.000Z","updated_at":"2025-04-14T03:07:16.000Z","dependencies_parsed_at":"2023-02-18T13:15:28.340Z","dependency_job_id":"704fb4f1-d43a-4f4e-bbaf-fe955334ec26","html_url":"https://github.com/Correia-jpv/fucking-awesome-css","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Correia-jpv%2Ffucking-awesome-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Correia-jpv%2Ffucking-awesome-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Correia-jpv%2Ffucking-awesome-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Correia-jpv%2Ffucking-awesome-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Correia-jpv","download_url":"https://codeload.github.com/Correia-jpv/fucking-awesome-css/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251119577,"owners_count":21539194,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["awesome","awesome-list","css","css-flexbox","css-grid","css3","list","web","webapp","webdev","webdevelopment","website"],"created_at":"2025-04-27T09:56:54.438Z","updated_at":"2025-04-27T09:56:55.003Z","avatar_url":"https://github.com/Correia-jpv.png","language":null,"funding_links":["https://github.com/sponsors/Correia-jpv"],"categories":["Other Lists"],"sub_categories":["TeX Lists"],"readme":"[awesome-link]:  https://github.com/sindresorhus/awesome\n[awesome-badge]: https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg\n[travis-link]:   https://travis-ci.org/awesome-css-group/awesome-css\n[travis-badge]:  https://travis-ci.org/awesome-css-group/awesome-css.svg?branch=master\n\n# Awesome CSS [![Awesome][awesome-badge]][awesome-link] [![Travis Build Status][travis-badge]][travis-link] \n\n\u003e /* A curated list of awesome frameworks, style guides, and other cool nuggets for writing amazing CSS. */\n\n## Introduction\n\n### Motivation\n\nThis 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.\n\n### Complementary Resources\n\nIf you're struggling with something CSS-related, look for answers within the following resources:\n\n- 🌎 [CSS - MDN - Mozilla](developer.mozilla.org/en-US/docs/Web/CSS)\n- 🌎 [Reddit (CSS)](www.reddit.com/r/css/)\n- 🌎 [StackOverflow (CSS)](stackoverflow.com/questions/tagged/css)\n\n\u003c!-- Used for the \"back to top\" links within the document --\u003e\n\u003cdiv id=\"contents\"\u003e\u003c/div\u003e\n\n## Table of Contents\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n\n- [CSS Working Group](#css-working-group)\n  - [Editor's Draft :black_nib:](#editors-draft-black_nib)\n- [Parsers :mag:](#parsers-mag)\n- [Preprocessors :pill:](#preprocessors-pill)\n- [Frameworks :art:](#frameworks-art)\n- [Toolkits :wrench:](#toolkits-wrench)\n- [Reset and Normalize](#reset-and-normalize)\n- [CSS Development at Large-Scale Websites](#css-development-at-large-scale-websites)\n- [Code Style Guidelines :book:](#code-style-guidelines-book)\n- [Style Guide](#style-guide)\n- [Style Guide Generators :slot_machine:](#style-guide-generators-slot_machine)\n- [Naming conventions \u0026 Methodologies :bulb:](#naming-conventions--methodologies-bulb)\n- [CSS in JS](#css-in-js)\n- [CSS Polyfills](#css-polyfills)\n- [Miscellaneous](#miscellaneous)\n- [Podcasts :radio:](#podcasts-radio)\n- [Twitter :satellite:](#twitter-satellite)\n- [Videos :tv:](#videos-tv)\n  - [2019](#2019)\n  - [2016](#2016)\n  - [2015](#2015)\n- [Books :books:](#books-books)\n- [Tutorials :clapper:](#tutorials-clapper)\n- [Maintainers](#maintainers)\n- [Contribute](#contribute)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## CSS Working Group\n\nThe CSS Working Group creates and defines CSS specifications. These specifications are assigned 🌎 [maturity levels](www.w3.org/2005/10/Process-20051014/tr#maturity-levels) as they move through the design process. If you would like to learn more, visit 🌎 [CSS Working Group Page](www.w3.org/Style/CSS/).\n\n### Editor's Draft :black_nib:\n\n*Editor's drafts of CSS specifications*\n\n- \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;4627⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;707🍴\u003c/code\u003e\u003c/b\u003e [W3c/csswg-drafts](https://github.com/w3c/csswg-drafts)) - Mirror of CSS WG Editor Draft repository.\n- \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;1841⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;143🍴\u003c/code\u003e\u003c/b\u003e [W3c/css-houdini-drafts](https://github.com/w3c/css-houdini-drafts)) - Mirror of Houdini WG Editor repository.\n\n## Parsers :mag:\n\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;751⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;99🍴\u003c/code\u003e\u003c/b\u003e [CSSOM](https://github.com/NV/CSSOM)) - CSS Object Model implemented in pure JavaScript.\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;1981⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;95🍴\u003c/code\u003e\u003c/b\u003e [CSSTree](https://github.com/csstree/csstree)) - Detailed CSS parser with syntax validator.\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;328⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;67🍴\u003c/code\u003e\u003c/b\u003e [Gonzales PE](https://github.com/tonyganch/gonzales-pe)) - CSS parser with support for preprocessors.\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;115⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;13🍴\u003c/code\u003e\u003c/b\u003e [Mensch](https://github.com/brettstimmerman/mensch)) - A decent CSS parser.\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;291⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;82🍴\u003c/code\u003e\u003c/b\u003e [ParserLib](https://github.com/CSSLint/parser-lib)) - CSSLint/parser-lib.\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;28735⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;1578🍴\u003c/code\u003e\u003c/b\u003e [PostCSS](https://github.com/postcss/postcss)) - Transforming styles with JS plugins.\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;2755⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;122🍴\u003c/code\u003e\u003c/b\u003e [Rework](https://github.com/reworkcss/rework)) - Plugin framework for CSS preprocessing in Node.js.\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;163⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;6🍴\u003c/code\u003e\u003c/b\u003e [Stylecow](https://github.com/stylecow/stylecow)) - Modern CSS for all browsers.\n\n\u003csub\u003e[⇧ back to top](#contents)\u003c/sub\u003e\n\n## Preprocessors :pill:\n\n*Write CSS faster*\n\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;17045⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;3407🍴\u003c/code\u003e\u003c/b\u003e [LESS](https://github.com/less/less.js)) - Backwards compatible with CSS, and the extra features it adds use existing CSS syntax.\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;28735⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;1578🍴\u003c/code\u003e\u003c/b\u003e [PostCSS](https://github.com/postcss/postcss)) - Transforming CSS with JS plugins.\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;15246⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;2194🍴\u003c/code\u003e\u003c/b\u003e [Sass](https://github.com/sass/sass)) - Mature, stable, and powerful professional-grade CSS extension language.\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;1747⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;86🍴\u003c/code\u003e\u003c/b\u003e [STYLIS](https://github.com/thysultan/stylis.js)) - Light-weight CSS preprocessor.\n* [Stylus](http://learnboost.github.io/stylus/) - Expressive, robust, feature-rich CSS language built for NodeJs.\n* 🌎 [Vanilla Extract](vanilla-extract.style/) - Generate static CSS using Typescript. Write type‑safe, locally scoped classes, variables and themes.\n\n\u003csub\u003e[⇧ back to top](#contents)\u003c/sub\u003e\n\n## Frameworks :art:\n\n* 🌎 [AgnosticUI](www.agnosticui.com/) - Accessible CSS component primitives that also work with React, Vue 3, Svelte, and Angular.\n* 🌎 [Bonsai](www.bonsaicss.com/) - A complete Utility First CSS Framework for less than 50kb.\n* 🌎 [Bootstrap](getbootstrap.com/) - The most popular HTML, CSS, and JS framework.\n* [Bulma](http://bulma.io/) - A modern CSS framework based on Flexbox. Also has Sass import for modification.\n* [Butter Cake](http://getbuttercake.com/) - A Modern Lightweight Front End CSS framework for faster and easier web development.\n* 🌎 [Charts.css](chartscss.org/) - CSS data visualization framework.\n* 🌎 [Chota](jenil.github.io/chota/) - A responsive, customizable micro-framework (3kb) with helpful utilities and a grid system.\n* 🌎 [Cirrus](spiderpig86.github.io/Cirrus/) - A fully responsive and comprehensive CSS framework with beautiful controls and simplistic structure.\n* [Foundation](http://foundation.zurb.com/) - advanced responsive front-end framework.\n* [Gralig](http://gralig.com/) - A modest, grayish CSS library.\n* 🌎 [Halfmoon](www.gethalfmoon.com/) - A responsive front-end framework with a built-in dark mode.\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;3⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;0🍴\u003c/code\u003e\u003c/b\u003e [Hasser CSS](https://github.com/HeavenMercy/HasserCSS)) - A lightweight (12k, not minified) but useful CSS framework with flexible Grid, Hero and more.\n* [Inuit.css](http://inuitcss.com/) - Powerful, scalable, Sass-based, BEM, OOCSS framework.\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;17146⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;2145🍴\u003c/code\u003e\u003c/b\u003e [Material-components-web](https://github.com/material-components/material-components-web)) - Modular and customizable Material Design UI components for the web.\n* [Materialize](http://materializecss.com/) - A modern responsive front-end framework based on Material Design.\n* [Milligram](http://milligram.io) - A minimalist CSS framework.\n* 🌎 [Numl](numl.design) - An HTML-based language and design system that lets you create responsive and accessible high-quality web interfaces with any look.\n* [Pure.css](http://purecss.io/) - A set of small, responsive CSS modules that you can use in every web project.\n* [Semantic UI](http://semantic-ui.com/) - Powerful framework that uses human-friendly HTML.\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;256⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;18🍴\u003c/code\u003e\u003c/b\u003e [Shorthand Framework](https://github.com/shorthandcss/shorthand)) - Feature rich CSS framework for the new decade.\n* 🌎 [Spectre.css](picturepan2.github.io/spectre/index.html) - A lightweight, responsive and modern CSS framework.\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;74⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;5🍴\u003c/code\u003e\u003c/b\u003e [Strawberry](https://github.com/jfet97/strawberry)) - A set of common flexbox utilities focused on making your life easier and faster with nested flexboxes.\n* [Tachyons](http://tachyons.io/) - Functional CSS for humans.\n* 🌎 [Tacit](yegor256.github.io/tacit/) - CSS framework for dummies with zero skills in graphic design.\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;87109⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;4487🍴\u003c/code\u003e\u003c/b\u003e [Tailwindcss](https://github.com/tailwindcss/tailwindcss)) - A utility-first CSS framework for rapid UI development.\n* 🌎 [Tronic247 Material](material.pages.dev/) - A responsive framework based on CSS and some JS while following Material Design guidelines.\n* [UIkit](http://getuikit.com/) - A lightweight and modular front-end framework.\n* [Unsemantic](http://unsemantic.com/) - Fluid grid for mobile, tablet, and desktop.\n* 🌎 [Wing](kbrsh.github.io/wing/) - A Minimal, Lightweight, Responsive framework.\n\n_\u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;8518⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;468🍴\u003c/code\u003e\u003c/b\u003e [You can find more frameworks at \"awesome-css-frameworks\"](https://github.com/troxler/awesome-css-frameworks))_\n\n\u003csub\u003e[⇧ back to top](#contents)\u003c/sub\u003e\n\n## Toolkits :wrench:\n\n* [Bourbon](http://bourbon.io/) - A simple and lightweight mixin library for Sass.\n\n\u003csub\u003e[⇧ back to top](#contents)\u003c/sub\u003e\n\n## Reset and Normalize\n\n- \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;582⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;13🍴\u003c/code\u003e\u003c/b\u003e [CSS Checker](https://github.com/ruilisi/css-checker)) - Find and Reduce Similar \u0026 Duplicated CSS Scripts.\n- \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;2794⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;516🍴\u003c/code\u003e\u003c/b\u003e [MiniReset.css](https://github.com/jgthms/minireset.css)) - A tiny modern CSS reset.\n- \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;791⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;28🍴\u003c/code\u003e\u003c/b\u003e [Normalize-OpenType](https://github.com/kennethormandy/normalize-opentype.css)) - Adds OpenType features—ligatures, kerning, and more—to Normalize.css.\n- \u003cb\u003e\u003ccode\u003e\u0026nbsp;53016⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;10594🍴\u003c/code\u003e\u003c/b\u003e [Normalize](https://github.com/necolas/normalize.css)) - A set of CSS rules that provide better cross-browser consistency in the default styling of HTML elements.\n- 🌎 [Reset.css](meyerweb.com/eric/tools/css/reset/) - CSS Tools: Reset CSS.\n- \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;1224⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;89🍴\u003c/code\u003e\u003c/b\u003e [Reseter.css](https://github.com/krishdevdb/reseter.css)) - A Futuristic CSS Reset/Normalizer. That Redifines Instead Of Preserving.\n- \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;?⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;?🍴\u003c/code\u003e\u003c/b\u003e [Sanitize.css](https://github.com/jonathantneal/sanitize.css/)) - A set of CSS rules that style with today’s best practices out-of-the-box.\n- \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;30⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;8🍴\u003c/code\u003e\u003c/b\u003e [Unstyle.css](https://github.com/Martin-Pitt/css-unstyle)) - Specialised stylesheet for removing user agent styles, style the web with your baseline.\n\n\u003csub\u003e[⇧ back to top](#contents)\u003c/sub\u003e\n\n## CSS Development at Large-Scale Websites\n\n* [Bugsnag's CSS Architecture](http://blog.bugsnag.com/bugsnags-css-architecture) by 🌎 [Max Luster](twitter.com/maxluster)\n* 🌎 [CSS at BBC Sport](medium.com/@shaunbent/css-at-bbc-sport-part-1-bab546184e66) by Shaun Bent\n* [CSS AT HOOTSUITE](http://code.hootsuite.com/css-at-hootsuite/) by Steve Mynett\n* [GitHub's CSS](http://markdotto.com/2014/07/23/githubs-css/) by 🌎 [Mark Otto](twitter.com/mdo)\n* 🌎 [How we do CSS at Ghost](dev.ghost.org/css-at-ghost/) by Paul Davis\n* [Lonely Planet](http://ianfeather.co.uk/css-at-lonely-planet/) by 🌎 [Ian Feather](twitter.com/ianfeather)\n* 🌎 [Medium’s CSS is actually pretty good.](medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06) by 🌎 [Jacob Thornton](twitter.com/fat)\n* [Refining The Way We Structure Our CSS At Trello](http://blog.trello.com/refining-the-way-we-structure-our-css-at-trello/) by 🌎 [Bobby Grace](twitter.com/bobbygrace)\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;1545⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;81🍴\u003c/code\u003e\u003c/b\u003e [Scalable-css-reading-list](https://github.com/davidtheclark/scalable-css-reading-list))\n\n\u003csub\u003e[⇧ back to top](#contents)\u003c/sub\u003e\n\n## Code Style Guidelines :book:\n\n* [Code Guide](http://codeguide.co/) by 🌎 [Mark Otto](twitter.com/mdo)\n* [CSS Guidelines](http://cssguidelin.es/) by 🌎 [Harry Roberts](twitter.com/csswizardry)\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;419⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;15🍴\u003c/code\u003e\u003c/b\u003e [CSS Styleguide](https://github.com/grvcoelho/css)) by [Guilherme Rv Coelho](https://github.com/grvcoelho)\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;1208⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;86🍴\u003c/code\u003e\u003c/b\u003e [Dropbox (S)CSS Style Guide](https://github.com/dropbox/css-style-guide)) by Dropbox\n* 🌎 [Google HTML/CSS Style Guide](google.github.io/styleguide/htmlcssguide.html) by Google\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;6649⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;614🍴\u003c/code\u003e\u003c/b\u003e [Idiomatic CSS](https://github.com/necolas/idiomatic-css)) by 🌎 [Nicolas Gallagher](twitter.com/necolas)\n* 🌎 [Official Trello CSS Guide](gist.github.com/bobbygrace/9e961e8982f42eb91b80) by Bobby Grace\n* 🌎 [Sass Guidelines](sass-guidelin.es/) by 🌎 [Kitty Giraudel](twitter.com/KittyGiraudel)\n* [SASS Style Guide](http://sass-lang.com/styleguide) by Sass team\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;?⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;?🍴\u003c/code\u003e\u003c/b\u003e [ThinkUp CSS Style Guide](https://github.com/ThinkUpLLC/ThinkUp/wiki/Code-Style-Guide:-CSS)) by ThinkUp\n* 🌎 [WordPress CSS Coding Standards](make.wordpress.org/core/handbook/best-practices/coding-standards/css/) by WorldPress\n\n\u003csub\u003e[⇧ back to top](#contents)\u003c/sub\u003e\n\n## Style Guide\n\n* [AUI](http://docs.atlassian.com/aui/latest/docs) by Atlassian Design\n* [Design Elements](http://rizzo.lonelyplanet.com/styleguide/design-elements/colours) by lonely planet\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;19075⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;2788🍴\u003c/code\u003e\u003c/b\u003e [Fluent UI](https://github.com/microsoft/fluentui)) by Microsoft\n* 🌎 [GitHub CSS Style Guide](primer.github.io/) by Github\n* 🌎 [Lighting Design System](www.lightningdesignsystem.com/) by Salesforce\n* 🌎 [Patterns](ux.mailchimp.com/patterns) by MailChimp\n* [Solid](http://solid.buzzfeed.com/) by BuzzFeed\n* 🌎 [Style Guide](www.starbucks.com/static/reference/styleguide/) by Starbucks\n* [Website Style Guide Resources](http://styleguides.io/examples.html) by Awesome people\n\nView more style guides at [Website Style Guide Resources](http://styleguides.io/)\n\n\u003csub\u003e[⇧ back to top](#contents)\u003c/sub\u003e\n\n\n## Style Guide Generators :slot_machine:\n\n- \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;2162⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;199🍴\u003c/code\u003e\u003c/b\u003e [Hologram](https://github.com/trulia/hologram))\n- \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;686⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;23🍴\u003c/code\u003e\u003c/b\u003e [mdcss](https://github.com/jonathantneal/mdcss))\n- \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;547⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;49🍴\u003c/code\u003e\u003c/b\u003e [Source](https://github.com/sourcejs/Source))\n- \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;?⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;?🍴\u003c/code\u003e\u003c/b\u003e [Styledoc](https://github.com/Joony/styledoc/))\n- \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;1066⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;119🍴\u003c/code\u003e\u003c/b\u003e [Styledocco](https://github.com/jacobrask/styledocco))\n- \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;669⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;60🍴\u003c/code\u003e\u003c/b\u003e [Styledown](https://github.com/styledown/styledown))\n- \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;1255⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;167🍴\u003c/code\u003e\u003c/b\u003e [Sc5-styleguide](https://github.com/SC5/sc5-styleguide))\n\n\u003csub\u003e[⇧ back to top](#contents)\u003c/sub\u003e\n\n\n## Naming conventions \u0026 Methodologies :bulb:\n\n* [Atomic Design](http://patternlab.io/resources.html)\n* 🌎 [Atomic OOBEMITSCSS](www.sitepoint.com/atomic-oobemitscss/)\n* 🌎 [BEM](en.bem.info/)\n* [ITCSS](http://itcss.io/)\n* [Kickoff CSS](http://trykickoff.com/learn/css.html#namingscheme)\n* [MaintainableCSS](http://maintainablecss.com)\n* 🌎 [NCSS](ncss.io)\n* 🌎 [OOCSS](www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/)\n* [Point North](http://pointnorth.io/#base-browser-styling)\n* 🌎 [RSCSS](rscss.io/)\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;3804⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;227🍴\u003c/code\u003e\u003c/b\u003e [SUIT CSS](https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md#u-utilityname))\n* 🌎 [Title CSS](www.sitepoint.com/title-css-simple-approach-css-class-naming/)\n\n\u003csub\u003e[⇧ back to top](#contents)\u003c/sub\u003e\n\n\n## CSS in JS\n\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;5345⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;187🍴\u003c/code\u003e\u003c/b\u003e [Aphrodite](https://github.com/Khan/aphrodite))\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;298⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;8🍴\u003c/code\u003e\u003c/b\u003e [Babel-plugin-css-in-js](https://github.com/martinandert/babel-plugin-css-in-js))\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;23⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;2🍴\u003c/code\u003e\u003c/b\u003e [Classy](https://github.com/inturn/classy))\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;575⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;32🍴\u003c/code\u003e\u003c/b\u003e [Csjs](https://github.com/rtsao/csjs))\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;4322⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;608🍴\u003c/code\u003e\u003c/b\u003e [Css-loader](https://github.com/webpack/css-loader))\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;7089⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;400🍴\u003c/code\u003e\u003c/b\u003e [JSS](https://github.com/cssinjs/jss))\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;39⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;5🍴\u003c/code\u003e\u003c/b\u003e [React-styled](https://github.com/bloodyowl/react-styled))\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;1704⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;98🍴\u003c/code\u003e\u003c/b\u003e [React-with-styles](https://github.com/airbnb/react-with-styles))\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;7759⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;261🍴\u003c/code\u003e\u003c/b\u003e [Styled-jsx](https://github.com/zeit/styled-jsx))\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;40780⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;2508🍴\u003c/code\u003e\u003c/b\u003e [Styled-components](https://github.com/styled-components/styled-components))\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;181⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;5🍴\u003c/code\u003e\u003c/b\u003e [Stylin](https://github.com/sultan99/stylin))\n\n\nHere is a \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;5518⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;285🍴\u003c/code\u003e\u003c/b\u003e [CSS in JS techniques comparison](https://github.com/MicheleBertoli/css-in-js))\n\n\u003csub\u003e[⇧ back to top](#contents)\u003c/sub\u003e\n\n\n## CSS Polyfills\n\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;?⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;?🍴\u003c/code\u003e\u003c/b\u003e [Polyfill.js](https://github.com/philipwalton/polyfill/)) - A library to make creating CSS polyfills much easier.\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;3819⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;711🍴\u003c/code\u003e\u003c/b\u003e [Prefixfree](https://github.com/LeaVerou/prefixfree)) - Break free from CSS prefix hell.\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;1483⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;151🍴\u003c/code\u003e\u003c/b\u003e [Fixed-sticky](https://github.com/filamentgroup/fixed-sticky)) - A CSS position:sticky polyfill.\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;1703⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;244🍴\u003c/code\u003e\u003c/b\u003e [Selectivizr](https://github.com/keithclark/selectivizr)) - A JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8.\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;2782⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;235🍴\u003c/code\u003e\u003c/b\u003e [PIE](https://github.com/lojjic/PIE)) - Allows Internet Explorer to recognize and render various CSS3 box decoration properties.\n\n\n\u003csub\u003e[⇧ back to top](#contents)\u003c/sub\u003e\n\n\n## Miscellaneous\n\n* 🌎 [Beautiful CSS box-shadow examples](getcssscan.com/css-box-shadow-examples) - Curated collection of 93 beautiful CSS box-shadow. Click to copy.\n* 🌎 [Can I use](caniuse.com/) - Browser support for CSS, HTML5 and other front-end web technologies.\n* 🌎 [Flexbox Patterns](flexboxpatterns.com/) by cjcenizal\n* 🌎 [Glassmorphism CSS Generator](ui.glass/generator/) - Generate CSS for glassmorphism.\n* 🌎 [GradientArt](gra.dient.art/) - An advanced CSS gradient editor with layering, design tools and free cloud storage.\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;285⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;61🍴\u003c/code\u003e\u003c/b\u003e [Live editor for CSS and LESS](https://github.com/webextensions/live-css-editor)) - Magic CSS extension for Chrome, Firefox and Edge.\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;852⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;58🍴\u003c/code\u003e\u003c/b\u003e [RevengeCSS](https://github.com/Heydon/REVENGE.CSS)) - A CSS bookmarklet that uses selectors to find bad markup, displaying ugly pink error messages in comic sans serif wherever you write bad HTML\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;1595⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;104🍴\u003c/code\u003e\u003c/b\u003e [Single Div Project](https://github.com/ManrajGrover/SingleDivProject)) - One `\u003cdiv\u003e`. Many possibilities.\n* [You Might Not Need JS](http://youmightnotneedjs.com/) - CSS alternatives for common JS UI components.\n* \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;14⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;1🍴\u003c/code\u003e\u003c/b\u003e [Xpath-to-selector](https://github.com/steambap/xpath-to-selector)) - Convert xpath to css selector.\n\n\u003csub\u003e[⇧ back to top](#contents)\u003c/sub\u003e\n\n## Podcasts :radio:\n\n*Something to listen to while programming.*\n\n* 🌎 [CSS Podcast](thecsspodcast.libsyn.com/) - Una Kravets and Adam Argyle,and development.\n* [Non Breaking Space Show](http://goodstuff.fm/nbsp) - Seeking out the best,and smartest creative people on digital art,and the accompanying blog,and UX.\n* [Shop Talk Show](http://shoptalkshow.com/) - A live podcast with Chris Coyier and Dave Rupert about front-end web design,hosted by Anna Debenham and Brad Frost.\n* [Style Guide Podcast](http://styleguides.io/podcast/index.html) - 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.\n* 🌎 [Syntax](syntax.fm/) - A Tasty Treats Podcast for Web Developers.,typography,web technology\n* [The Big Web Show](http://5by5.tv/bigwebshow/) - Topics like web publishing,is all about keeping you updated with the latest in Open Source Technology.\n* 🌎 [The Changelog](changelog.com/) - The tagline for the Changelog says it all: “Open Source moves fast. Keep up.” This podcast,and more. It's everything web that matters.\n* [The Web Ahead](http://5by5.tv/webahead/) - Conversations with world experts on changing technologies and future of the web.\n\n\u003csub\u003e[⇧ back to top](#contents)\u003c/sub\u003e\n\n\n## Twitter :satellite:\n\n*Active accounts to follow.*\n\n* 🌎 [Adam Morse](twitter.com/mrmrs_) - Advocate for users and open-source.\n* 🌎 [Andrey Sitnik](twitter.com/andreysitnik) - Author of @Autoprefixer, http://easings.net  and @PostCSS.\n* 🌎 [Ben Briggs](twitter.com/ben_eb) - Final year web technologies student. node.js, javascript, open source modules, client side optimisation, web performance.\n* 🌎 [Brad Frost](twitter.com/brad_frost) - Web designer, speaker, writer, consultant, musician.\n* 🌎 [Chris Coyier](twitter.com/chriscoyier) - Designer @CodePen. Writer @Real_CSS_Tricks.\n* 🌎 [Connor Sears](twitter.com/connors) - Designer at GitHub.\n* 🌎 [CSS Animation](twitter.com/cssanimation)\n* 🌎 [CSS Commits](twitter.com/CSScommits) - Latest commits to @CSSWG’s public Mercurial repository.\n* 🌎 [Daniel Glazman](twitter.com/glazou) - W3C CSS Working Group Co-chairman, entrepreneur, software engineer, geek, father of two, polyglot, duck lover. Nah. Tweets are strictly mine.\n* 🌎 [Dave McFarland](twitter.com/davemcfarland) - Web developer, author of CSS: The Missing Manual, JavaScript \u0026 jQuery.\n* 🌎 [Donovan Hutchinson](twitter.com/donovanh) - Designer, developer, writer. Occasionally blogs at http://Hop.ie, and currently building @cssanimation.\n* 🌎 [Dudley Storey](twitter.com/dudleystorey) - Web development writer, teacher, and speaker.\n* 🌎 [Eric Bidelman](twitter.com/ebidel) - Engineer at Google working on Chrome, web components, and Polymer.\n* 🌎 [Evangelina Ferreira](twitter.com/evaferreira92) - Web Designer. Professor at @multimedial_utn HTML5 \u0026 CSS Freak. Ocassional Translator.\n* 🌎 [Guy Routledge](twitter.com/guyroutledge) - Front-end dev, Teacher @GA_London, Screencaster at http://www.atozcss.com, property snob, Foodie.\n* 🌎 [Harry Roberts](twitter.com/csswizardry)- Consultant Front-end Architect: @google, @Etsy, @kickstarter, @BBC, @Deloitte, @FT, more.\n* 🌎 [Heydon Pickering](twitter.com/heydonworks) - Moderate consumer of rice. Also a UX designer, author, @smashingmag editor and programmer.\n* 🌎 [Jonathan Snook](twitter.com/snookca) - Designer, Developer, Writer, Speaker. I make stuff on the web. I wrote SMACSS.\n* 🌎 [Kitty Giraudel](twitter.com/KittyGiraudel) - Non-binary accessibility \u0026 diversity advocate, frontend developer, author.\n* 🌎 [L. David Baron](twitter.com/davidbaron) - Mozilla developer, CSS and W3C standards diplomat.\n* 🌎 [Lea Verou](twitter.com/LeaVerou) - Research Assistant @MIT_CSAIL, @CSSWG IE, @OReillyMedia author, Ex @W3C staff.\n* 🌎 [Manoela Ilic](twitter.com/crnacura) - ...aka Mary Lou @codrops ༶ CSS \u0026 HTML are my crayons ༶ Interested in Cognitive Science, AI, HCI, UI Design \u0026 Astrophysics ༶ Digital nomad.\n* 🌎 [Mark Otto](twitter.com/mdo) - GitHub and Bootstrap. Formerly at Twitter. Huge nerd.\n* 🌎 [Maxime Thirouin](twitter.com/MoOx) - Freelance front-end vigilante, UI/UX developer.\n* 🌎 [Natalie Weizenbaum](twitter.com/nex3) - Trans coder lady. Lead designer/developer of @SassCSS, working for @google on @dart_lang.\n* 🌎 [Nicolas Gallagher](twitter.com/necolas) - Software Engineer at @twitter.\n* 🌎 [Nicole Sullivan](twitter.com/stubbornella) - GEEK.\n* 🌎 [Patrick Hamann](twitter.com/patrickhamann) - Lover of mountains, craft beers and discovering new food.\n* 🌎 [Paul Lewis](twitter.com/aerotwist) - Googler who noodles with code and design.\n* 🌎 [Phil Walton](twitter.com/philwalton) - Engineer at Google • Open Source Advocate • Developer • Designer • Writer.\n* 🌎 [Rachel Andrew](twitter.com/rachelandrew) - Web Developer, half of @grabaperch CMS, CSS Working Group Invited Expert.\n* 🌎 [Remy Sharp](twitter.com/rem) - All about CSS sizing units.\n* 🌎 [Sara Soueidan](twitter.com/SaraSoueidan) - Author of the @Codrops CSS Reference \u0026 Co-author of the Smashing Book #5.\n* 🌎 [Scott Jehl](twitter.com/scottjehl) - Author of @responsiblerwd, now on sale from @abookapart.\n* 🌎 [Simon](twitter.com/simurai) - UI designer, CSS doodler.\n* 🌎 [The Chris Eppstein](twitter.com/chriseppstein) - Loves love. Hates hate. Has a kick-ass family. Writes code. Leads stylesheet tech @LinkedIn.\n* 🌎 [Una Kravets](twitter.com/Una) - Front-end @IBMDesign. Sassvocate, community builder, \u0026 handcrafter. STEMinist :) Open source all the things.\n* 🌎 [Zoe M. Gillenwater](twitter.com/zomigi) - Web designer/developer specializing in CSS, RWD, UX, \u0026 accessibility.\n* 🌎 [Zoltán Szőgyényi](twitter.com/zoltanszogyenyi) - Web developer, Co-founder at Themesberg. I'm building Glass UI.\n* 🌎 [앗킨스 탭](twitter.com/tabatkins) - Literally Jenn Schiffer's Mom.\n\n\u003csub\u003e[⇧ back to top](#contents)\u003c/sub\u003e\n\n\n## Videos :tv:\n\n*Good study videos from CSS Must Watch Videos. Some items are quoted from \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;4789⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;247🍴\u003c/code\u003e\u003c/b\u003e [AllThingsSmitty/must-watch-css](https://github.com/AllThingsSmitty/must-watch-css)).\n 🌎 [I told him on Twitter](twitter.com/sota0805/status/527635856031375360). I appreciate his valuable efforts.*\n\n### 2019\n\n1. 🌎 [Next-Generation Web Styling](www.youtube.com/watch?v=-oyeaIirVC0) - Una Kravets \u0026 Adam Argyle @ Chrome Dev Summit 2019.\n\n### 2016\n\n1. 🌎 [Component-Based Style Reuse](www.youtube.com/watch?v=_70Yp8KPXH8) :page_facing_up: 🌎 [transcript](2016.cssconf.com/) :watch: `37:24` - Pete Hunt @ CSS conf 2016.\n1. 🌎 [CSS4 Grid: True Layout Finally Arrives](www.youtube.com/watch?v=jl164y-Vb5E) :page_facing_up: 🌎 [transcript](2016.cssconf.com/) :watch: `29:27` - Jen Kramer @ CSS conf 2016.\n1. 🌎 [Houdini: Demystifying the Future of CSS](www.youtube.com/watch?v=sE3ttkP15f8) :watch: `36:58` @ Google I/O 2016.\n\n### 2015\n\n1. [Mdo-ular CSS](http://jqueryuk.com/2015/videos.php?s=mdo-ular-css) :watch: `30:06` - Mark Otto @ jQuery UK.\n1. 🌎 [CSS Architecture with SMACSS](www.youtube.com/watch?v=6co781JgoqQ) :watch: `30:15` - Caleb Meredith @ DevTips channel.\n1. 🌎 [CSS Workflow from the Ground Up](www.youtube.com/watch?v=ZVk3GQHfkbU) :watch: `46:06` - Jonathan Snook @ Generate conf 2015.\n\n\u003csub\u003e[⇧ back to top](#contents)\u003c/sub\u003e\n\n## Books :books:\n\n* [CSS: The Definitive Guide, 4th Edition](http://shop.oreilly.com/product/0636920012726.do)  - Visual Presentation for the Web\n* [CSS: The Missing Manual](http://shop.oreilly.com/product/0636920036357.do) – Really Helpful in Advancing your Design Skills to a whole new Level\n* [CSS Secrets](http://shop.oreilly.com/product/0636920031123.do) – Better Solutions to Everyday Web Design Problems\n* 🌎 [Every Layout: Relearn CSS Layout](every-layout.dev/) – Solving responsive layout problems using algorithmic design.\n* 🌎 [Tiny CSS Projects](www.manning.com/books/tiny-css-projects) – Improve the way you write CSS as you build 12 tiny projects.\n\n\u003csub\u003e[⇧ back to top](#contents)\u003c/sub\u003e\n\n## Tutorials :clapper:\n\n* 🌎 [30 Seconds of CSS](www.30secondsofcode.org/css/p/1) -  A curated collection of useful CSS snippets you can understand in 30 seconds or less.\n* 🌎 [All selectors in CSS](medium.com/@ymzEmre/css-cascade-specificity-basic-selectors-c5adc01dd861) - All selectors in CSS.\n* 🌎 [Community Curated CSS Resources](hackr.io/tutorials/learn-css) - Top Recommended Resources.\n* 🌎 [CSS Diner](flukeout.github.io/) – Interactive gamified tutorial for learning selection with CSS.\n* 🌎 [CSS Grid PlayGround](mozilladevelopers.github.io/playground/) - Simple tutorial to learn CSS Grid from Mozilla.\n* 🌎 [CSS Grids videos tutorial](cssgrid.io/) - Free video course by Wes Bos to learn CSS Grids.\n* 🌎 [CSS Hands-on Tutorial](labex.io/tutorials/quick-start-with-css-free-tutorials-413795) - Free CSS hands-on tutorial by LabEx.\n* 🌎 [CSS Math Functions](stackdiary.com/css-math-functions/) - Using CSS Math for responsive design.\n* 🌎 [Flexbox video tutorial](flexbox.io/) - Free video course by Wes Bos to learn flexbox.\n* 🌎 [Organize CSS with a Modular Architecture: OOCSS, BEM, SMACSS](snipcart.com/blog/organize-css-modular-architecture) - In-depth intro to OOCSS, BEM, SMACSS, with examples.\n* 🌎 [Work With Animations](developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations) - Inspecting animations.\n\n\u003csub\u003e[⇧ back to top](#contents)\u003c/sub\u003e\n\n## Maintainers\n\n[sotayamashita]: https://github.com/sotayamashita\n[Rishabh04-02]:  https://github.com/Rishabh04-02\n\n[@sotayamashita][sotayamashita], [@Rishabh04-02][Rishabh04-02] and You!\n\n\n## Contribute\n\n[contributor-covenant]: https://www.contributor-covenant.org/version/1/3/0/code-of-conduct/\n\nFeel free to dive in! Open an issue or submit PRs.\n\nAwesome CSS follows the [Contributor Covenant][contributor-covenant] Code of Conduct.\n\r\n## Source\r\n\u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;5221⭐\u003c/code\u003e\u003c/b\u003e \u003cb\u003e\u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;426🍴\u003c/code\u003e\u003c/b\u003e [awesome-css-group/awesome-css](https://github.com/awesome-css-group/awesome-css))","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcorreia-jpv%2Ffucking-awesome-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcorreia-jpv%2Ffucking-awesome-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcorreia-jpv%2Ffucking-awesome-css/lists"}