awesome-css

CSS reference

A curated collection of resources and tools for writing high-quality CSS code

art A curated contents of amazing CSS :)

GitHub

5k stars
129 watching
423 forks
last commit: almost 2 years ago
Linked from 5 awesome lists

awesomeawesome-listcsslist

Awesome CSS / Introduction / Complementary Resources

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

Awesome CSS / CSS Working Group / Editor's Draft

W3c/csswg-drafts4,532almost 2 years agoMirror of CSS WG Editor Draft repository
W3c/css-houdini-drafts1,837almost 2 years agoMirror of Houdini WG Editor repository

Awesome CSS / Parsers

CSSOM753over 3 years agoCSS Object Model implemented in pure JavaScript
CSSTree1,914almost 2 years agoDetailed CSS parser with syntax validator
Gonzales PE330almost 4 years agoCSS parser with support for preprocessors
Mensch114over 3 years agoA decent CSS parser
ParserLib288almost 2 years agoCSSLint/parser-lib
PostCSS28,576almost 2 years agoTransforming styles with JS plugins
Rework2,758over 5 years agoPlugin framework for CSS preprocessing in Node.js
Stylecow163over 6 years agoModern CSS for all browsers

Awesome CSS / Preprocessors

LESS17,039almost 2 years agoBackwards compatible with CSS, and the extra features it adds use existing CSS syntax
PostCSS28,576almost 2 years agoTransforming CSS with JS plugins
Sass15,162almost 2 years agoMature, stable, and powerful professional-grade CSS extension language
STYLIS1,739almost 2 years agoLight-weight CSS preprocessor
StylusExpressive, robust, feature-rich CSS language built for NodeJs
Vanilla ExtractGenerate static CSS using Typescript. Write type‑safe, locally scoped classes, variables and themes

Awesome CSS / Frameworks

AgnosticUIAccessible CSS component primitives that also work with React, Vue 3, Svelte, and Angular
BonsaiA complete Utility First CSS Framework for less than 50kb
BootstrapThe most popular HTML, CSS, and JS framework
BulmaA modern CSS framework based on Flexbox. Also has Sass import for modification
Butter CakeA Modern Lightweight Front End CSS framework for faster and easier web development
Charts.cssCSS data visualization framework
ChotaA responsive, customizable micro-framework (3kb) with helpful utilities and a grid system
CirrusA fully responsive and comprehensive CSS framework with beautiful controls and simplistic structure
Foundationadvanced responsive front-end framework
GraligA modest, grayish CSS library
HalfmoonA responsive front-end framework with a built-in dark mode
Hasser CSS3about 6 years agoA lightweight (12k, not minified) but useful CSS framework with flexible Grid, Hero and more
Inuit.cssPowerful, scalable, Sass-based, BEM, OOCSS framework
Material-components-web17,142almost 2 years agoModular and customizable Material Design UI components for the web
MaterializeA modern responsive front-end framework based on Material Design
MilligramA minimalist CSS framework
NumlAn HTML-based language and design system that lets you create responsive and accessible high-quality web interfaces with any look
Pure.cssA set of small, responsive CSS modules that you can use in every web project
Semantic UIPowerful framework that uses human-friendly HTML
Shorthand Framework256almost 4 years agoFeature rich CSS framework for the new decade
Spectre.cssA lightweight, responsive and modern CSS framework
Strawberry73about 7 years agoA set of common flexbox utilities focused on making your life easier and faster with nested flexboxes
TachyonsFunctional CSS for humans
TacitCSS framework for dummies with zero skills in graphic design
Tailwindcss83,883almost 2 years agoA utility-first CSS framework for rapid UI development
Tronic247 MaterialA responsive framework based on CSS and some JS while following Material Design guidelines
UIkitA lightweight and modular front-end framework
UnsemanticFluid grid for mobile, tablet, and desktop
WingA Minimal, Lightweight, Responsive framework

Awesome CSS / Toolkits

BourbonA simple and lightweight mixin library for Sass

Awesome CSS / Reset and Normalize

CSS Checker579almost 4 years agoFind and Reduce Similar & Duplicated CSS Scripts
MiniReset.css2,785about 2 years agoA tiny modern CSS reset
Normalize-OpenType794about 9 years agoAdds OpenType features—ligatures, kerning, and more—to Normalize.css
Normalize52,625over 2 years agoA set of CSS rules that provide better cross-browser consistency in the default styling of HTML elements
Reset.cssCSS Tools: Reset CSS
Reseter.css1,224almost 2 years agoA Futuristic CSS Reset/Normalizer. That Redifines Instead Of Preserving
Sanitize.css5,232about 2 years agoA set of CSS rules that style with today’s best practices out-of-the-box
Unstyle.css29over 2 years agoSpecialised stylesheet for removing user agent styles, style the web with your baseline

