liuliangsir/awesome-css

:page_facing_up: A curated list of CSS lists

Awesome CSS

A curated list of CSS lists

• Awesome CSS
  • Preprocessors
  • Framework
  • Structure
  • CSS Development at Large-Scale Websites
  • Code Style Guideline
  • Style Guide
  • Naming conventions & Methodologies
  • Resources
• Resources
  • Podcasts
  • Twitter
  • Videos
• Contributing
• License

Preprocessors

Build CSS faster

• Sass - Mature, stable, and powerful professional grade CSS extension language.
• LESS - Backwards compatible with CSS and the extra features it adds use existing CSS syntax.
• Stylus - Expressive, robust, feature-rich CSS language built for nodejs.
• YACP - Yet Another CSS Preprocessor.
• GCSS - Pure Go CSS Preprocessor.
• PCSS - Pure Python CSS Preprocessor.
• PostCSS - Transforming CSS with JS plugins.

Here is also CSS preprocessors curated list by Github.

Frameworks

• 960 Grid System - An effort to streamline web development workflow.
• Blueprint - CSS framework who gives you an easy-to-use grid system, sensible typography, useful plugins and stylesheet for printing.
• Bootstrap - Most popular HTML, CSS, and JS framework.
• inuit.css - Powerful, scalable, Sass-based, BEM, OOCSS framework.
• Foundation - advanced responsive front-end framework.
• Material Design Lite - Great framework to make cool Material Design websites.
• Materialize - A modern responsive front-end framework based on Material Design.
• Semantic UI - Powerful framework that use friendly-human html.
• Skeleton - A dead simple, responsive boilerplate.
• UIkit - A lightweight and modular front-end framework.
• unsemantic - Fluid grid for mobile, tablet, and desktop.

Toolkits

• Bourbon - simple and lightweight mixin library for Sass.
• Corpus - Yet another CSS toolkit.
• Susy - Responsive layout toolkit for Sass.

CSS Structure

• RSCSS - Reasonable Standard for CSS Stylesheet Structure.
• ITCSS - A sane, scalable, managed CSS architecture for large UI projects.

CSS Development at Large-Scale Websites

• GitHub's CSS by Mark Otto.
• CodePen's CSS by Chris Coyier.
• Lonely Planet by Ian Feather.
• CSS at Groupon by Mike Aparicio.
• Buffer’s CSS by Brian Lovin.
• CSS AT HOOTSUITE by Steve Mynett.
• Refining The Way We Structure Our CSS At Trello by Bobby Grace.
• Bugsnag's CSS Architecture by Max Luster.
• How we do CSS at Ghost by Paul Davis.
• Medium’s CSS is actually pretty f***ing good. by Jacob Thornton.

Code Style Guideline

• idiomatic CSS by Nicolas Gallagher.
• CSS Guidelines by Harry Roberts.
• Sass Guidelines by Hugo Giraudel.
• Code Guide by Mark Otto.
• ThinkUp CSS Style Guide by ThinkUp.
• Google HTML/CSS Style Guide by Google.
• WordPress CSS Coding Standards by WorldPress.

Style Guide

• GitHub CSS Style Guide by Github.
• Style Guide by Starbucks.
• Patterns by MailChimp.
• SASS Style Guide by Sass team.
• Design Elements by lonely planet.
• Website Style Guide Resources by Awesome people.

Naming conventions & Methodologies

• Atomic OOBEMITSCSS
• BEM
• SMACSS
• Point North
• ITCSS
• OOCSS
• Title CSS
• idiomatic-css
• Atomic Design
• SUIT CSS
• Kickoff CSS

References

• scalable-css-reading-list

Resources

Podcasts

Something to listen to while programming.

