awesome-css
:art: A curated contents of amazing CSS :)
https://github.com/awesome-css-group/awesome-css
Last synced: 1 day ago
JSON representation
-
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.
-
-
Frameworks :art:
-
Editor's Draft :black_nib:
- Butter Cake - A Modern Lightweight Front End CSS framework for faster and easier web development.
- AgnosticUI - Accessible CSS component primitives that also work with React, Vue 3, Svelte, and Angular.
- Awsm.css - Simple CSS library for semantic HTML markup.
- Bonsai - A complete Utility First CSS Framework for less than 50kb.
- Bootstrap - The most popular HTML, CSS, and JS framework.
- Bulma - A modern CSS framework based on Flexbox. Also has Sass import for modification.
- Charts.css - CSS data visualization framework.
- Foundation - advanced responsive front-end 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.
- 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.
- Semantic UI - Powerful framework that uses human-friendly HTML.
- Spectre.css - A lightweight, responsive and modern CSS framework.
- Tachyons - Functional CSS for humans.
- 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.
- You can find more frameworks at "awesome-css-frameworks"
- 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.
- Foundation - advanced responsive front-end framework.
- Materialize - A modern responsive front-end framework based on Material Design.
- Milligram - A minimalist CSS framework.
- 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.
- Tailwindcss - A utility-first CSS framework for rapid UI development.
- UIkit - A lightweight and modular front-end framework.
- Unsemantic - Fluid grid for mobile, tablet, and desktop.
- Foundation - advanced responsive front-end framework.
- Semantic UI - Powerful framework that uses human-friendly HTML.
- 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.
- Hasser CSS - A lightweight (12k, not minified) but useful CSS framework with flexible Grid, Hero and more.
- Material-components-web - Modular and customizable Material Design UI components for the web.
- Pure.css - A set of small, responsive CSS modules that you can use in every web project.
-
-
Toolkits :wrench:
-
Reset and Normalize
-
Editor's Draft :black_nib:
- Reset.css - CSS Tools: Reset CSS.
- Sanitize.css - A set of CSS rules that style with today’s best practices out-of-the-box.
- 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.
-
-
CSS Development at Large-Scale Websites
-
Editor's Draft :black_nib:
- Bugsnag's CSS Architecture
- CSS at BBC Sport
- CSS AT HOOTSUITE
- GitHub's CSS
- How we do CSS at Ghost
- Lonely Planet
- Medium’s CSS is actually pretty good.
- Scalable-css-reading-list
- Bugsnag's CSS Architecture
- CSS at BBC Sport
- CSS AT HOOTSUITE
- GitHub's CSS
- Lonely Planet
- Refining The Way We Structure Our CSS At Trello
- Refining The Way We Structure Our CSS At Trello
-
-
Code Style Guidelines :book:
-
Naming conventions & Methodologies :bulb:
-
Editor's Draft :black_nib:
-
-
CSS in JS
-
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.
-
-
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.
- 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.
- 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 Web Ahead - Conversations with world experts on changing technologies and future of the web.
- Non Breaking Space Show - Seeking out the best,and smartest creative people on digital art,and the accompanying blog,and UX.
- The Big Web Show - Topics like web publishing,is all about keeping you updated with the latest in Open Source Technology.
- Non Breaking Space Show - Seeking out the best,and smartest creative people on digital art,and the accompanying blog,and UX.
- 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.
-
-
Twitter :satellite:
-
Editor's Draft :black_nib:
- The Chris Eppstein - Loves love. Hates hate. Has a kick-ass family. Writes code. Leads stylesheet tech @LinkedIn.
- 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
- 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.
- 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.
- 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.
- 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.
- CSS Commits - Latest commits to @CSSWG’s public Mercurial repository.
- Manoela Ilic - ...aka Mary Lou @codrops ༶ CSS & HTML are my crayons ༶ Interested in Cognitive Science, AI, HCI, UI Design & Astrophysics ༶ Digital nomad.
- Phil Walton - Engineer at Google • Open Source Advocate • Developer • Designer • Writer.
- Zoltán Szőgyényi - Web developer, Co-founder at Themesberg. I'm building Glass UI.
- 앗킨스 탭 - Literally Jenn Schiffer's Mom.
-
-
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.
-
-
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
- CSS: The Definitive Guide, 4th Edition - Visual Presentation for the Web
- CSS: The Missing Manual
- CSS Secrets
-
-
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.
- 30 Seconds of CSS - A curated collection of useful CSS snippets you can understand in 30 seconds or less.
- Work With Animations - Inspecting animations.
-
-
Preprocessors :pill:
-
Editor's Draft :black_nib:
- STYLIS - Light-weight CSS preprocessor.
- LESS - Backwards compatible with CSS, and the extra features it adds use existing CSS syntax.
- Sass - Mature, stable, and powerful professional-grade CSS extension language.
- Stylus - Expressive, robust, feature-rich CSS language built for NodeJs.
- PostCSS - Transforming CSS with JS plugins.
- STYLIS - Light-weight CSS preprocessor.
-
-
Style Guide Generators :slot_machine:
-
Editor's Draft :black_nib:
-
-
Parsers :mag:
-
Editor's Draft :black_nib:
- 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.
- Rework - Plugin framework for CSS preprocessing in Node.js.
- Stylecow - Modern CSS for all browsers.
-
Programming Languages
Categories
Twitter :satellite:
40
Frameworks :art:
39
Naming conventions & Methodologies :bulb:
19
CSS Development at Large-Scale Websites
15
Style Guide
14
Code Style Guidelines :book:
13
Tutorials :clapper:
11
Podcasts :radio:
11
Videos :tv:
9
Books :books:
8
Parsers :mag:
7
Preprocessors :pill:
6
Miscellaneous
5
Reset and Normalize
4
CSS in JS
4
Toolkits :wrench:
3
Introduction
3
CSS Working Group
3
Style Guide Generators :slot_machine:
1
Sub Categories
Keywords
css
12
css-framework
3
framework
3
css-parser
3
parser
3
awesome
2
awesome-list
2
scss
2
css-grid
2
css3
2
javascript
2
ast
2
stylesheet
2
front-end
2
web
2
ui
1
video
1
talks
1
performance
1
learning-resources
1
jsconf
1
custom-variables
1
cssconf
1
web-development
1
css-variables
1
css-performance
1
flexible
1
css-flexbox
1
conference-videos
1
conference-talk
1
styled-components
1
react
1
css-in-js
1
flexible-css-framework
1
list
1
lite
1
skeleton-css
1
material-components
1
collection
1
material-design
1
postcss
1
flexbox
1
cirrus
1
card
1
website
1
font
1
minimal
1
responsive
1
stylesheet-language
1
language
1