awesome-css
:art: A curated contents of amazing CSS :)
https://github.com/awesome-css-group/awesome-css
Last synced: about 10 hours ago
JSON representation
-
CSS Development at Large-Scale Websites
-
Videos :tv:
-
Editor's Draft :black_nib:
-
2019
- Next-Generation Web Styling - Una Kravets & Adam Argyle @ Chrome Dev Summit 2019.
-
2016
- Component-Based Style Reuse - Pete Hunt @ CSS conf 2016.
- CSS4 Grid: True Layout Finally Arrives - Jen Kramer @ CSS conf 2016.
- Houdini: Demystifying the Future of CSS
-
2015
- Mdo-ular CSS - Mark Otto @ jQuery UK.
- CSS Architecture with SMACSS - Caleb Meredith @ DevTips channel.
- CSS Workflow from the Ground Up - Jonathan Snook @ Generate conf 2015.
-
-
Frameworks :art:
-
Editor's Draft :black_nib:
- You can find more frameworks at "awesome-css-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.
- Butter Cake - A Modern Lightweight Front End CSS framework for faster and easier web development.
- Charts.css - CSS data visualization framework.
- Gralig - A modest, grayish CSS library.
- Halfmoon - A responsive front-end framework with a built-in dark mode.
- Inuit.css - Powerful, scalable, Sass-based, BEM, OOCSS framework.
- Numl - An HTML-based language and design system that lets you create responsive and accessible high-quality web interfaces with any look.
- Spectre.css - A lightweight, responsive and modern CSS framework.
- Tachyons - Functional CSS for humans.
- 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.
- Pure.css - A set of small, responsive CSS modules that you can use in every web project.
- Material-components-web - Modular and customizable Material Design UI components for the web.
- Hasser CSS - A lightweight (12k, not minified) but useful CSS framework with flexible Grid, Hero and more.
- Shorthand Framework - Feature rich CSS framework for the new decade.
- Strawberry - A set of common flexbox utilities focused on making your life easier and faster with nested flexboxes.
- 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.
- Tacit - CSS framework for dummies with zero skills in graphic design.
- Tailwindcss - A utility-first CSS framework for rapid UI development.
- Hasser CSS - A lightweight (12k, not minified) but useful CSS framework with flexible Grid, Hero and more.
- Gralig - A modest, grayish CSS library.
- Inuit.css - Powerful, scalable, Sass-based, BEM, OOCSS framework.
- Wing - A Minimal, Lightweight, Responsive framework.
-
-
CSS in JS
-
Editor's Draft :black_nib:
-
-
Style Guide
-
Introduction
-
Complementary Resources
-
-
CSS Working Group
-
Complementary Resources
-
Editor's Draft :black_nib:
- W3c/csswg-drafts - Mirror of CSS WG Editor Draft repository.
- W3c/css-houdini-drafts - Mirror of Houdini WG Editor repository.
-
-
Toolkits :wrench:
-
Editor's Draft :black_nib:
- Susy - Responsive layout toolkit for Sass.
-
-
Reset and Normalize
-
Editor's Draft :black_nib:
- Reset.css - CSS Tools: Reset CSS.
- Normalize - A set of CSS rules that provide better cross-browser consistency in the default styling of HTML elements.
- MiniReset.css - A tiny modern CSS reset.
- CSS Checker - Find and Reduce Similar & Duplicated CSS Scripts.
- Normalize-OpenType - Adds OpenType features—ligatures, kerning, and more—to Normalize.css.
- Unstyle.css - Specialised stylesheet for removing user agent styles, style the web with your baseline.
-
-
Code Style Guidelines :book:
-
Naming conventions & Methodologies :bulb:
-
Editor's Draft :black_nib:
-
-
Miscellaneous
-
Editor's Draft :black_nib:
- Can I use - Browser support for CSS, HTML5 and other front-end web technologies.
- Flexbox Patterns
- Glassmorphism CSS Generator - Generate CSS for glassmorphism.
- GradientArt - An advanced CSS gradient editor with layering, design tools and free cloud storage.
- You Might Not Need JS - CSS alternatives for common JS UI components.
- Beautiful CSS box-shadow examples - Curated collection of 93 beautiful CSS box-shadow. Click to copy.
- 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
- Live editor for CSS and LESS - Magic CSS extension for Chrome, Firefox and Edge.
- Single Div Project - One `<div>`. Many possibilities.
- Xpath-to-selector - Convert xpath to css selector.
-
-
Podcasts :radio:
-
Editor's Draft :black_nib:
- 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.
- 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.
- Non Breaking Space Show - Seeking out the best,and smartest creative people on digital art,and the accompanying blog,and UX.
- 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.
- Shop Talk Show - A live podcast with Chris Coyier and Dave Rupert about front-end web design,hosted by Anna Debenham and Brad Frost.
- The Big Web Show - Topics like web publishing,is all about keeping you updated with the latest in Open Source Technology.
- The Web Ahead - Conversations with world experts on changing technologies and future of the web.
-
-
Twitter :satellite:
-
Editor's Draft :black_nib:
- 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.
- Chris Coyier - Designer @CodePen. Writer @Real_CSS_Tricks.
- Dave McFarland - Web developer, author of CSS: The Missing Manual, JavaScript & jQuery.
- Mark Otto - GitHub and Bootstrap. Formerly at Twitter. Huge nerd.
- Lea Verou - Research Assistant @MIT_CSAIL, @CSSWG IE, @OReillyMedia author, Ex @W3C staff.
- Dudley Storey - Web development writer, teacher, and speaker.
- Una Kravets - Front-end @IBMDesign. Sassvocate, community builder, & handcrafter. STEMinist :) Open source all the things.
- Harry Roberts - Consultant Front-end Architect: @google, @Etsy, @kickstarter, @BBC, @Deloitte, @FT, more.
- Remy Sharp - All about CSS sizing units.
- Sara Soueidan - Author of the @Codrops CSS Reference & Co-author of the Smashing Book #5.
- Andrey Sitnik - Author of @Autoprefixer, http://easings.net and @PostCSS.
- Maxime Thirouin - Freelance front-end vigilante, UI/UX developer.
- Eric Bidelman - Engineer at Google working on Chrome, web components, and Polymer.
- Kitty Giraudel - Non-binary accessibility & diversity advocate, frontend developer, author.
- Zoltán Szőgyényi - Web developer, Co-founder at Themesberg. I'm building Glass UI.
- 앗킨스 탭 - Literally Jenn Schiffer's Mom.
-
-
Books :books:
-
2015
- CSS: The Definitive Guide, 4th Edition - Visual Presentation for the Web
- CSS: The Missing Manual
- CSS Secrets
- Every Layout: Relearn CSS Layout
- Tiny CSS Projects
-
-
Tutorials :clapper:
-
2015
- 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
- CSS Grids videos tutorial - Free video course by Wes Bos to learn CSS Grids.
- 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.
- CSS Grid PlayGround - Simple tutorial to learn CSS Grid from Mozilla.
- CSS Hands-on Tutorial - Free CSS hands-on tutorial by LabEx.
- Work With Animations - Inspecting animations.
-
-
Preprocessors :pill:
-
Editor's Draft :black_nib:
- Vanilla Extract - Generate static CSS using Typescript. Write type‑safe, locally scoped classes, variables and themes.
- LESS - Backwards compatible with CSS, and the extra features it adds use existing CSS syntax.
- PostCSS - Transforming CSS with JS plugins.
- Sass - Mature, stable, and powerful professional-grade CSS extension language.
- Stylus - Expressive, robust, feature-rich CSS language built for NodeJs.
- STYLIS - Light-weight CSS preprocessor.
- Stylus - Expressive, robust, feature-rich CSS language built for NodeJs.
-
-
CSS Polyfills
-
Editor's Draft :black_nib:
- PIE - Allows Internet Explorer to recognize and render various CSS3 box decoration properties.
- 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.
- Polyfill.js - A library to make creating CSS polyfills much easier.
-
-
Parsers :mag:
-
Editor's Draft :black_nib:
- CSSTree - Detailed CSS parser with syntax validator.
- Rework - Plugin framework for CSS preprocessing in Node.js.
- Stylecow - Modern CSS for all browsers.
- Gonzales PE - CSS parser with support for preprocessors.
- CSSOM - CSS Object Model implemented in pure JavaScript.
- Mensch - A decent CSS parser.
- ParserLib - CSSLint/parser-lib.
-
-
Style Guide Generators :slot_machine:
-
Editor's Draft :black_nib:
-
Programming Languages
Categories
Twitter :satellite:
55
Frameworks :art:
28
Naming conventions & Methodologies :bulb:
18
Style Guide
13
Tutorials :clapper:
12
CSS in JS
12
CSS Development at Large-Scale Websites
11
Podcasts :radio:
11
Code Style Guidelines :book:
11
Videos :tv:
10
Miscellaneous
10
Preprocessors :pill:
7
Parsers :mag:
7
Reset and Normalize
6
Style Guide Generators :slot_machine:
6
CSS Polyfills
5
Books :books:
5
Introduction
3
CSS Working Group
3
Toolkits :wrench:
1
Sub Categories
Keywords
css
24
css-in-js
6
css-framework
6
css3
5
javascript
4
framework
3
scss
3
react
3
parser
3
css-parser
3
components
2
html
2
cssinjs
2
sass
2
stylesheets
2
web
2
ast
2
css-modules
2
responsive
2
awesome
2
awesome-list
2
css-grid
2
stylesheet
2
front-end
2
css-flexbox
2
js
1
jss
1
fluent
1
microsoft
1
office-ui-fabric
1
react-components
1
reset
1
material-components
1
material-design
1
conference-videos
1
conference-talk
1
postcss
1
fast
1
performance
1
talks
1
video
1
collection
1
learning-resources
1
list
1
jsconf
1
custom-variables
1
styled-components
1
aphrodite
1
cssconf
1
css-variables
1