|
| 1 | +# CSS Resources |
| 2 | + |
| 3 | +## Introduction |
| 4 | +* [Troubleshooting CSS](http://tympanus.net/codrops/2013/07/17/troubleshooting-css/) |
| 5 | +* [OOCSS](http://oocss.org/) |
| 6 | +* [Defensive HTML and CSS](http://www.webdesignerdepot.com/2013/04/defensive-html-and-css) |
| 7 | +* [4 ways to create CSS that's modular and scalable](http://www.creativebloq.com/css3/create-modular-and-scalable-css-9134351) |
| 8 | +* [Writing efficient CSS selectors](http://csswizardry.com/2011/09/writing-efficient-css-selectors/) |
| 9 | +* [A Detailed Look at the z-index CSS Property](http://www.impressivewebs.com/a-detailed-look-at-the-z-index-css-property/) |
| 10 | +* [What the Heck Is CSS Specificity?](http://designshack.net/articles/css/what-the-heck-is-css-specificity/) |
| 11 | +* [CSS Architectures: New Best Practices](http://www.sitepoint.com/css-architectures-new-best-practices/) |
| 12 | +* [The worst Css practices](http://www.creativebloq.com/css3/worst-css-practices-7133791) |
| 13 | +* [Semantic CSS With Intelligent Selectors](http://coding.smashingmagazine.com/2013/08/20/semantic-css-with-intelligent-selectors/) |
| 14 | +* [CSS Positioning 101](http://alistapart.com/article/css-positioning-101) |
| 15 | +* [Write less, do more: CSS Style](http://speckyboy.com/2013/01/07/write-less-do-more-css-style/) |
| 16 | +* [OOCSS and RWD](http://andrewhathaway.net/posts/oocss-and-rwd) |
| 17 | +* [3 Must-Learn CSS Techniques for Perfect Web Typography](http://designshack.net/articles/css/3-must-learn-css-techniques-for-perfect-web-typography/) |
| 18 | +* [Code Smells in CSS](http://csswizardry.com/2012/11/code-smells-in-css/) |
| 19 | +* [CSS Tehniques you couldn't live without](http://coding.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/) |
| 20 | +* [5 Steps to Drastically Improve Your CSS Knowledge in 24 Hours](http://designshack.net/articles/css/5-steps-to-drastically-improve-your-css-knowledge-in-24-hours/) |
| 21 | +* [30 Days to learn HTML and CSS](http://freecourses.tutsplus.com/30-days-to-learn-html-and-css/) |
| 22 | +* [CSS Guidelines from Harry Roberts](https://github.com/csswizardry/CSS-Guidelines) |
| 23 | +* [A Beginner's Guide to HTML & CSS](http://learn.shayhowe.com/html-css/) |
| 24 | +* [OOCSS](http://oocss.org/) |
| 25 | +* [An introduction to HTML5, CSS3 and responsive design](http://www.developerdrive.com/2013/03/an-introduction-to-html5-css3-and-responsive-design/) |
| 26 | +* [Things you may not have known about HTML & CSS](http://www.red-team-design.com/things-you-may-not-have-known-about-html-css) |
| 27 | +* [Learning principles for improving your CSS](http://tympanus.net/codrops/2012/11/20/learning-principles-for-improving-your-css/) |
| 28 | +* [CSS Architecture](http://engineering.appfolio.com/2012/11/16/css-architecture/) |
| 29 | +* [A Beginner’s Guide to Leaner CSS](http://designshack.net/articles/css/a-beginners-guide-to-leaner-css/) |
| 30 | + |
| 31 | +## Preprocessors |
| 32 | + |
| 33 | +* [LESS](https://github.com/less/less.js) - Backwards compatible with CSS, and the extra features it adds use existing CSS syntax. |
| 34 | +* [PostCSS](https://github.com/postcss/postcss) - Transforming CSS with JS plugins. |
| 35 | +* [Sass](https://github.com/sass/sass) - Mature, stable, and powerful professional-grade CSS extension language. |
| 36 | +* [STYLIS](https://github.com/thysultan/stylis.js) - Light-weight CSS preprocessor. |
| 37 | +* [Stylus](http://learnboost.github.io/stylus/) - Expressive, robust, feature-rich CSS language built for NodeJs. |
| 38 | + |
| 39 | +## CSS Selectors |
| 40 | + |
| 41 | +- [Basic CSS Selectors](https://www.sitepoint.com/css-selectors/) - An introduction to the very basic CSS selectors you need to know. |
| 42 | +- [Advanced CSS Selectors](https://www.smashingmagazine.com/2009/08/taming-advanced-css-selectors/) - Level up your knowledge. From attribute selectors to CSS3 pseudo classes. |
| 43 | +- [CSS Diner](https://flukeout.github.io) - Learn how to use CSS selectors with this fun little game. |
| 44 | + |
| 45 | + |
| 46 | +## CSS variables |
| 47 | + |
| 48 | +- [CSS Variables: Why Should You Care?](https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care) - A short introduction to CSS variables. |
| 49 | +- [Locally Scoped CSS Variables: What, How, and Why](https://una.im/local-css-vars/) - Describes the advantages of locally scoped CSS variables. |
| 50 | +- [Using CSS variables correctly](https://www.madebymike.com.au/writing/using-css-variables/) - Patterns and anti-patterns for using CSS variables. |
| 51 | +- [Everything you need to know about CSS Variables](https://medium.freecodecamp.org/everything-you-need-to-know-about-css-variables-c74d922ea855) - In depth article going beyond the basics of CSS Variables using real-world examples. |
| 52 | +- [Getting Reactive with CSS](https://www.youtube.com/watch?v=4IRPxCMAIfA) - Mindblowing talk about the possibilities of the combination of CSS variables and functional reactive programming in JavaScript. |
| 53 | + |
| 54 | +## Layout |
| 55 | + |
| 56 | +- [Learn CSS Layout](http://book.mixu.net/css) - Learn about CSS layout techniques in 5 chapters. |
| 57 | +- [Layout Land](https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag) - Jen Simmons video series about the new CSS Layout possibilities. |
| 58 | +- [Laying Out The Future With Grid And Flexbox](https://www.youtube.com/watch?v=hj355PRbwSQ) - Introduction of a new layout system encompassing Flexbox, CSS Grid and the Box Alignment Module. |
| 59 | + |
| 60 | +### Classic layouting |
| 61 | + |
| 62 | +- [Floats](https://tympanus.net/codrops/css_reference/float/) - In depth information about how to use (and clear) floats. |
| 63 | +- [Positioning Types](https://scotch.io/bar-talk/5-things-you-might-not-know-about-the-css-positioning-types) - A closer look at a few little-known things related to the CSS positioning layout method. |
| 64 | +- [inline-block](https://iamsteve.me/blog/entry/inline_block) - Shows in which cases it makes sense to use the display property `inline-block` for layouting. |
| 65 | + |
| 66 | +### Flexbox |
| 67 | + |
| 68 | +- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - All you need to know about Flexbox on one page. |
| 69 | +<!--lint ignore no-dead-urls--> |
| 70 | +- [Flexbox playground](https://codepen.io/enxaneta/full/adLPwv) - Play with Flexbox examples on CodePen. |
| 71 | +- [Flexbox Defense](http://www.flexboxdefense.com) - A tower defense game in the browser to learn about Flexbox with fun. |
| 72 | +- [Flexbox Froggy](https://flexboxfroggy.com) - Learn all the basics of Flexbox with a fun game involving frogs and lily pads. |
| 73 | +- [Flexbugs](https://github.com/philipwalton/flexbugs) - Community-curated list of flexbox issues and cross-browser workarounds for them. |
| 74 | +- [Flexbox Zombies](https://flexboxzombies.com) - A training course driven by a storyline where you use Flexbox and a crossbow to hunt zombies. |
| 75 | +- [What the Flexbox?](https://flexbox.io/) - A simple, free 20 video course that will help you master CSS Flexbox! |
| 76 | + |
| 77 | +### Grid |
| 78 | + |
| 79 | +- [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) - All you need to know about CSS Grid Layout on one page. |
| 80 | +- [Grid by Example](https://gridbyexample.com) - Besides examples of how to use Grid, this site also has additional useful learning resources. |
| 81 | +- [Designing with Grid](https://talks.jensimmons.com/J5VRbA/designing-with-grid) - Talk about the new layout possibilities CSS Grid is offering. |
| 82 | +- [Grid Garden](https://cssgridgarden.com) - Lovely game where you write CSS code to grow your carrot garden. |
| 83 | +- [GridBugs](https://github.com/rachelandrew/gridbugs) - Community-curated list of Grid interop issues and workarounds for them. |
| 84 | +- [Grid Critters](https://www.gridcritters.com) - Learn CSS grid layout by mastering an adventure game. |
| 85 | +- [CSS Grid](https://cssgrid.io) - Learn CSS grid with Wes Bos - Free 4 hours video course, 25 Videos. |
| 86 | + |
| 87 | +## Animation |
| 88 | + |
| 89 | +- [CSS Transitions and Transforms for Beginners](https://robots.thoughtbot.com/transitions-and-transforms) - An introduction to CSS transitions and CSS (2D) transforms. |
| 90 | +- [All you need to know about CSS Transitions](https://blog.alexmaccaw.com/all-you-need-to-know-about-css-transitions/) - Also addressing advanced topics from chaining and events to hardware acceleration and animation functions. |
| 91 | +- [CSS 3D transforms](https://3dtransforms.desandro.com) - Multi page tutorial with examples like card flip and carousel effects. |
| 92 | +- [CSS Animation for Beginners](https://robots.thoughtbot.com/css-animation-for-beginners) - Imparts the concepts of CSS animations with keyframes. |
| 93 | +- [animatable](http://leaverou.github.io/animatable/) - Nice little page demonstrating which CSS properties are animatable. |
| 94 | + |
| 95 | +## Frameworks |
| 96 | +* [AgnosticUI](https://www.agnosticui.com/) - Accessible CSS component primitives that also work with React, Vue 3, Svelte, and Angular. |
| 97 | +* [Awsm.css](https://igoradamenko.github.io/awsm.css/) - Simple CSS library for semantic HTML markup. |
| 98 | +* [Bonsai](https://www.bonsaicss.com/) - A complete Utility First CSS Framework for less than 50kb. |
| 99 | +* [Bootstrap](https://getbootstrap.com/) - The most popular HTML, CSS, and JS framework. |
| 100 | +* [Bulma](http://bulma.io/) - A modern CSS framework based on Flexbox. Also has Sass import for modification. |
| 101 | +* [Butter Cake](http://getbuttercake.com/) - A Modern Lightweight Front End CSS framework for faster and easier web development. |
| 102 | +* [Charts.css](https://chartscss.org/) - CSS data visualization framework. |
| 103 | +* [Chota](https://jenil.github.io/chota/) - A responsive, customizable micro-framework (3kb) with helpful utilities and a grid system. |
| 104 | +* [Cirrus](https://spiderpig86.github.io/Cirrus/) - A fully responsive and comprehensive CSS framework with beautiful controls and simplistic structure. |
| 105 | +* [Foundation](http://foundation.zurb.com/) - advanced responsive front-end framework. |
| 106 | +* [Gralig](http://gralig.com/) - A modest, grayish CSS library. |
| 107 | +* [Halfmoon](https://www.gethalfmoon.com/) - A responsive front-end framework with a built-in dark mode. |
| 108 | +* [Hasser CSS](https://github.com/HeavenMercy/HasserCSS) - A lightweight (12k, not minified) but useful CSS framework with flexible Grid, Hero and more. |
| 109 | +* [Inuit.css](http://inuitcss.com/) - Powerful, scalable, Sass-based, BEM, OOCSS framework. |
| 110 | +* [Material-components-web](https://github.com/material-components/material-components-web) - Modular and customizable Material Design UI components for the web. |
| 111 | +* [Materialize](http://materializecss.com/) - A modern responsive front-end framework based on Material Design. |
| 112 | +* [Numl](https://numl.design) - An HTML-based language and design system that lets you create responsive and accessible high-quality web interfaces with any look. |
| 113 | +* [Pure.css](http://purecss.io/) - A set of small, responsive CSS modules that you can use in every web project. |
| 114 | +* [Semantic UI](http://semantic-ui.com/) - Powerful framework that uses human-friendly HTML. |
| 115 | +* [Shorthand Framework](https://github.com/shorthandcss/shorthand) - Feature rich CSS framework for the new decade. |
| 116 | +* [Spectre.css](https://picturepan2.github.io/spectre/index.html) - A lightweight, responsive and modern CSS framework. |
| 117 | +* [Strawberry](https://github.com/jfet97/strawberry) - A set of common flexbox utilities focused on making your life easier and faster with nested flexboxes. |
| 118 | +* [Tachyons](http://tachyons.io/) - Functional CSS for humans. |
| 119 | +* [Tailwindcss](https://github.com/tailwindcss/tailwindcss) - A utility-first CSS framework for rapid UI development. |
| 120 | +* [UIkit](http://getuikit.com/) - A lightweight and modular front-end framework. |
| 121 | +* [Unsemantic](http://unsemantic.com/) - Fluid grid for mobile, tablet, and desktop. |
| 122 | + |
| 123 | + |
| 124 | +## CSS Guidelines |
| 125 | + |
| 126 | +* [Code Guide](http://codeguide.co/) by [Mark Otto](https://twitter.com/mdo) |
| 127 | +* [CSS Guidelines](http://cssguidelin.es/) by [Harry Roberts](https://twitter.com/csswizardry) |
| 128 | +* [CSS Styleguide](https://github.com/grvcoelho/css) by [Guilherme Rv Coelho](https://github.com/grvcoelho) |
| 129 | +* [Dropbox (S)CSS Style Guide](https://github.com/dropbox/css-style-guide) by Dropbox |
| 130 | +* [Google HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.html) by Google |
| 131 | +* [Idiomatic CSS](https://github.com/necolas/idiomatic-css) by [Nicolas Gallagher](https://twitter.com/necolas) |
| 132 | +* [Sass Guidelines](https://sass-guidelin.es/) by [Kitty Giraudel](https://twitter.com/KittyGiraudel) |
| 133 | +* [SASS Style Guide](http://sass-lang.com/styleguide) by Sass team |
| 134 | +* [ThinkUp CSS Style Guide](https://github.com/ThinkUpLLC/ThinkUp/wiki/Code-Style-Guide:-CSS) by ThinkUp |
| 135 | + |
| 136 | + |
| 137 | +## Naming conventions & Methodologies |
| 138 | + |
| 139 | +* [Atomic Design](http://patternlab.io/resources.html) |
| 140 | +* [Atomic OOBEMITSCSS](https://www.sitepoint.com/atomic-oobemitscss/) |
| 141 | +* [BEM](https://en.bem.info/) |
| 142 | +* [ITCSS](http://itcss.io/) |
| 143 | +* [Kickoff CSS](http://trykickoff.com/learn/css.html#namingscheme) |
| 144 | +* [MaintainableCSS](http://maintainablecss.com) |
| 145 | +* [NCSS](https://ncss.io) |
| 146 | + |
| 147 | + |
| 148 | +## CSS in JS |
| 149 | + |
| 150 | +* [Aphrodite](https://github.com/Khan/aphrodite) |
| 151 | +* [Babel-plugin-css-in-js](https://github.com/martinandert/babel-plugin-css-in-js) |
| 152 | +* [Css-loader](https://github.com/webpack/css-loader) |
| 153 | +* [JSS](https://github.com/cssinjs/jss) |
| 154 | +* [React-styled](https://github.com/bloodyowl/react-styled) |
| 155 | +* [React-with-styles](https://github.com/airbnb/react-with-styles) |
| 156 | +* [Styled-jsx](https://github.com/zeit/styled-jsx) |
| 157 | +* [Styled-components](https://github.com/styled-components/styled-components) |
| 158 | + |
| 159 | + |
| 160 | +## Tutorials |
| 161 | + |
| 162 | +* [30 Seconds of CSS](https://www.30secondsofcode.org/css/p/1) - A curated collection of useful CSS snippets you can understand in 30 seconds or less. |
| 163 | +* [All selectors in CSS](https://medium.com/@ymzEmre/css-cascade-specificity-basic-selectors-c5adc01dd861) - All selectors in CSS. |
| 164 | +* [Community Curated CSS Resources](https://hackr.io/tutorials/learn-css) - Top Recommended Resources. |
| 165 | +* [CSS Diner](https://flukeout.github.io/) – Interactive gamified tutorial for learning selection with CSS. |
| 166 | +* [CSS Grid PlayGround](https://mozilladevelopers.github.io/playground/) - Simple tutorial to learn CSS Grid from Mozilla. |
| 167 | +* [CSS Grids videos tutorial](https://cssgrid.io/) - Free video course by Wes Bos to learn CSS Grids. |
| 168 | +* [CSS Math Functions](https://stackdiary.com/css-math-functions/) - Using CSS Math for responsive design. |
| 169 | +* [Flexbox video tutorial](https://flexbox.io/) - Free video course by Wes Bos to learn flexbox. |
| 170 | +* [Organize CSS with a Modular Architecture: OOCSS, BEM, SMACSS](https://snipcart.com/blog/organize-css-modular-architecture) - In-depth intro to OOCSS, BEM, SMACSS, with examples. |
| 171 | +* [Work With Animations](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations) - Inspecting animations. |
| 172 | + |
| 173 | + |
| 174 | +## Miscellaneous |
| 175 | + |
| 176 | +* [Can I use](https://caniuse.com/) - Browser support for CSS, HTML5 and other front-end web technologies. |
| 177 | +* [Flexbox Patterns](https://flexboxpatterns.com/) by cjcenizal |
| 178 | +* [Glassmorphism CSS Generator](https://ui.glass/generator/) - Generate CSS for glassmorphism. |
| 179 | +* [GradientArt](https://gra.dient.art/) - An advanced CSS gradient editor with layering, design tools and free cloud storage. |
| 180 | +* [Live editor for CSS and LESS](https://github.com/webextensions/live-css-editor) - Magic CSS extension for Chrome, Firefox and Edge. |
| 181 | +* [You Might Not Need JS](http://youmightnotneedjs.com/) - CSS alternatives for common JS UI components. |
| 182 | +* [Xpath-to-selector](https://github.com/steambap/xpath-to-selector) - Convert xpath to css selector. |
0 commit comments