• Shop Talk Show - A live podcast with Chris Coyier and Dave Rupert about front end web design, development, and UX.
• Style Guide Podcast - A small batch series of interviews on Style Guides, hosted by Anna Debenham and Brad Frost.
• The Big Web Show - topics like web publishing, art direction, content strategy, typography, web technology, and more. It's everything web that matters.
• The Web Ahead - Conversations with world experts on changing technologies and future of the web.
• Non Breaking Space Show - Seeking out the best, brightest, and smartest creative people on digital art, design, and development.
• The Changelog - The tagline for the Changelog says it all: “Open Source moves fast. Keep up.” This podcast, and the accompanying blog, is all about keeping you updated with the latest in Open Source Technology.

Twitter

Active accounts to follow.

• CSS Animation
• Andrey Sitnik - Author of @Autoprefixer, http://easings.net and @PostCSS.
• Evangelina Ferreira - Web Designer. Professor at @multimedial_utn HTML5 & CSS Freak. Ocassional Translator.
• Sara Soueidan - Author of the @Codrops CSS Reference & Co-author of the Smashing Book #5.
• Hugo Giraudel - CSS goblin & Sass hacker at @edenspiekermann.
• Guy Routledge - Front-end dev, Teacher @GA_London, Screencaster at http://www.atozcss.com, property snob, Foodie.
• Heydon Pickering - Moderate consumer of rice. Also a UX designer, author, @smashingmag editor and programmer.
• Adam Morse - Advocate for users and open-source.
• Donovan Hutchinson - Designer, developer, writer. Occasionally blogs at http://Hop.ie , and currently building @cssanimation.
• CSS Commits - Latest commits to @CSSWG’s public Mercurial repository.
• Scott Jehl - Author of @responsiblerwd, now on sale from @abookapart.
• Dudley Storey - Web development writer, teacher, and speaker.
• Zoe M. Gillenwater - Web designer/developer specializing in CSS, RWD, UX, & accessibility.
• Ben Briggs - Final year web technologies student. node.js, javascript, open source modules, client side optimisation, web performance.
• Paul Lewis - Googler who noodles with code and design.
• Thierry Koblentz - CSSer @ Yahoo Only Tweeting Tech.
• Nicolas Gallagher - Software Engineer at @twitter.
• Harry Roberts- Consultant Front-end Architect: @google, @Etsy, @kickstarter, @BBC, @Deloitte, @FT, more.
• Phil Walton - Engineer at Google • Open Source Advocate • Developer • Designer • Writer.
• 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.
• Una Kravets - Front-end @IBMDesign. Sassvocate, community builder, & handcrafter. STEMinist :) Open source all the things!
• Chris Coyier - Designer @CodePen. Writer @Real_CSS_Tricks.
• Nicole Sullivan - GEEK!
• Eric Bidelman - Engineer at Google working on Chrome, web components, and Polymer.
• Patrick Hamann - Lover of mountains, craft beers and discovering new food.
• Dave McFarland - Web developer, author of CSS: The Missing Manual, JavaScript & jQuery.
• L. David Baron - Mozilla developer, CSS and W3C standards diplomat.
• Daniel GlazmanW3C CSS Working Group Co-chairman, entrepreneur, software engineer, geek, father of two, polyglot, duck lover. Nah. Tweets are strictly mine.
• The Chris Eppstein - Loves love. Hates hate. Has a kick-ass family. Writes code. Leads stylesheet tech @LinkedIn.
• 앗킨스 탭 - Literally Jenn Schiffer's Mom.
• Natalie Weizenbaum - Trans coder lady. Lead designer/developer of @SassCSS, working for @google on @dart_lang.
• Brad Frost - Web designer, speaker, writer, consultant, musician.
• Maxime Thirouin - Freelance front-end vigilante, UI/UX developer.
• Mark Otto - GitHub and Bootstrap. Formerly at Twitter. Huge nerd.
• Simon - UI designer, CSS doodler.
• Connor Sears - Designer at GitHub.
• Remy Sharp - All about CSS sizing units.
• Jonathan Snook - Designer, Developer, Writer, Speaker. I make stuff on the web. I wrote SMACSS.

Videos

A useful list of must-watch videos. This list was taken from AllThingsSmitty/must-watch-css of 908a28. I told him on Twitter. Thank you so much.

###2015

1. mdo-ular CSS: Mark Otto, jQuery UK 30:06.

###2014

1. What Is a CSS Framework Anyway?: Harry Roberts, Industry Conf 48:48.
2. CSS Is a Mess: Jonathan Snook, Beyond Tellerand 53:49.
3. 10 Commandments for Efficient CSS Architecture: Kushagra Gour, CSSConf.Asia 35:55.
4. Slaying the Dragon: How to Refactor CSS for Maintainability: Alicia Liu, Front-Trends 33:21.
5. CSS in Your Pocket - Mobile CSS Tips from the Trenches: Angelina Fabbro, CSSConf.US 34:19.
6. Styling and Animating Scalable Vector Graphics with CSS: Sara Soueidan, CSSConf.EU 29:16.
7. Play Nice With CSS Tools and Methodologies: Brad Westfall, HTML5DevConf 42:47.
8. CSS and the Critical Path: Patrick Hamann, CSSConf.EU 33:42.
9. All the Right Moves: How to Put Your UI in Motion: Val Head, Multi-Mania 45:49.
10. Present and Future of CSS Layout: Tab Atkins, CSS Day 49:31.
11. Thinking Beyond "Scalable CSS": Nicolas Gallagher, dotCSS 28:46.
12. Web Components & the Future of CSS: Philip Walton, SFHTML5 40:02.
13. CSS Performance Tooling: Addy Osmani, CSSConf.EU 46:27.
14. 3.14 Things I Didn’t Know About CSS: Mathias Bynens, CSS Day 45:35.
15. Effortless Style: Heydon Pickering, CSS Day 49:51.
16. CSS: Yawn to Yay! Kyle Simpson, Front-Trends 39:04.

###2013

1. When Bootstrap Attacks: Pamela Fox, CSSConf.US 28:48.
2. CSS in the 4th Dimension: Lea Verou, JSConf.Asia 44:49.
3. Automated CSS Testing: Jakob Mattsson, JSConf.Asia 42:07.
4. CSSConf.EU Keynote: Nicole Sullivan, CSSConf.EU 20:57.
5. CSS Application Architecture: Nicolas Gallagher, SmashingConf 38:36.
6. Realigning & Refactoring UI: Jina Bolton, SassConf 48:08.
7. Normalizing Designs for Better Quality CSS: Harry Roberts, CSSConf.EU 43:40.
8. Automating the Removal of Unused CSS: Addy Osmani, Velocity Europe Conference 5:57.
9. The Humble Border-Radius: Lea Verou, Future of Web Design 37:07.
10. The Mind-blowing Power of Sass 3.3: Chris Eppstein, CSSConf.EU 38:54.
11. Front-End Tools for the Young Developer: Christian Vuerings, SF HTML5 User Group 14:16.
12. Maths-Powered Transforms for Creating 3D Shapes: Ana-Maria Tudor, CSSConf.EU 30:27.
13. Sass and OOCSS Sitting in a Tree K-I-S-S-I-N-G: Nicole Sullivan, TXJS 27:50.
14. CSS Levels Up: Angelina Fabbro, CSSConf.EU 31:38.
15. Architecting Scalable CSS: Harry Roberts, Beyond Tellerand 41:57.
16. More CSS Secrets: Another 10 Things You May Not Know about CSS: Lea Verou, W3Conf 60:39.
17. Atomic Cascading Style Sheets: Renato Iwashima, HTML5DevConf 52:33.

###2012

1. Open Source Tools and Libraries for Designers: Julie Ann Horvath, HTML5DevConf 29:39.
2. GitHub's CSS Performance: Jon Rohan, CSS Dev Conf 40:50.

###2010

1. Handcrafted CSS: Dan Cederholm, Build Conference 44:29.
2. The Top 5 Mistakes of Massive CSS: Nicole Sullivan, Build Conference 37:53.

Contributing

Contributions are very welcome!

Please have a look at CONTRIBUTING for guidelines.

License

To the extent possible under law, Sota Yamashita has waived all copyright and related or neighboring rights to this work.