/awesome-css

:thumbsup: Awesome - A curated contents of amazing CSS Ever :)

Awesome CSS

Awesome Travis Build Status PRs & Issues Welcome

A curated list of awesome frameworks, style guide and other cool nuggets for the amazing CSS.

Contents

CSS Working Group

CSS Working Group is defined CSS specifications which travel through the thier process they achieve various maturity levels. If you would like to familier with CSS, visit CSS Working Group Page

Editor's Draft ✒️

Editor's drafts of CSS specifications

Parser 🔍

  • CSSOM - CSS Object Model implemented in pure JavaScript
  • CSSTree - Detailed CSS parser with syntax validator
  • Gonzales - Fast CSS parser
  • Gonzales PE - CSS parser with support of 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 to all browsers

⇧ back to top

Preprocessors 💊

Build CSS faster

  • 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.

Find more CSS preprocessors on wiki

⇧ back to top

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 - The most popular HTML, CSS, and JS framework.
  • Bulma - A modern CSS framework based on Flexbox.
  • 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.
  • Milligram - A minimalist CSS framework.
  • 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.
  • Wing - A Minimal, Lightweight, Responsive framework.
  • UIkit - A lightweight and modular front-end framework.
  • unsemantic - Fluid grid for mobile, tablet, and desktop.
  • Tachyons - Functional css for humans.
  • Pills - A simple, responsive, and tiny CSS grid for humans.

⇧ back to top

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.

⇧ back to top

CSS Structure

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

⇧ back to top

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.
  • MiniReset.css - A tiny modern CSS reset
  • 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

⇧ back to top

CSS Development at Large-Scale Websites

⇧ back to top

Code Style Guideline 📖

⇧ back to top

Style Guide

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

⇧ back to top

Style Guide Generators 🎰

⇧ back to top

Naming conventions & Methodologies 💡

⇧ back to top

CSS in JS

Here is CSS in JS techniques comparison

⇧ back to top

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.

⇧ back to top

Miscellaneous

⇧ back to top

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.

⇧ back to top

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.

⇧ back to top

Videos 📺

A good study videos for CSS Must Watch Videos. Some items are quoted from AllThingsSmitty/must-watch-css. I told him on Twitter. I appreciate his valuable efforts.

2016

  1. Component-Based Style Reuse 📄 transcript ⌚ 37:24 - Pete Hunt @ CSS conf 2016
  2. CSS4 Grid: True Layout Finally Arrives 📄 transcript ⌚ 29:27 - Jen Kramer @ CSS conf 2016
  3. Houdini: Demystifying the Future of CSS ⌚ 36:58 @ Google I/O 2016

2015

  1. mdo-ular CSS ⌚ 30:06 - Mark Otto @ jQuery UK.
  2. CSS Architecture with SMACSS ⌚ 30:15 - Caleb Meredith @ DevTips channel.
  3. CSS Workflow from the Ground Up ⌚ 46:06 - Jonathan Snook @ Generate conf 2015 .

View more about videos in wiki

⇧ back to top

Tutorials

  • CSS Diner – interactive gamified tutorial for learning selection with CSS
  • CSS 101 – detailed interactive tutorial with a lot of additional information (e.g. spec excerpts)

⇧ back to top

License

CC0

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