Awesome CSS / CSS Development at Large-Scale Websites

Bugsnag's CSS Architectureby
CSS at BBC Sportby Shaun Bent
CSS AT HOOTSUITEby Steve Mynett
GitHub's CSSby
How we do CSS at Ghostby Paul Davis
Lonely Planetby
Medium’s CSS is actually pretty good.by
Refining The Way We Structure Our CSS At Trelloby
Scalable-css-reading-list1,536about 2 years ago

Awesome CSS / Code Style Guidelines

Code Guideby
CSS Guidelinesby
CSS Styleguide420over 10 years agoby
Dropbox (S)CSS Style Guide1,173almost 7 years agoby Dropbox
Google HTML/CSS Style Guideby Google
Idiomatic CSS6,655over 3 years agoby
Official Trello CSS Guideby Bobby Grace
Sass Guidelinesby
SASS Style Guideby Sass team
ThinkUp CSS Style Guide3,299over 9 years agoby ThinkUp
WordPress CSS Coding Standardsby WorldPress

Awesome CSS / Style Guide

AUIby Atlassian Design
Design Elementsby lonely planet
Fluent UI18,625almost 2 years agoby Microsoft
GitHub CSS Style Guideby Github
Lighting Design Systemby Salesforce
Patternsby MailChimp
Solidby BuzzFeed
Style Guideby Starbucks
Website Style Guide Resourcesby Awesome people

Awesome CSS / Style Guide Generators

Hologram2,162about 3 years ago
mdcss687over 8 years ago
Source548about 8 years ago
Styledoc7over 14 years ago
Styledocco1,064over 8 years ago
Styledown667about 9 years ago
Sc5-styleguide1,261almost 4 years ago

Awesome CSS / Naming conventions & Methodologies

Atomic Design
Atomic OOBEMITSCSS
BEM
ITCSS
Kickoff CSS
MaintainableCSS
NCSS
OOCSS
Point North
RSCSS
SUIT CSS3,806over 4 years ago
Title CSS

Awesome CSS / CSS in JS

Aphrodite5,352about 5 years ago
Babel-plugin-css-in-js298about 9 years ago
Classy24about 9 years ago
Csjs576over 9 years ago
Css-loader4,316almost 2 years ago
JSS7,081about 2 years ago
React-styled39over 10 years ago
React-with-styles1,705over 2 years ago
Styled-jsx7,729about 2 years ago
Styled-components40,570about 2 years ago
Stylin181over 2 years ago

Awesome CSS / CSS Polyfills

Polyfill.js294over 9 years agoA library to make creating CSS polyfills much easier
Prefixfree3,816almost 5 years agoBreak free from CSS prefix hell
Fixed-sticky1,488about 9 years agoA CSS position:sticky polyfill
Selectivizr1,705over 9 years agoA JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8
PIE2,781about 8 years agoAllows Internet Explorer to recognize and render various CSS3 box decoration properties

Awesome CSS / Miscellaneous

Beautiful CSS box-shadow examplesCurated collection of 93 beautiful CSS box-shadow. Click to copy
Can I useBrowser support for CSS, HTML5 and other front-end web technologies
Flexbox Patternsby cjcenizal
Glassmorphism CSS GeneratorGenerate CSS for glassmorphism
GradientArtAn advanced CSS gradient editor with layering, design tools and free cloud storage
Live editor for CSS and LESS280about 2 years agoMagic CSS extension for Chrome, Firefox and Edge
RevengeCSS842about 2 years agoA CSS bookmarklet that uses selectors to find bad markup, displaying ugly pink error messages in comic sans serif wherever you write bad HTML
Single Div Project1,593about 5 years agoOne . Many possibilities
You Might Not Need JSCSS alternatives for common JS UI components
Xpath-to-selector12over 3 years agoConvert xpath to css selector

Awesome CSS / Podcasts

CSS PodcastUna Kravets and Adam Argyle,and development
Non Breaking Space ShowSeeking out the best,and smartest creative people on digital art,and the accompanying blog,and UX
Shop Talk ShowA live podcast with Chris Coyier and Dave Rupert about front-end web design,hosted by Anna Debenham and Brad Frost
Style Guide PodcastA 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
SyntaxA Tasty Treats Podcast for Web Developers.,typography,web technology
The Big Web ShowTopics like web publishing,is all about keeping you updated with the latest in Open Source Technology
The ChangelogThe 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 AheadConversations with world experts on changing technologies and future of the web

Awesome CSS / Twitter

