{"slug": "awesome-css-group--awesome-css", "title": "Css", "description": ":art: A curated contents of amazing CSS :)", "github_url": "https://github.com/awesome-css-group/awesome-css", "stars": "5K", "tag": "Front-End Development", "entry_count": 216, "subcategory_count": 6, "subcategories": [{"name": "Motivation", "parent": "Introduction", "entries": []}, {"name": "Complementary Resources", "parent": "Introduction", "entries": [{"name": "CSS - MDN - Mozilla", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS", "description": ""}, {"name": "Reddit (CSS)", "url": "https://www.reddit.com/r/css/", "description": ""}, {"name": "StackOverflow (CSS)", "url": "https://stackoverflow.com/questions/tagged/css", "description": ""}, {"name": "CSS Working Group", "url": "#css-working-group", "description": ""}, {"name": "Parsers :mag:", "url": "#parsers-mag", "description": ""}, {"name": "Preprocessors :pill:", "url": "#preprocessors-pill", "description": ""}, {"name": "Frameworks :art:", "url": "#frameworks-art", "description": ""}, {"name": "Toolkits :wrench:", "url": "#toolkits-wrench", "description": ""}, {"name": "Reset and Normalize", "url": "#reset-and-normalize", "description": ""}, {"name": "CSS Development at Large-Scale Websites", "url": "#css-development-at-large-scale-websites", "description": ""}, {"name": "Code Style Guidelines :book:", "url": "#code-style-guidelines-book", "description": ""}, {"name": "Style Guide", "url": "#style-guide", "description": ""}, {"name": "Style Guide Generators :slot\\_machine:", "url": "#style-guide-generators-slot_machine", "description": ""}, {"name": "Naming conventions & Methodologies :bulb:", "url": "#naming-conventions--methodologies-bulb", "description": ""}, {"name": "CSS in JS", "url": "#css-in-js", "description": ""}, {"name": "CSS Polyfills", "url": "#css-polyfills", "description": ""}, {"name": "Miscellaneous", "url": "#miscellaneous", "description": ""}, {"name": "Podcasts :radio:", "url": "#podcasts-radio", "description": ""}, {"name": "Twitter :satellite:", "url": "#twitter-satellite", "description": ""}, {"name": "Videos :tv:", "url": "#videos-tv", "description": ""}, {"name": "Books :books:", "url": "#books-books", "description": ""}, {"name": "Tutorials :clapper:", "url": "#tutorials-clapper", "description": ""}, {"name": "Maintainers", "url": "#maintainers", "description": ""}, {"name": "Contribute", "url": "#contribute", "description": ""}]}, {"name": "Editor's Draft :black\\_nib:", "parent": "CSS Working Group", "entries": [{"name": "W3c/csswg-drafts", "url": "https://github.com/w3c/csswg-drafts", "description": "Mirror of CSS WG Editor Draft repository.", "stars": "4.5k"}, {"name": "W3c/css-houdini-drafts", "url": "https://github.com/w3c/css-houdini-drafts", "description": "Mirror of Houdini WG Editor repository.", "stars": "1.8k"}, {"name": "CSSOM", "url": "https://github.com/NV/CSSOM", "description": "CSS Object Model implemented in pure JavaScript.", "stars": "752"}, {"name": "CSSTree", "url": "https://github.com/csstree/csstree", "description": "Detailed CSS parser with syntax validator.", "stars": "1.9k"}, {"name": "Gonzales PE", "url": "https://github.com/tonyganch/gonzales-pe", "description": "CSS parser with support for preprocessors.", "stars": "330"}, {"name": "Mensch", "url": "https://github.com/brettstimmerman/mensch", "description": "A decent CSS parser.", "stars": "113"}, {"name": "ParserLib", "url": "https://github.com/CSSLint/parser-lib", "description": "CSSLint/parser-lib.", "stars": "287"}, {"name": "PostCSS", "url": "https://github.com/postcss/postcss", "description": "Transforming styles with JS plugins.", "stars": "29k"}, {"name": "Rework", "url": "https://github.com/reworkcss/rework", "description": "Plugin framework for CSS preprocessing in Node.js.", "stars": "2.8k"}, {"name": "Stylecow", "url": "https://github.com/stylecow/stylecow", "description": "Modern CSS for all browsers.", "stars": "163"}, {"name": "LESS", "url": "https://github.com/less/less.js", "description": "Backwards compatible with CSS, and the extra features it adds use existing CSS syntax.", "stars": "17k"}, {"name": "PostCSS", "url": "https://github.com/postcss/postcss", "description": "Transforming CSS with JS plugins.", "stars": "29k"}, {"name": "Sass", "url": "https://github.com/sass/sass", "description": "Mature, stable, and powerful professional-grade CSS extension language.", "stars": "15k"}, {"name": "STYLIS", "url": "https://github.com/thysultan/stylis.js", "description": "Light-weight CSS preprocessor.", "stars": "1.7k"}, {"name": "Stylus", "url": "http://learnboost.github.io/stylus/", "description": "Expressive, robust, feature-rich CSS language built for NodeJs."}, {"name": "Vanilla Extract", "url": "https://vanilla-extract.style/", "description": "Generate static CSS using Typescript. Write type\u2011safe, locally scoped classes, variables and themes."}, {"name": "AgnosticUI", "url": "https://www.agnosticui.com/", "description": "Accessible CSS component primitives that also work with React, Vue 3, Svelte, and Angular."}, {"name": "Bonsai", "url": "https://www.bonsaicss.com/", "description": "A complete Utility First CSS Framework for less than 50kb."}, {"name": "Bootstrap", "url": "https://getbootstrap.com/", "description": "The most popular HTML, CSS, and JS framework."}, {"name": "Bulma", "url": "http://bulma.io/", "description": "A modern CSS framework based on Flexbox. Also has Sass import for modification."}, {"name": "Butter Cake", "url": "http://getbuttercake.com/", "description": "A Modern Lightweight Front End CSS framework for faster and easier web development."}, {"name": "Charts.css", "url": "https://chartscss.org/", "description": "CSS data visualization framework."}, {"name": "Chota", "url": "https://jenil.github.io/chota/", "description": "A responsive, customizable micro-framework (3kb) with helpful utilities and a grid system."}, {"name": "Cirrus", "url": "https://spiderpig86.github.io/Cirrus/", "description": "A fully responsive and comprehensive CSS framework with beautiful controls and simplistic structure."}, {"name": "Foundation", "url": "http://foundation.zurb.com/", "description": "advanced responsive front-end framework."}, {"name": "Gralig", "url": "http://gralig.com/", "description": "A modest, grayish CSS library."}, {"name": "Halfmoon", "url": "https://www.gethalfmoon.com/", "description": "A responsive front-end framework with a built-in dark mode."}, {"name": "Hasser CSS", "url": "https://github.com/HeavenMercy/HasserCSS", "description": "A lightweight (12k, not minified) but useful CSS framework with flexible Grid, Hero and more.", "stars": "3"}, {"name": "Inuit.css", "url": "http://inuitcss.com/", "description": "Powerful, scalable, Sass-based, BEM, OOCSS framework."}, {"name": "Material-components-web", "url": "https://github.com/material-components/material-components-web", "description": "Modular and customizable Material Design UI components for the web.", "stars": "17k"}, {"name": "Materialize", "url": "http://materializecss.com/", "description": "A modern responsive front-end framework based on Material Design."}, {"name": "Milligram", "url": "http://milligram.io", "description": "A minimalist CSS framework."}, {"name": "Numl", "url": "https://numl.design", "description": "An HTML-based language and design system that lets you create responsive and accessible high-quality web interfaces with any look."}, {"name": "Pure.css", "url": "http://purecss.io/", "description": "A set of small, responsive CSS modules that you can use in every web project."}, {"name": "Semantic UI", "url": "http://semantic-ui.com/", "description": "Powerful framework that uses human-friendly HTML."}, {"name": "Shorthand Framework", "url": "https://github.com/shorthandcss/shorthand", "description": "Feature rich CSS framework for the new decade.", "stars": "256"}, {"name": "Spectre.css", "url": "https://picturepan2.github.io/spectre/index.html", "description": "A lightweight, responsive and modern CSS framework."}, {"name": "Strawberry", "url": "https://github.com/jfet97/strawberry", "description": "A set of common flexbox utilities focused on making your life easier and faster with nested flexboxes.", "stars": "73"}, {"name": "Tachyons", "url": "http://tachyons.io/", "description": "Functional CSS for humans."}, {"name": "Tacit", "url": "https://yegor256.github.io/tacit/", "description": "CSS framework for dummies with zero skills in graphic design."}, {"name": "Tailwindcss", "url": "https://github.com/tailwindcss/tailwindcss", "description": "A utility-first CSS framework for rapid UI development.", "stars": "83k"}, {"name": "Tronic247 Material", "url": "https://material.pages.dev/", "description": "A responsive framework based on CSS and some JS while following Material Design guidelines."}, {"name": "UIkit", "url": "http://getuikit.com/", "description": "A lightweight and modular front-end framework."}, {"name": "Unsemantic", "url": "http://unsemantic.com/", "description": "Fluid grid for mobile, tablet, and desktop."}, {"name": "Wing", "url": "https://kbrsh.github.io/wing/", "description": "A Minimal, Lightweight, Responsive framework."}, {"name": "Bourbon", "url": "http://bourbon.io/", "description": "A simple and lightweight mixin library for Sass."}, {"name": "CSS Checker", "url": "https://github.com/ruilisi/css-checker", "description": "Find and Reduce Similar & Duplicated CSS Scripts.", "stars": "578"}, {"name": "MiniReset.css", "url": "https://github.com/jgthms/minireset.css", "description": "A tiny modern CSS reset.", "stars": "2.8k"}, {"name": "Normalize-OpenType", "url": "https://github.com/kennethormandy/normalize-opentype.css", "description": "Adds OpenType features\u2014ligatures, kerning, and more\u2014to Normalize.css.", "stars": "795"}, {"name": "Normalize", "url": "https://github.com/necolas/normalize.css", "description": "A set of CSS rules that provide better cross-browser consistency in the default styling of HTML elements.", "stars": "52k"}, {"name": "Reset.css", "url": "https://meyerweb.com/eric/tools/css/reset/", "description": "CSS Tools: Reset CSS."}, {"name": "Reseter.css", "url": "https://github.com/krishdevdb/reseter.css", "description": "A Futuristic CSS Reset/Normalizer. That Redifines Instead Of Preserving.", "stars": "1.2k"}, {"name": "Sanitize.css", "url": "https://github.com/jonathantneal/sanitize.css/", "description": "A set of CSS rules that style with today\u2019s best practices out-of-the-box.", "stars": "5.2k"}, {"name": "Unstyle.css", "url": "https://github.com/Martin-Pitt/css-unstyle", "description": "Specialised stylesheet for removing user agent styles, style the web with your baseline.", "stars": "29"}, {"name": "Bugsnag's CSS Architecture", "url": "http://blog.bugsnag.com/bugsnags-css-architecture", "description": ""}, {"name": "CSS at BBC Sport", "url": "https://medium.com/@shaunbent/css-at-bbc-sport-part-1-bab546184e66", "description": ""}, {"name": "CSS AT HOOTSUITE", "url": "http://code.hootsuite.com/css-at-hootsuite/", "description": ""}, {"name": "GitHub's CSS", "url": "http://markdotto.com/2014/07/23/githubs-css/", "description": ""}, {"name": "How we do CSS at Ghost", "url": "https://dev.ghost.org/css-at-ghost/", "description": ""}, {"name": "Lonely Planet", "url": "http://ianfeather.co.uk/css-at-lonely-planet/", "description": ""}, {"name": "Medium\u2019s CSS is actually pretty good.", "url": "https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06", "description": ""}, {"name": "Refining The Way We Structure Our CSS At Trello", "url": "http://blog.trello.com/refining-the-way-we-structure-our-css-at-trello/", "description": ""}, {"name": "Scalable-css-reading-list", "url": "https://github.com/davidtheclark/scalable-css-reading-list", "description": "", "stars": "1.5k"}, {"name": "Code Guide", "url": "http://codeguide.co/", "description": ""}, {"name": "CSS Guidelines", "url": "http://cssguidelin.es/", "description": ""}, {"name": "CSS Styleguide", "url": "https://github.com/grvcoelho/css", "description": "", "stars": "418"}, {"name": "Dropbox (S)CSS Style Guide", "url": "https://github.com/dropbox/css-style-guide", "description": "", "stars": "1.2k"}, {"name": "Google HTML/CSS Style Guide", "url": "https://google.github.io/styleguide/htmlcssguide.html", "description": ""}, {"name": "Idiomatic CSS", "url": "https://github.com/necolas/idiomatic-css", "description": "", "stars": "6.7k"}, {"name": "Official Trello CSS Guide", "url": "https://gist.github.com/bobbygrace/9e961e8982f42eb91b80", "description": ""}, {"name": "Sass Guidelines", "url": "https://sass-guidelin.es/", "description": ""}, {"name": "SASS Style Guide", "url": "http://sass-lang.com/styleguide", "description": ""}, {"name": "ThinkUp CSS Style Guide", "url": "https://github.com/ThinkUpLLC/ThinkUp/wiki/Code-Style-Guide:-CSS", "description": "", "stars": "3.3k"}, {"name": "WordPress CSS Coding Standards", "url": "https://make.wordpress.org/core/handbook/best-practices/coding-standards/css/", "description": ""}, {"name": "AUI", "url": "http://docs.atlassian.com/aui/latest/docs", "description": ""}, {"name": "Design Elements", "url": "http://rizzo.lonelyplanet.com/styleguide/design-elements/colours", "description": ""}, {"name": "Fluent UI", "url": "https://github.com/microsoft/fluentui", "description": "", "stars": "18k"}, {"name": "GitHub CSS Style Guide", "url": "https://primer.github.io/", "description": ""}, {"name": "Lighting Design System", "url": "https://www.lightningdesignsystem.com/", "description": ""}, {"name": "Patterns", "url": "https://ux.mailchimp.com/patterns", "description": ""}, {"name": "Solid", "url": "http://solid.buzzfeed.com/", "description": ""}, {"name": "Style Guide", "url": "https://www.starbucks.com/static/reference/styleguide/", "description": ""}, {"name": "Website Style Guide Resources", "url": "http://styleguides.io/examples.html", "description": ""}, {"name": "Hologram", "url": "https://github.com/trulia/hologram", "description": "", "stars": "2.2k"}, {"name": "mdcss", "url": "https://github.com/jonathantneal/mdcss", "description": "", "stars": "686"}, {"name": "Source", "url": "https://github.com/sourcejs/Source", "description": "", "stars": "548"}, {"name": "Styledoc", "url": "https://github.com/Joony/styledoc/", "description": "", "stars": "7"}, {"name": "Styledocco", "url": "https://github.com/jacobrask/styledocco", "description": "", "stars": "1.1k"}, {"name": "Styledown", "url": "https://github.com/styledown/styledown", "description": "", "stars": "667"}, {"name": "Sc5-styleguide", "url": "https://github.com/SC5/sc5-styleguide", "description": "", "stars": "1.3k"}, {"name": "Atomic Design", "url": "http://patternlab.io/resources.html", "description": ""}, {"name": "Atomic OOBEMITSCSS", "url": "https://www.sitepoint.com/atomic-oobemitscss/", "description": ""}, {"name": "BEM", "url": "https://en.bem.info/", "description": ""}, {"name": "ITCSS", "url": "http://itcss.io/", "description": ""}, {"name": "Kickoff CSS", "url": "http://trykickoff.com/learn/css.html#namingscheme", "description": ""}, {"name": "MaintainableCSS", "url": "http://maintainablecss.com", "description": ""}, {"name": "NCSS", "url": "https://ncss.io", "description": ""}, {"name": "OOCSS", "url": "https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/", "description": ""}, {"name": "Point North", "url": "http://pointnorth.io/#base-browser-styling", "description": ""}, {"name": "RSCSS", "url": "https://rscss.io/", "description": ""}, {"name": "SUIT CSS", "url": "https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md#u-utilityname", "description": "", "stars": "3.8k"}, {"name": "Title CSS", "url": "https://www.sitepoint.com/title-css-simple-approach-css-class-naming/", "description": ""}, {"name": "Aphrodite", "url": "https://github.com/Khan/aphrodite", "description": "", "stars": "5.3k"}, {"name": "Babel-plugin-css-in-js", "url": "https://github.com/martinandert/babel-plugin-css-in-js", "description": "", "stars": "298"}, {"name": "Classy", "url": "https://github.com/inturn/classy", "description": "", "stars": "24"}, {"name": "Csjs", "url": "https://github.com/rtsao/csjs", "description": "", "stars": "575"}, {"name": "Css-loader", "url": "https://github.com/webpack/css-loader", "description": "", "stars": "4.3k"}, {"name": "JSS", "url": "https://github.com/cssinjs/jss", "description": "", "stars": "7.1k"}, {"name": "React-styled", "url": "https://github.com/bloodyowl/react-styled", "description": "", "stars": "39"}, {"name": "React-with-styles", "url": "https://github.com/airbnb/react-with-styles", "description": "", "stars": "1.7k"}, {"name": "Styled-jsx", "url": "https://github.com/zeit/styled-jsx", "description": "", "stars": "7.7k"}, {"name": "Styled-components", "url": "https://github.com/styled-components/styled-components", "description": "", "stars": "40k"}, {"name": "Stylin", "url": "https://github.com/sultan99/stylin", "description": "", "stars": "181"}, {"name": "Polyfill.js", "url": "https://github.com/philipwalton/polyfill/", "description": "A library to make creating CSS polyfills much easier.", "stars": "296"}, {"name": "Prefixfree", "url": "https://github.com/LeaVerou/prefixfree", "description": "Break free from CSS prefix hell.", "stars": "3.8k"}, {"name": "Fixed-sticky", "url": "https://github.com/filamentgroup/fixed-sticky", "description": "A CSS position:sticky polyfill.", "stars": "1.5k"}, {"name": "Selectivizr", "url": "https://github.com/keithclark/selectivizr", "description": "A JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8.", "stars": "1.7k"}, {"name": "PIE", "url": "https://github.com/lojjic/PIE", "description": "Allows Internet Explorer to recognize and render various CSS3 box decoration properties.", "stars": "2.8k"}, {"name": "Beautiful CSS box-shadow examples", "url": "https://getcssscan.com/css-box-shadow-examples", "description": "Curated collection of 93 beautiful CSS box-shadow. Click to copy."}, {"name": "Can I use", "url": "https://caniuse.com/", "description": "Browser support for CSS, HTML5 and other front-end web technologies."}, {"name": "Flexbox Patterns", "url": "https://flexboxpatterns.com/", "description": ""}, {"name": "Glassmorphism CSS Generator", "url": "https://ui.glass/generator/", "description": "Generate CSS for glassmorphism."}, {"name": "GradientArt", "url": "https://gra.dient.art/", "description": "An advanced CSS gradient editor with layering, design tools and free cloud storage."}, {"name": "Live editor for CSS and LESS", "url": "https://github.com/webextensions/live-css-editor", "description": "Magic CSS extension for Chrome, Firefox and Edge.", "stars": "276"}, {"name": "RevengeCSS", "url": "https://github.com/Heydon/REVENGE.CSS", "description": "A CSS bookmarklet that uses selectors to find bad markup, displaying ugly pink error messages in comic sans serif wherever you write bad HTML", "stars": "834"}, {"name": "Single Div Project", "url": "https://github.com/ManrajGrover/SingleDivProject", "description": "One `