🔝
Awesome CSS
:art: A curated contents of amazing CSS :)
This page lists names, links and short descriptions. The original list on GitHub is the source and belongs to its authors.
Introduction >Complementary Resources
CSS Working Group >Editor's Draft
W3c/csswg-drafts
Mirror of CSS WG Editor Draft repository.
W3c/css-houdini-drafts
Mirror of Houdini WG Editor repository.
Parsers
CSSOM
CSS Object Model implemented in pure JavaScript.
CSSTree
Detailed CSS parser with syntax validator.
Gonzales PE
CSS parser with support for preprocessors.
Mensch
A decent CSS parser.
ParserLib
CSSLint/parser-lib.
PostCSS
Transforming styles with JS plugins.
Rework
Plugin framework for CSS preprocessing in Node.js.
Stylecow
Modern CSS for all browsers.
Preprocessors
LESS
Backwards compatible with CSS, and the extra features it adds use existing CSS syntax.
PostCSS
Transforming styles with JS plugins.
Sass
Mature, stable, and powerful professional-grade CSS extension language.
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.
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.
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.
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.
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.
Shorthand Framework
Feature rich CSS framework for the new decade.
Spectre.css
A lightweight, responsive and modern CSS framework.
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.
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.
You can find more frameworks at "awesome-css-frameworks"
CSS frameworks
Toolkits
Bourbon
A simple and lightweight mixin library for Sass.
Reset and Normalize
CSS Checker
Find and Reduce Similar & Duplicated CSS Scripts.
MiniReset.css
A tiny modern CSS reset.
Normalize-OpenType
Adds OpenType features—ligatures, kerning, and more—to Normalize.css.
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.
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.
Unstyle.css
Specialised stylesheet for removing user agent styles, style the web with your baseline.
CSS Development at Large-Scale Websites
Bugsnag's CSS Architecture
by Max Luster
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
Scalable-css-reading-list
Collected dispatches from The Quest for Scalable CSS.
Code Style Guidelines
Code Guide
by Mark Otto
CSS Guidelines
by Harry Roberts
CSS Styleguide
by Guilherme Rv Coelho
Dropbox (S)CSS Style Guide
by Dropbox
Google HTML/CSS Style Guide
by Google
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
Style Guide
AUI
by Atlassian Design
Design Elements
by lonely planet
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
Style Guide Generators
Hologram
A markdown based documentation system for style guides. It parses comments in your CSS and helps you turn them into a beautiful style guide.
Naming conventions & Methodologies
SUIT CSS
, by Nicolas Gallagher
CSS in JS
Aphrodite
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation
JSS
JSS is an authoring tool for CSS which uses JavaScript as a host language.
Styled-components
(👨💻 360 · 🔀 2.5K · 📦 2.4M · 📋 2.9K - 8% open · ⏱️ 09.05.2024):
Stylin
Transform CSS and SCSS modules into React components.
CSS Polyfills
Polyfill.js
A library to make creating CSS polyfills much easier.
Prefixfree
Break free from CSS prefix hell.
Fixed-sticky
A CSS position:sticky polyfill.
Selectivizr
A JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8.
PIE
Allows Internet Explorer to recognize and render various CSS3 box decoration properties.
Miscellaneous
Beautiful CSS box-shadow examples
Curated collection of 93 beautiful CSS box-shadow. Click to copy.
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.
Live editor for CSS and LESS
Magic CSS extension for Chrome, Firefox and Edge.
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
Single Div Project
One <div>. Many possibilities.
You Might Not Need JS
CSS alternatives for common JS UI components.
Xpath-to-selector
Convert xpath to css selector.
Podcasts
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.
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.
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 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.
Videos
I told him on Twitter
. I appreciate his valuable efforts.*
Videos >2019
Next-Generation Web Styling
Una Kravets & Adam Argyle @ Chrome Dev Summit 2019.
Videos >2016
Component-Based Style Reuse
page_facing_up: transcript :watch: 37:24 - Pete Hunt @ CSS conf 2016.
CSS4 Grid: True Layout Finally Arrives
page_facing_up: transcript :watch: 29:27 - Jen Kramer @ CSS conf 2016.
Houdini: Demystifying the Future of CSS
watch: 36:58 @ Google I/O 2016.
Videos >2015
Mdo-ular CSS
watch: 30:06 - Mark Otto @ jQuery UK.
CSS Architecture with SMACSS
watch: 30:15 - Caleb Meredith @ DevTips channel.
CSS Workflow from the Ground Up
watch: 46:06 - Jonathan Snook @ Generate conf 2015.
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.
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.
Maintainers
@sotayamashita
, @Rishabh04-02 and You!
Related lists in Front-End Development
See categoryAwesome Vue
vuejs/awesome-vue
🎉 A curated list of awesome things related to Vue.js
Awesome DESIGN.md
VoltAgent/awesome-design-md
A collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.
Awesome Angular
PatrickJS/awesome-angular
:page_facing_up: A curated list of awesome Angular resources
Awesome Blazor
AdrienTorris/awesome-blazor
Resources for Blazor, a .NET web framework using C#/Razor and HTML that runs in the browser with WebAssembly.
Must-Watch CSS
AllThingsSmitty/must-watch-css
CSS talks you have to see covering CSS Grid, flexbox, custom variables, performance, frameworks, tooling, and more! 📺
Awesome React Native
jondot/awesome-react-native
Awesome React Native components, news, tools, and learning material!