Adam MorseAdvocate for users and open-source
Andrey SitnikAuthor of @Autoprefixer, and @PostCSS
Ben BriggsFinal year web technologies student. node.js, javascript, open source modules, client side optimisation, web performance
Brad FrostWeb designer, speaker, writer, consultant, musician
Chris CoyierDesigner @CodePen. Writer @Real_CSS_Tricks
Connor SearsDesigner at GitHub
CSS Animation
CSS CommitsLatest commits to @CSSWG’s public Mercurial repository
Daniel GlazmanW3C CSS Working Group Co-chairman, entrepreneur, software engineer, geek, father of two, polyglot, duck lover. Nah. Tweets are strictly mine
Dave McFarlandWeb developer, author of CSS: The Missing Manual, JavaScript & jQuery
Donovan HutchinsonDesigner, developer, writer. Occasionally blogs at , and currently building @cssanimation
Dudley StoreyWeb development writer, teacher, and speaker
Eric BidelmanEngineer at Google working on Chrome, web components, and Polymer
Evangelina FerreiraWeb Designer. Professor at @multimedial_utn HTML5 & CSS Freak. Ocassional Translator
Guy RoutledgeFront-end dev, Teacher @GA_London, Screencaster at , property snob, Foodie
Harry RobertsConsultant Front-end Architect: @google, @Etsy, @kickstarter, @BBC, @Deloitte, @FT, more
Heydon PickeringModerate consumer of rice. Also a UX designer, author, @smashingmag editor and programmer
Jonathan SnookDesigner, Developer, Writer, Speaker. I make stuff on the web. I wrote SMACSS
Kitty GiraudelNon-binary accessibility & diversity advocate, frontend developer, author
L. David BaronMozilla developer, CSS and W3C standards diplomat
Lea VerouResearch 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 OttoGitHub and Bootstrap. Formerly at Twitter. Huge nerd
Maxime ThirouinFreelance front-end vigilante, UI/UX developer
Natalie WeizenbaumTrans coder lady. Lead designer/developer of @SassCSS, working for @google on @dart_lang
Nicolas GallagherSoftware Engineer at @twitter
Nicole SullivanGEEK
Patrick HamannLover of mountains, craft beers and discovering new food
Paul LewisGoogler who noodles with code and design
Phil WaltonEngineer at Google • Open Source Advocate • Developer • Designer • Writer
Rachel AndrewWeb Developer, half of @grabaperch CMS, CSS Working Group Invited Expert
Remy SharpAll about CSS sizing units
Sara SoueidanAuthor of the @Codrops CSS Reference & Co-author of the Smashing Book #5
Scott JehlAuthor of @responsiblerwd, now on sale from @abookapart
SimonUI designer, CSS doodler
The Chris EppsteinLoves love. Hates hate. Has a kick-ass family. Writes code. Leads stylesheet tech @LinkedIn
Una KravetsFront-end @IBMDesign. Sassvocate, community builder, & handcrafter. STEMinist :) Open source all the things
Zoe M. GillenwaterWeb designer/developer specializing in CSS, RWD, UX, & accessibility
Zoltán SzőgyényiWeb developer, Co-founder at Themesberg. I'm building Glass UI
앗킨스 탭Literally Jenn Schiffer's Mom

Awesome CSS / Videos / 2019

Next-Generation Web StylingUna Kravets & Adam Argyle @ Chrome Dev Summit 2019

Awesome CSS / Videos / 2016

Component-Based Style ReusePete Hunt @ CSS conf 2016
CSS4 Grid: True Layout Finally ArrivesJen Kramer @ CSS conf 2016
Houdini: Demystifying the Future of CSS@ Google I/O 2016

Awesome CSS / Videos / 2015

Mdo-ular CSSMark Otto @ jQuery UK
CSS Architecture with SMACSSCaleb Meredith @ DevTips channel
CSS Workflow from the Ground UpJonathan Snook @ Generate conf 2015

Awesome CSS / Books

CSS: The Definitive Guide, 4th EditionVisual 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

Awesome CSS / Tutorials

30 Seconds of CSSA curated collection of useful CSS snippets you can understand in 30 seconds or less
All selectors in CSSAll selectors in CSS
Community Curated CSS ResourcesTop Recommended Resources
CSS Diner– Interactive gamified tutorial for learning selection with CSS
CSS Grid PlayGroundSimple tutorial to learn CSS Grid from Mozilla
CSS Grids videos tutorialFree video course by Wes Bos to learn CSS Grids
CSS Hands-on TutorialFree CSS hands-on tutorial by LabEx
CSS Math FunctionsUsing CSS Math for responsive design
Flexbox video tutorialFree video course by Wes Bos to learn flexbox
Organize CSS with a Modular Architecture: OOCSS, BEM, SMACSSIn-depth intro to OOCSS, BEM, SMACSS, with examples
Work With AnimationsInspecting animations

Backlinks from these awesome lists:

More related projects: