/awesome-css

:page_facing_up: A curated list of CSS lists

Awesome CSS Awesome Build Status

A curated list of CSS lists

Preprocessors

Build CSS faster

  • GCSS - Pure Go CSS Preprocessor.
  • LESS - Backwards compatible with CSS and the extra features it adds use existing CSS syntax.
  • Myth - Pure CSS without having to worry about slow browser support.
  • PCSS - Pure Python CSS Preprocessor.
  • 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.
  • YACP - Yet Another CSS Preprocessor.

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.
  • Pure.css - A set of small, responsive CSS modules that you can use in every web project.
  • Scooter - SCSS framework built to provide base styles, CSS components, and rapid static prototyping for Dropbox.
  • 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

  • Basscss - a lightweight collection of base element styles and immutable utilities.
  • 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.

Reset and Normalize

  • Normalize - A set of CSS rules that provide better cross-browser consistency in the default styling of HTML elements.
  • Normalize-OpenType - Adds OpenType features—ligatures, kerning, and more—to Normalize.css.
  • Reset - A set of CSS rules that resets the styling of all HTML elements to a consistent baseline.
  • 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

Code Style Guideline

Style Guide

Here is also great resource to understand. Website style guide resource

Naming conventions & Methodologies

CSS in JS

Here is CSS in JS techniques comparison

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 - selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8.
  • PIE - A behavior for Internet Explorer allowing it to recognize and render various CSS3 box decoration properties.

References

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.
  2. CSS Architecture with SMACSS: Caleb Meredith, DevTips channel 30:15.
  3. CSS Workflow from the Ground Up: Jonathan Snook, Generate conf 2015 46: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

CC0

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