687 lines
33 KiB
HTML
687 lines
33 KiB
HTML
<h1
|
||
id="awesome-css-awesomeawesome-badgeawesome-link-travis-build-statustravis-badgetravis-link">Awesome
|
||
CSS <a href="https://github.com/sindresorhus/awesome"><img
|
||
src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg"
|
||
alt="Awesome" /></a> <a
|
||
href="https://travis-ci.org/awesome-css-group/awesome-css"><img
|
||
src="https://travis-ci.org/awesome-css-group/awesome-css.svg?branch=master"
|
||
alt="Travis Build Status" /></a></h1>
|
||
<blockquote>
|
||
<p>/* A curated list of awesome frameworks, style guides, and other cool
|
||
nuggets for writing amazing CSS. */</p>
|
||
</blockquote>
|
||
<h2 id="introduction">Introduction</h2>
|
||
<h3 id="motivation">Motivation</h3>
|
||
<p>This document is a curated list of frameworks, style guides, and cool
|
||
nuggets of information for writing awesome CSS. It does not contain
|
||
resources to learn CSS.</p>
|
||
<h3 id="complementary-resources">Complementary Resources</h3>
|
||
<p>If you’re struggling with something CSS-related, look for answers
|
||
within the following resources:</p>
|
||
<ul>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS - MDN
|
||
- Mozilla</a></li>
|
||
<li><a href="https://www.reddit.com/r/css/">Reddit (CSS)</a></li>
|
||
<li><a
|
||
href="https://stackoverflow.com/questions/tagged/css">StackOverflow
|
||
(CSS)</a></li>
|
||
</ul>
|
||
<!-- Used for the "back to top" links within the document -->
|
||
<div id="contents">
|
||
|
||
</div>
|
||
<h2 id="table-of-contents">Table of Contents</h2>
|
||
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
|
||
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
|
||
<ul>
|
||
<li><a href="#css-working-group">CSS Working Group</a>
|
||
<ul>
|
||
<li><a href="#editors-draft-black_nib">Editor’s Draft
|
||
:black_nib:</a></li>
|
||
</ul></li>
|
||
<li><a href="#parsers-mag">Parsers :mag:</a></li>
|
||
<li><a href="#preprocessors-pill">Preprocessors :pill:</a></li>
|
||
<li><a href="#frameworks-art">Frameworks :art:</a></li>
|
||
<li><a href="#toolkits-wrench">Toolkits :wrench:</a></li>
|
||
<li><a href="#reset-and-normalize">Reset and Normalize</a></li>
|
||
<li><a href="#css-development-at-large-scale-websites">CSS Development
|
||
at Large-Scale Websites</a></li>
|
||
<li><a href="#code-style-guidelines-book">Code Style Guidelines
|
||
:book:</a></li>
|
||
<li><a href="#style-guide">Style Guide</a></li>
|
||
<li><a href="#style-guide-generators-slot_machine">Style Guide
|
||
Generators :slot_machine:</a></li>
|
||
<li><a href="#naming-conventions--methodologies-bulb">Naming conventions
|
||
& Methodologies :bulb:</a></li>
|
||
<li><a href="#css-in-js">CSS in JS</a></li>
|
||
<li><a href="#css-polyfills">CSS Polyfills</a></li>
|
||
<li><a href="#miscellaneous">Miscellaneous</a></li>
|
||
<li><a href="#podcasts-radio">Podcasts :radio:</a></li>
|
||
<li><a href="#twitter-satellite">Twitter :satellite:</a></li>
|
||
<li><a href="#videos-tv">Videos :tv:</a>
|
||
<ul>
|
||
<li><a href="#2019">2019</a></li>
|
||
<li><a href="#2016">2016</a></li>
|
||
<li><a href="#2015">2015</a></li>
|
||
</ul></li>
|
||
<li><a href="#books-books">Books :books:</a></li>
|
||
<li><a href="#tutorials-clapper">Tutorials :clapper:</a></li>
|
||
<li><a href="#maintainers">Maintainers</a></li>
|
||
<li><a href="#contribute">Contribute</a></li>
|
||
</ul>
|
||
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
|
||
<h2 id="css-working-group">CSS Working Group</h2>
|
||
<p>The CSS Working Group creates and defines CSS specifications. These
|
||
specifications are assigned <a
|
||
href="https://www.w3.org/2005/10/Process-20051014/tr#maturity-levels">maturity
|
||
levels</a> as they move through the design process. If you would like to
|
||
learn more, visit <a href="https://www.w3.org/Style/CSS/">CSS Working
|
||
Group Page</a>.</p>
|
||
<h3 id="editors-draft-black_nib">Editor’s Draft :black_nib:</h3>
|
||
<p><em>Editor’s drafts of CSS specifications</em></p>
|
||
<ul>
|
||
<li><a href="https://github.com/w3c/csswg-drafts">W3c/csswg-drafts</a> -
|
||
Mirror of CSS WG Editor Draft repository.</li>
|
||
<li><a
|
||
href="https://github.com/w3c/css-houdini-drafts">W3c/css-houdini-drafts</a>
|
||
- Mirror of Houdini WG Editor repository.</li>
|
||
</ul>
|
||
<h2 id="parsers-mag">Parsers :mag:</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/NV/CSSOM">CSSOM</a> - CSS Object Model
|
||
implemented in pure JavaScript.</li>
|
||
<li><a href="https://github.com/csstree/csstree">CSSTree</a> - Detailed
|
||
CSS parser with syntax validator.</li>
|
||
<li><a href="https://github.com/tonyganch/gonzales-pe">Gonzales PE</a> -
|
||
CSS parser with support for preprocessors.</li>
|
||
<li><a href="https://github.com/brettstimmerman/mensch">Mensch</a> - A
|
||
decent CSS parser.</li>
|
||
<li><a href="https://github.com/CSSLint/parser-lib">ParserLib</a> -
|
||
CSSLint/parser-lib.</li>
|
||
<li><a href="https://github.com/postcss/postcss">PostCSS</a> -
|
||
Transforming styles with JS plugins.</li>
|
||
<li><a href="https://github.com/reworkcss/rework">Rework</a> - Plugin
|
||
framework for CSS preprocessing in Node.js.</li>
|
||
<li><a href="https://github.com/stylecow/stylecow">Stylecow</a> - Modern
|
||
CSS for all browsers.</li>
|
||
</ul>
|
||
<p><sub><a href="#contents">⇧ back to top</a></sub></p>
|
||
<h2 id="preprocessors-pill">Preprocessors :pill:</h2>
|
||
<p><em>Write CSS faster</em></p>
|
||
<ul>
|
||
<li><a href="https://github.com/less/less.js">LESS</a> - Backwards
|
||
compatible with CSS, and the extra features it adds use existing CSS
|
||
syntax.</li>
|
||
<li><a href="https://github.com/postcss/postcss">PostCSS</a> -
|
||
Transforming CSS with JS plugins.</li>
|
||
<li><a href="https://github.com/sass/sass">Sass</a> - Mature, stable,
|
||
and powerful professional-grade CSS extension language.</li>
|
||
<li><a href="https://github.com/thysultan/stylis.js">STYLIS</a> -
|
||
Light-weight CSS preprocessor.</li>
|
||
<li><a href="http://learnboost.github.io/stylus/">Stylus</a> -
|
||
Expressive, robust, feature-rich CSS language built for NodeJs.</li>
|
||
<li><a href="https://vanilla-extract.style/">Vanilla Extract</a> -
|
||
Generate static CSS using Typescript. Write type‑safe, locally scoped
|
||
classes, variables and themes.</li>
|
||
</ul>
|
||
<p><sub><a href="#contents">⇧ back to top</a></sub></p>
|
||
<h2 id="frameworks-art">Frameworks :art:</h2>
|
||
<ul>
|
||
<li><a href="https://www.agnosticui.com/">AgnosticUI</a> - Accessible
|
||
CSS component primitives that also work with React, Vue 3, Svelte, and
|
||
Angular.</li>
|
||
<li><a href="https://www.bonsaicss.com/">Bonsai</a> - A complete Utility
|
||
First CSS Framework for less than 50kb.</li>
|
||
<li><a href="https://getbootstrap.com/">Bootstrap</a> - The most popular
|
||
HTML, CSS, and JS framework.</li>
|
||
<li><a href="http://bulma.io/">Bulma</a> - A modern CSS framework based
|
||
on Flexbox. Also has Sass import for modification.</li>
|
||
<li><a href="http://getbuttercake.com/">Butter Cake</a> - A Modern
|
||
Lightweight Front End CSS framework for faster and easier web
|
||
development.</li>
|
||
<li><a href="https://chartscss.org/">Charts.css</a> - CSS data
|
||
visualization framework.</li>
|
||
<li><a href="https://jenil.github.io/chota/">Chota</a> - A responsive,
|
||
customizable micro-framework (3kb) with helpful utilities and a grid
|
||
system.</li>
|
||
<li><a href="https://spiderpig86.github.io/Cirrus/">Cirrus</a> - A fully
|
||
responsive and comprehensive CSS framework with beautiful controls and
|
||
simplistic structure.</li>
|
||
<li><a href="http://foundation.zurb.com/">Foundation</a> - advanced
|
||
responsive front-end framework.</li>
|
||
<li><a href="http://gralig.com/">Gralig</a> - A modest, grayish CSS
|
||
library.</li>
|
||
<li><a href="https://www.gethalfmoon.com/">Halfmoon</a> - A responsive
|
||
front-end framework with a built-in dark mode.</li>
|
||
<li><a href="https://github.com/HeavenMercy/HasserCSS">Hasser CSS</a> -
|
||
A lightweight (12k, not minified) but useful CSS framework with flexible
|
||
Grid, Hero and more.</li>
|
||
<li><a href="http://inuitcss.com/">Inuit.css</a> - Powerful, scalable,
|
||
Sass-based, BEM, OOCSS framework.</li>
|
||
<li><a
|
||
href="https://github.com/material-components/material-components-web">Material-components-web</a>
|
||
- Modular and customizable Material Design UI components for the
|
||
web.</li>
|
||
<li><a href="http://materializecss.com/">Materialize</a> - A modern
|
||
responsive front-end framework based on Material Design.</li>
|
||
<li><a href="http://milligram.io">Milligram</a> - A minimalist CSS
|
||
framework.</li>
|
||
<li><a href="https://numl.design">Numl</a> - An HTML-based language and
|
||
design system that lets you create responsive and accessible
|
||
high-quality web interfaces with any look.</li>
|
||
<li><a href="http://purecss.io/">Pure.css</a> - A set of small,
|
||
responsive CSS modules that you can use in every web project.</li>
|
||
<li><a href="http://semantic-ui.com/">Semantic UI</a> - Powerful
|
||
framework that uses human-friendly HTML.</li>
|
||
<li><a href="https://github.com/shorthandcss/shorthand">Shorthand
|
||
Framework</a> - Feature rich CSS framework for the new decade.</li>
|
||
<li><a
|
||
href="https://picturepan2.github.io/spectre/index.html">Spectre.css</a>
|
||
- A lightweight, responsive and modern CSS framework.</li>
|
||
<li><a href="https://github.com/jfet97/strawberry">Strawberry</a> - A
|
||
set of common flexbox utilities focused on making your life easier and
|
||
faster with nested flexboxes.</li>
|
||
<li><a href="http://tachyons.io/">Tachyons</a> - Functional CSS for
|
||
humans.</li>
|
||
<li><a href="https://yegor256.github.io/tacit/">Tacit</a> - CSS
|
||
framework for dummies with zero skills in graphic design.</li>
|
||
<li><a href="https://github.com/tailwindcss/tailwindcss">Tailwindcss</a>
|
||
- A utility-first CSS framework for rapid UI development.</li>
|
||
<li><a href="https://material.pages.dev/">Tronic247 Material</a> - A
|
||
responsive framework based on CSS and some JS while following Material
|
||
Design guidelines.</li>
|
||
<li><a href="http://getuikit.com/">UIkit</a> - A lightweight and modular
|
||
front-end framework.</li>
|
||
<li><a href="http://unsemantic.com/">Unsemantic</a> - Fluid grid for
|
||
mobile, tablet, and desktop.</li>
|
||
<li><a href="https://kbrsh.github.io/wing/">Wing</a> - A Minimal,
|
||
Lightweight, Responsive framework.</li>
|
||
</ul>
|
||
<p><em><a href="https://github.com/troxler/awesome-css-frameworks">You
|
||
can find more frameworks at “awesome-css-frameworks”</a></em></p>
|
||
<p><sub><a href="#contents">⇧ back to top</a></sub></p>
|
||
<h2 id="toolkits-wrench">Toolkits :wrench:</h2>
|
||
<ul>
|
||
<li><a href="http://bourbon.io/">Bourbon</a> - A simple and lightweight
|
||
mixin library for Sass.</li>
|
||
</ul>
|
||
<p><sub><a href="#contents">⇧ back to top</a></sub></p>
|
||
<h2 id="reset-and-normalize">Reset and Normalize</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/ruilisi/css-checker">CSS Checker</a> -
|
||
Find and Reduce Similar & Duplicated CSS Scripts.</li>
|
||
<li><a href="https://github.com/jgthms/minireset.css">MiniReset.css</a>
|
||
- A tiny modern CSS reset.</li>
|
||
<li><a
|
||
href="https://github.com/kennethormandy/normalize-opentype.css">Normalize-OpenType</a>
|
||
- Adds OpenType features—ligatures, kerning, and more—to
|
||
Normalize.css.</li>
|
||
<li><a href="https://github.com/necolas/normalize.css">Normalize</a> - A
|
||
set of CSS rules that provide better cross-browser consistency in the
|
||
default styling of HTML elements.</li>
|
||
<li><a href="https://meyerweb.com/eric/tools/css/reset/">Reset.css</a> -
|
||
CSS Tools: Reset CSS.</li>
|
||
<li><a href="https://github.com/krishdevdb/reseter.css">Reseter.css</a>
|
||
- A Futuristic CSS Reset/Normalizer. That Redifines Instead Of
|
||
Preserving.</li>
|
||
<li><a
|
||
href="https://github.com/jonathantneal/sanitize.css/">Sanitize.css</a> -
|
||
A set of CSS rules that style with today’s best practices
|
||
out-of-the-box.</li>
|
||
<li><a href="https://github.com/Martin-Pitt/css-unstyle">Unstyle.css</a>
|
||
- Specialised stylesheet for removing user agent styles, style the web
|
||
with your baseline.</li>
|
||
</ul>
|
||
<p><sub><a href="#contents">⇧ back to top</a></sub></p>
|
||
<h2 id="css-development-at-large-scale-websites">CSS Development at
|
||
Large-Scale Websites</h2>
|
||
<ul>
|
||
<li><a
|
||
href="http://blog.bugsnag.com/bugsnags-css-architecture">Bugsnag’s CSS
|
||
Architecture</a> by <a href="https://twitter.com/maxluster">Max
|
||
Luster</a></li>
|
||
<li><a
|
||
href="https://medium.com/@shaunbent/css-at-bbc-sport-part-1-bab546184e66">CSS
|
||
at BBC Sport</a> by Shaun Bent</li>
|
||
<li><a href="http://code.hootsuite.com/css-at-hootsuite/">CSS AT
|
||
HOOTSUITE</a> by Steve Mynett</li>
|
||
<li><a href="http://markdotto.com/2014/07/23/githubs-css/">GitHub’s
|
||
CSS</a> by <a href="https://twitter.com/mdo">Mark Otto</a></li>
|
||
<li><a href="https://dev.ghost.org/css-at-ghost/">How we do CSS at
|
||
Ghost</a> by Paul Davis</li>
|
||
<li><a href="http://ianfeather.co.uk/css-at-lonely-planet/">Lonely
|
||
Planet</a> by <a href="https://twitter.com/ianfeather">Ian
|
||
Feather</a></li>
|
||
<li><a
|
||
href="https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06">Medium’s
|
||
CSS is actually pretty good.</a> by <a
|
||
href="https://twitter.com/fat">Jacob Thornton</a></li>
|
||
<li><a
|
||
href="http://blog.trello.com/refining-the-way-we-structure-our-css-at-trello/">Refining
|
||
The Way We Structure Our CSS At Trello</a> by <a
|
||
href="https://twitter.com/bobbygrace">Bobby Grace</a></li>
|
||
<li><a
|
||
href="https://github.com/davidtheclark/scalable-css-reading-list">Scalable-css-reading-list</a></li>
|
||
</ul>
|
||
<p><sub><a href="#contents">⇧ back to top</a></sub></p>
|
||
<h2 id="code-style-guidelines-book">Code Style Guidelines :book:</h2>
|
||
<ul>
|
||
<li><a href="http://codeguide.co/">Code Guide</a> by <a
|
||
href="https://twitter.com/mdo">Mark Otto</a></li>
|
||
<li><a href="http://cssguidelin.es/">CSS Guidelines</a> by <a
|
||
href="https://twitter.com/csswizardry">Harry Roberts</a></li>
|
||
<li><a href="https://github.com/grvcoelho/css">CSS Styleguide</a> by <a
|
||
href="https://github.com/grvcoelho">Guilherme Rv Coelho</a></li>
|
||
<li><a href="https://github.com/dropbox/css-style-guide">Dropbox (S)CSS
|
||
Style Guide</a> by Dropbox</li>
|
||
<li><a
|
||
href="https://google.github.io/styleguide/htmlcssguide.html">Google
|
||
HTML/CSS Style Guide</a> by Google</li>
|
||
<li><a href="https://github.com/necolas/idiomatic-css">Idiomatic CSS</a>
|
||
by <a href="https://twitter.com/necolas">Nicolas Gallagher</a></li>
|
||
<li><a
|
||
href="https://gist.github.com/bobbygrace/9e961e8982f42eb91b80">Official
|
||
Trello CSS Guide</a> by Bobby Grace</li>
|
||
<li><a href="https://sass-guidelin.es/">Sass Guidelines</a> by <a
|
||
href="https://twitter.com/KittyGiraudel">Kitty Giraudel</a></li>
|
||
<li><a href="http://sass-lang.com/styleguide">SASS Style Guide</a> by
|
||
Sass team</li>
|
||
<li><a
|
||
href="https://github.com/ThinkUpLLC/ThinkUp/wiki/Code-Style-Guide:-CSS">ThinkUp
|
||
CSS Style Guide</a> by ThinkUp</li>
|
||
<li><a
|
||
href="https://make.wordpress.org/core/handbook/best-practices/coding-standards/css/">WordPress
|
||
CSS Coding Standards</a> by WorldPress</li>
|
||
</ul>
|
||
<p><sub><a href="#contents">⇧ back to top</a></sub></p>
|
||
<h2 id="style-guide">Style Guide</h2>
|
||
<ul>
|
||
<li><a href="http://docs.atlassian.com/aui/latest/docs">AUI</a> by
|
||
Atlassian Design</li>
|
||
<li><a
|
||
href="http://rizzo.lonelyplanet.com/styleguide/design-elements/colours">Design
|
||
Elements</a> by lonely planet</li>
|
||
<li><a href="https://github.com/microsoft/fluentui">Fluent UI</a> by
|
||
Microsoft</li>
|
||
<li><a href="https://primer.github.io/">GitHub CSS Style Guide</a> by
|
||
Github</li>
|
||
<li><a href="https://www.lightningdesignsystem.com/">Lighting Design
|
||
System</a> by Salesforce</li>
|
||
<li><a href="https://ux.mailchimp.com/patterns">Patterns</a> by
|
||
MailChimp</li>
|
||
<li><a href="http://solid.buzzfeed.com/">Solid</a> by BuzzFeed</li>
|
||
<li><a
|
||
href="https://www.starbucks.com/static/reference/styleguide/">Style
|
||
Guide</a> by Starbucks</li>
|
||
<li><a href="http://styleguides.io/examples.html">Website Style Guide
|
||
Resources</a> by Awesome people</li>
|
||
</ul>
|
||
<p>View more style guides at <a href="http://styleguides.io/">Website
|
||
Style Guide Resources</a></p>
|
||
<p><sub><a href="#contents">⇧ back to top</a></sub></p>
|
||
<h2 id="style-guide-generators-slot_machine">Style Guide Generators
|
||
:slot_machine:</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/trulia/hologram">Hologram</a></li>
|
||
<li><a href="https://github.com/jonathantneal/mdcss">mdcss</a></li>
|
||
<li><a href="https://github.com/sourcejs/Source">Source</a></li>
|
||
<li><a href="https://github.com/Joony/styledoc/">Styledoc</a></li>
|
||
<li><a
|
||
href="https://github.com/jacobrask/styledocco">Styledocco</a></li>
|
||
<li><a href="https://github.com/styledown/styledown">Styledown</a></li>
|
||
<li><a
|
||
href="https://github.com/SC5/sc5-styleguide">Sc5-styleguide</a></li>
|
||
</ul>
|
||
<p><sub><a href="#contents">⇧ back to top</a></sub></p>
|
||
<h2 id="naming-conventions-methodologies-bulb">Naming conventions &
|
||
Methodologies :bulb:</h2>
|
||
<ul>
|
||
<li><a href="http://patternlab.io/resources.html">Atomic Design</a></li>
|
||
<li><a href="https://www.sitepoint.com/atomic-oobemitscss/">Atomic
|
||
OOBEMITSCSS</a></li>
|
||
<li><a href="https://en.bem.info/">BEM</a></li>
|
||
<li><a href="http://itcss.io/">ITCSS</a></li>
|
||
<li><a href="http://trykickoff.com/learn/css.html#namingscheme">Kickoff
|
||
CSS</a></li>
|
||
<li><a href="http://maintainablecss.com">MaintainableCSS</a></li>
|
||
<li><a href="https://ncss.io">NCSS</a></li>
|
||
<li><a
|
||
href="https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/">OOCSS</a></li>
|
||
<li><a href="http://pointnorth.io/#base-browser-styling">Point
|
||
North</a></li>
|
||
<li><a href="https://rscss.io/">RSCSS</a></li>
|
||
<li><a
|
||
href="https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md#u-utilityname">SUIT
|
||
CSS</a></li>
|
||
<li><a
|
||
href="https://www.sitepoint.com/title-css-simple-approach-css-class-naming/">Title
|
||
CSS</a></li>
|
||
</ul>
|
||
<p><sub><a href="#contents">⇧ back to top</a></sub></p>
|
||
<h2 id="css-in-js">CSS in JS</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/Khan/aphrodite">Aphrodite</a></li>
|
||
<li><a
|
||
href="https://github.com/martinandert/babel-plugin-css-in-js">Babel-plugin-css-in-js</a></li>
|
||
<li><a href="https://github.com/inturn/classy">Classy</a></li>
|
||
<li><a href="https://github.com/rtsao/csjs">Csjs</a></li>
|
||
<li><a href="https://github.com/webpack/css-loader">Css-loader</a></li>
|
||
<li><a href="https://github.com/cssinjs/jss">JSS</a></li>
|
||
<li><a
|
||
href="https://github.com/bloodyowl/react-styled">React-styled</a></li>
|
||
<li><a
|
||
href="https://github.com/airbnb/react-with-styles">React-with-styles</a></li>
|
||
<li><a href="https://github.com/zeit/styled-jsx">Styled-jsx</a></li>
|
||
<li><a
|
||
href="https://github.com/styled-components/styled-components">Styled-components</a></li>
|
||
<li><a href="https://github.com/sultan99/stylin">Stylin</a></li>
|
||
</ul>
|
||
<p>Here is a <a href="https://github.com/MicheleBertoli/css-in-js">CSS
|
||
in JS techniques comparison</a></p>
|
||
<p><sub><a href="#contents">⇧ back to top</a></sub></p>
|
||
<h2 id="css-polyfills">CSS Polyfills</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/philipwalton/polyfill/">Polyfill.js</a>
|
||
- A library to make creating CSS polyfills much easier.</li>
|
||
<li><a href="https://github.com/LeaVerou/prefixfree">Prefixfree</a> -
|
||
Break free from CSS prefix hell.</li>
|
||
<li><a
|
||
href="https://github.com/filamentgroup/fixed-sticky">Fixed-sticky</a> -
|
||
A CSS position:sticky polyfill.</li>
|
||
<li><a href="https://github.com/keithclark/selectivizr">Selectivizr</a>
|
||
- A JavaScript utility that emulates CSS3 pseudo-classes and attribute
|
||
selectors in Internet Explorer 6-8.</li>
|
||
<li><a href="https://github.com/lojjic/PIE">PIE</a> - Allows Internet
|
||
Explorer to recognize and render various CSS3 box decoration
|
||
properties.</li>
|
||
</ul>
|
||
<p><sub><a href="#contents">⇧ back to top</a></sub></p>
|
||
<h2 id="miscellaneous">Miscellaneous</h2>
|
||
<ul>
|
||
<li><a href="https://getcssscan.com/css-box-shadow-examples">Beautiful
|
||
CSS box-shadow examples</a> - Curated collection of 93 beautiful CSS
|
||
box-shadow. Click to copy.</li>
|
||
<li><a href="https://caniuse.com/">Can I use</a> - Browser support for
|
||
CSS, HTML5 and other front-end web technologies.</li>
|
||
<li><a href="https://flexboxpatterns.com/">Flexbox Patterns</a> by
|
||
cjcenizal</li>
|
||
<li><a href="https://ui.glass/generator/">Glassmorphism CSS
|
||
Generator</a> - Generate CSS for glassmorphism.</li>
|
||
<li><a href="https://gra.dient.art/">GradientArt</a> - An advanced CSS
|
||
gradient editor with layering, design tools and free cloud storage.</li>
|
||
<li><a href="https://github.com/webextensions/live-css-editor">Live
|
||
editor for CSS and LESS</a> - Magic CSS extension for Chrome, Firefox
|
||
and Edge.</li>
|
||
<li><a href="https://github.com/Heydon/REVENGE.CSS">RevengeCSS</a> - A
|
||
CSS bookmarklet that uses selectors to find bad markup, displaying ugly
|
||
pink error messages in comic sans serif wherever you write bad HTML</li>
|
||
<li><a href="https://github.com/ManrajGrover/SingleDivProject">Single
|
||
Div Project</a> - One <code><div></code>. Many possibilities.</li>
|
||
<li><a href="http://youmightnotneedjs.com/">You Might Not Need JS</a> -
|
||
CSS alternatives for common JS UI components.</li>
|
||
<li><a
|
||
href="https://github.com/steambap/xpath-to-selector">Xpath-to-selector</a>
|
||
- Convert xpath to css selector.</li>
|
||
</ul>
|
||
<p><sub><a href="#contents">⇧ back to top</a></sub></p>
|
||
<h2 id="podcasts-radio">Podcasts :radio:</h2>
|
||
<p><em>Something to listen to while programming.</em></p>
|
||
<ul>
|
||
<li><a href="https://thecsspodcast.libsyn.com/">CSS Podcast</a> - Una
|
||
Kravets and Adam Argyle,and development.</li>
|
||
<li><a href="http://goodstuff.fm/nbsp">Non Breaking Space Show</a> -
|
||
Seeking out the best,and smartest creative people on digital art,and the
|
||
accompanying blog,and UX.</li>
|
||
<li><a href="http://shoptalkshow.com/">Shop Talk Show</a> - A live
|
||
podcast with Chris Coyier and Dave Rupert about front-end web
|
||
design,hosted by Anna Debenham and Brad Frost.</li>
|
||
<li><a href="http://styleguides.io/podcast/index.html">Style Guide
|
||
Podcast</a> - 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.</li>
|
||
<li><a href="https://syntax.fm/">Syntax</a> - A Tasty Treats Podcast for
|
||
Web Developers.,typography,web technology</li>
|
||
<li><a href="http://5by5.tv/bigwebshow/">The Big Web Show</a> - Topics
|
||
like web publishing,is all about keeping you updated with the latest in
|
||
Open Source Technology.</li>
|
||
<li><a href="https://changelog.com/">The Changelog</a> - The tagline for
|
||
the Changelog says it all: “Open Source moves fast. Keep up.” This
|
||
podcast,and more. It’s everything web that matters.</li>
|
||
<li><a href="http://5by5.tv/webahead/">The Web Ahead</a> - Conversations
|
||
with world experts on changing technologies and future of the web.</li>
|
||
</ul>
|
||
<p><sub><a href="#contents">⇧ back to top</a></sub></p>
|
||
<h2 id="twitter-satellite">Twitter :satellite:</h2>
|
||
<p><em>Active accounts to follow.</em></p>
|
||
<ul>
|
||
<li><a href="https://twitter.com/mrmrs_">Adam Morse</a> - Advocate for
|
||
users and open-source.</li>
|
||
<li><a href="https://twitter.com/andreysitnik">Andrey Sitnik</a> -
|
||
Author of <span class="citation"
|
||
data-cites="Autoprefixer">@Autoprefixer</span>, http://easings.net and
|
||
<span class="citation" data-cites="PostCSS">@PostCSS</span>.</li>
|
||
<li><a href="https://twitter.com/ben_eb">Ben Briggs</a> - Final year web
|
||
technologies student. node.js, javascript, open source modules, client
|
||
side optimisation, web performance.</li>
|
||
<li><a href="https://twitter.com/brad_frost">Brad Frost</a> - Web
|
||
designer, speaker, writer, consultant, musician.</li>
|
||
<li><a href="https://twitter.com/chriscoyier">Chris Coyier</a> -
|
||
Designer <span class="citation" data-cites="CodePen">@CodePen</span>.
|
||
Writer <span class="citation"
|
||
data-cites="Real_CSS_Tricks">@Real_CSS_Tricks</span>.</li>
|
||
<li><a href="https://twitter.com/connors">Connor Sears</a> - Designer at
|
||
GitHub.</li>
|
||
<li><a href="https://twitter.com/cssanimation">CSS Animation</a></li>
|
||
<li><a href="https://twitter.com/CSScommits">CSS Commits</a> - Latest
|
||
commits to <span class="citation" data-cites="CSSWG">@CSSWG</span>’s
|
||
public Mercurial repository.</li>
|
||
<li><a href="https://twitter.com/glazou">Daniel Glazman</a> - W3C CSS
|
||
Working Group Co-chairman, entrepreneur, software engineer, geek, father
|
||
of two, polyglot, duck lover. Nah. Tweets are strictly mine.</li>
|
||
<li><a href="https://twitter.com/davemcfarland">Dave McFarland</a> - Web
|
||
developer, author of CSS: The Missing Manual, JavaScript &
|
||
jQuery.</li>
|
||
<li><a href="https://twitter.com/donovanh">Donovan Hutchinson</a> -
|
||
Designer, developer, writer. Occasionally blogs at http://Hop.ie, and
|
||
currently building <span class="citation"
|
||
data-cites="cssanimation">@cssanimation</span>.</li>
|
||
<li><a href="https://twitter.com/dudleystorey">Dudley Storey</a> - Web
|
||
development writer, teacher, and speaker.</li>
|
||
<li><a href="https://twitter.com/ebidel">Eric Bidelman</a> - Engineer at
|
||
Google working on Chrome, web components, and Polymer.</li>
|
||
<li><a href="https://twitter.com/evaferreira92">Evangelina Ferreira</a>
|
||
- Web Designer. Professor at <span class="citation"
|
||
data-cites="multimedial_utn">@multimedial_utn</span> HTML5 & CSS
|
||
Freak. Ocassional Translator.</li>
|
||
<li><a href="https://twitter.com/guyroutledge">Guy Routledge</a> -
|
||
Front-end dev, Teacher <span class="citation"
|
||
data-cites="GA_London">@GA_London</span>, Screencaster at
|
||
http://www.atozcss.com, property snob, Foodie.</li>
|
||
<li><a href="https://twitter.com/csswizardry">Harry Roberts</a>-
|
||
Consultant Front-end Architect: <span class="citation"
|
||
data-cites="google">@google</span>, <span class="citation"
|
||
data-cites="Etsy">@Etsy</span>, <span class="citation"
|
||
data-cites="kickstarter">@kickstarter</span>, <span class="citation"
|
||
data-cites="BBC">@BBC</span>, <span class="citation"
|
||
data-cites="Deloitte">@Deloitte</span>, <span class="citation"
|
||
data-cites="FT">@FT</span>, more.</li>
|
||
<li><a href="https://twitter.com/heydonworks">Heydon Pickering</a> -
|
||
Moderate consumer of rice. Also a UX designer, author, <span
|
||
class="citation" data-cites="smashingmag">@smashingmag</span> editor and
|
||
programmer.</li>
|
||
<li><a href="https://twitter.com/snookca">Jonathan Snook</a> - Designer,
|
||
Developer, Writer, Speaker. I make stuff on the web. I wrote
|
||
SMACSS.</li>
|
||
<li><a href="https://twitter.com/KittyGiraudel">Kitty Giraudel</a> -
|
||
Non-binary accessibility & diversity advocate, frontend developer,
|
||
author.</li>
|
||
<li><a href="https://twitter.com/davidbaron">L. David Baron</a> -
|
||
Mozilla developer, CSS and W3C standards diplomat.</li>
|
||
<li><a href="https://twitter.com/LeaVerou">Lea Verou</a> - Research
|
||
Assistant <span class="citation"
|
||
data-cites="MIT_CSAIL">@MIT_CSAIL</span>, <span class="citation"
|
||
data-cites="CSSWG">@CSSWG</span> IE, <span class="citation"
|
||
data-cites="OReillyMedia">@OReillyMedia</span> author, Ex <span
|
||
class="citation" data-cites="W3C">@W3C</span> staff.</li>
|
||
<li><a href="https://twitter.com/crnacura">Manoela Ilic</a> - …aka Mary
|
||
Lou <span class="citation" data-cites="codrops">@codrops</span> ༶ CSS
|
||
& HTML are my crayons ༶ Interested in Cognitive Science, AI, HCI, UI
|
||
Design & Astrophysics ༶ Digital nomad.</li>
|
||
<li><a href="https://twitter.com/mdo">Mark Otto</a> - GitHub and
|
||
Bootstrap. Formerly at Twitter. Huge nerd.</li>
|
||
<li><a href="https://twitter.com/MoOx">Maxime Thirouin</a> - Freelance
|
||
front-end vigilante, UI/UX developer.</li>
|
||
<li><a href="https://twitter.com/nex3">Natalie Weizenbaum</a> - Trans
|
||
coder lady. Lead designer/developer of <span class="citation"
|
||
data-cites="SassCSS">@SassCSS</span>, working for <span class="citation"
|
||
data-cites="google">@google</span> on <span class="citation"
|
||
data-cites="dart_lang">@dart_lang</span>.</li>
|
||
<li><a href="https://twitter.com/necolas">Nicolas Gallagher</a> -
|
||
Software Engineer at <span class="citation"
|
||
data-cites="twitter">@twitter</span>.</li>
|
||
<li><a href="https://twitter.com/stubbornella">Nicole Sullivan</a> -
|
||
GEEK.</li>
|
||
<li><a href="https://twitter.com/patrickhamann">Patrick Hamann</a> -
|
||
Lover of mountains, craft beers and discovering new food.</li>
|
||
<li><a href="https://twitter.com/aerotwist">Paul Lewis</a> - Googler who
|
||
noodles with code and design.</li>
|
||
<li><a href="https://twitter.com/philwalton">Phil Walton</a> - Engineer
|
||
at Google • Open Source Advocate • Developer • Designer • Writer.</li>
|
||
<li><a href="https://twitter.com/rachelandrew">Rachel Andrew</a> - Web
|
||
Developer, half of <span class="citation"
|
||
data-cites="grabaperch">@grabaperch</span> CMS, CSS Working Group
|
||
Invited Expert.</li>
|
||
<li><a href="https://twitter.com/rem">Remy Sharp</a> - All about CSS
|
||
sizing units.</li>
|
||
<li><a href="https://twitter.com/SaraSoueidan">Sara Soueidan</a> -
|
||
Author of the <span class="citation"
|
||
data-cites="Codrops">@Codrops</span> CSS Reference & Co-author of
|
||
the Smashing Book #5.</li>
|
||
<li><a href="https://twitter.com/scottjehl">Scott Jehl</a> - Author of
|
||
<span class="citation"
|
||
data-cites="responsiblerwd">@responsiblerwd</span>, now on sale from
|
||
<span class="citation" data-cites="abookapart">@abookapart</span>.</li>
|
||
<li><a href="https://twitter.com/simurai">Simon</a> - UI designer, CSS
|
||
doodler.</li>
|
||
<li><a href="https://twitter.com/chriseppstein">The Chris Eppstein</a> -
|
||
Loves love. Hates hate. Has a kick-ass family. Writes code. Leads
|
||
stylesheet tech <span class="citation"
|
||
data-cites="LinkedIn">@LinkedIn</span>.</li>
|
||
<li><a href="https://twitter.com/Una">Una Kravets</a> - Front-end <span
|
||
class="citation" data-cites="IBMDesign">@IBMDesign</span>. Sassvocate,
|
||
community builder, & handcrafter. STEMinist :) Open source all the
|
||
things.</li>
|
||
<li><a href="https://twitter.com/zomigi">Zoe M. Gillenwater</a> - Web
|
||
designer/developer specializing in CSS, RWD, UX, &
|
||
accessibility.</li>
|
||
<li><a href="https://twitter.com/zoltanszogyenyi">Zoltán Szőgyényi</a> -
|
||
Web developer, Co-founder at Themesberg. I’m building Glass UI.</li>
|
||
<li><a href="https://twitter.com/tabatkins">앗킨스 탭</a> - Literally
|
||
Jenn Schiffer’s Mom.</li>
|
||
</ul>
|
||
<p><sub><a href="#contents">⇧ back to top</a></sub></p>
|
||
<h2 id="videos-tv">Videos :tv:</h2>
|
||
<p>*Good study videos from CSS Must Watch Videos. Some items are quoted
|
||
from <a
|
||
href="https://github.com/AllThingsSmitty/must-watch-css">AllThingsSmitty/must-watch-css</a>.</p>
|
||
<p><a href="https://twitter.com/sota0805/status/527635856031375360">I
|
||
told him on Twitter</a>. I appreciate his valuable efforts.*</p>
|
||
<h3 id="section">2019</h3>
|
||
<ol type="1">
|
||
<li><a
|
||
href="https://www.youtube.com/watch?v=-oyeaIirVC0">Next-Generation Web
|
||
Styling</a> - Una Kravets & Adam Argyle @ Chrome Dev Summit
|
||
2019.</li>
|
||
</ol>
|
||
<h3 id="section-1">2016</h3>
|
||
<ol type="1">
|
||
<li><a
|
||
href="https://www.youtube.com/watch?v=_70Yp8KPXH8">Component-Based Style
|
||
Reuse</a> :page_facing_up: <a
|
||
href="https://2016.cssconf.com/">transcript</a> :watch:
|
||
<code>37:24</code> - Pete Hunt @ CSS conf 2016.</li>
|
||
<li><a href="https://www.youtube.com/watch?v=jl164y-Vb5E">CSS4 Grid:
|
||
True Layout Finally Arrives</a> :page_facing_up: <a
|
||
href="https://2016.cssconf.com/">transcript</a> :watch:
|
||
<code>29:27</code> - Jen Kramer @ CSS conf 2016.</li>
|
||
<li><a href="https://www.youtube.com/watch?v=sE3ttkP15f8">Houdini:
|
||
Demystifying the Future of CSS</a> :watch: <code>36:58</code> @ Google
|
||
I/O 2016.</li>
|
||
</ol>
|
||
<h3 id="section-2">2015</h3>
|
||
<ol type="1">
|
||
<li><a
|
||
href="http://jqueryuk.com/2015/videos.php?s=mdo-ular-css">Mdo-ular
|
||
CSS</a> :watch: <code>30:06</code> - Mark Otto @ jQuery UK.</li>
|
||
<li><a href="https://www.youtube.com/watch?v=6co781JgoqQ">CSS
|
||
Architecture with SMACSS</a> :watch: <code>30:15</code> - Caleb Meredith
|
||
@ DevTips channel.</li>
|
||
<li><a href="https://www.youtube.com/watch?v=ZVk3GQHfkbU">CSS Workflow
|
||
from the Ground Up</a> :watch: <code>46:06</code> - Jonathan Snook @
|
||
Generate conf 2015.</li>
|
||
</ol>
|
||
<p><sub><a href="#contents">⇧ back to top</a></sub></p>
|
||
<h2 id="books-books">Books :books:</h2>
|
||
<ul>
|
||
<li><a href="http://shop.oreilly.com/product/0636920012726.do">CSS: The
|
||
Definitive Guide, 4th Edition</a> - Visual Presentation for the Web</li>
|
||
<li><a href="http://shop.oreilly.com/product/0636920036357.do">CSS: The
|
||
Missing Manual</a> – Really Helpful in Advancing your Design Skills to a
|
||
whole new Level</li>
|
||
<li><a href="http://shop.oreilly.com/product/0636920031123.do">CSS
|
||
Secrets</a> – Better Solutions to Everyday Web Design Problems</li>
|
||
<li><a href="https://every-layout.dev/">Every Layout: Relearn CSS
|
||
Layout</a> – Solving responsive layout problems using algorithmic
|
||
design.</li>
|
||
<li><a href="https://www.manning.com/books/tiny-css-projects">Tiny CSS
|
||
Projects</a> – Improve the way you write CSS as you build 12 tiny
|
||
projects.</li>
|
||
</ul>
|
||
<p><sub><a href="#contents">⇧ back to top</a></sub></p>
|
||
<h2 id="tutorials-clapper">Tutorials :clapper:</h2>
|
||
<ul>
|
||
<li><a href="https://www.30secondsofcode.org/css/p/1">30 Seconds of
|
||
CSS</a> - A curated collection of useful CSS snippets you can understand
|
||
in 30 seconds or less.</li>
|
||
<li><a
|
||
href="https://medium.com/@ymzEmre/css-cascade-specificity-basic-selectors-c5adc01dd861">All
|
||
selectors in CSS</a> - All selectors in CSS.</li>
|
||
<li><a href="https://hackr.io/tutorials/learn-css">Community Curated CSS
|
||
Resources</a> - Top Recommended Resources.</li>
|
||
<li><a href="https://flukeout.github.io/">CSS Diner</a> – Interactive
|
||
gamified tutorial for learning selection with CSS.</li>
|
||
<li><a href="https://mozilladevelopers.github.io/playground/">CSS Grid
|
||
PlayGround</a> - Simple tutorial to learn CSS Grid from Mozilla.</li>
|
||
<li><a href="https://cssgrid.io/">CSS Grids videos tutorial</a> - Free
|
||
video course by Wes Bos to learn CSS Grids.</li>
|
||
<li><a
|
||
href="https://labex.io/tutorials/quick-start-with-css-free-tutorials-413795">CSS
|
||
Hands-on Tutorial</a> - Free CSS hands-on tutorial by LabEx.</li>
|
||
<li><a href="https://stackdiary.com/css-math-functions/">CSS Math
|
||
Functions</a> - Using CSS Math for responsive design.</li>
|
||
<li><a href="https://flexbox.io/">Flexbox video tutorial</a> - Free
|
||
video course by Wes Bos to learn flexbox.</li>
|
||
<li><a
|
||
href="https://snipcart.com/blog/organize-css-modular-architecture">Organize
|
||
CSS with a Modular Architecture: OOCSS, BEM, SMACSS</a> - In-depth intro
|
||
to OOCSS, BEM, SMACSS, with examples.</li>
|
||
<li><a
|
||
href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">Work
|
||
With Animations</a> - Inspecting animations.</li>
|
||
</ul>
|
||
<p><sub><a href="#contents">⇧ back to top</a></sub></p>
|
||
<h2 id="maintainers">Maintainers</h2>
|
||
<p><a href="https://github.com/sotayamashita"><span class="citation"
|
||
data-cites="sotayamashita">@sotayamashita</span></a>, <a
|
||
href="https://github.com/Rishabh04-02"><span class="citation"
|
||
data-cites="Rishabh04-02">@Rishabh04-02</span></a> and You!</p>
|
||
<h2 id="contribute">Contribute</h2>
|
||
<p>Feel free to dive in! Open an issue or submit PRs.</p>
|
||
<p>Awesome CSS follows the <a
|
||
href="https://www.contributor-covenant.org/version/1/3/0/code-of-conduct/">Contributor
|
||
Covenant</a> Code of Conduct.</p>
|
||
<p><a href="https://github.com/sotayamashita/awesome-css">css.md
|
||
Github</a></p>
|