TheBigWarehouse/BigBoxOfCSS.md

# The Big box of CSS

## Ready made animations and icons
 - [CSS3 Generators Tools](http://www.cssreflex.com/css-generators/) - A bunch of tools to help you visualise different styling rules
 - [Loaders.css](http://connoratherton.com/loaders) - Pure CSS loading animations
 - [AniCollection](https://anicollection.github.io/#/) - A collection of CSS animations
 - [Hover.css](https://ianlunn.github.io/Hover/) - More CSS animations
 - [Bounce.js](http://bouncejs.com/) - Don't be fooled by the name - this website lets you generate custom bounce animations

 - [icono](https://saeedalipoor.github.io/icono/) - Pure CSS icons

 - [Colourful CSS Gradient Background Generator](http://www.webcore-it.com/colorful-background/) - Gnerates colourful backgrounds with a CSS gradient (or 4)

 - [Hint.css](http://kushagragour.in/lab/hint/) - Pure CSS tooltips

## Preprocessors and rewriters
 - [CSS Shorthand Generator](http://shrthnd.volume7.io/) - A wensite that converts your long hand styling rules into their shorthand versions
 - [Myth](http://myth.io/) - A preprocessor that converts CSS using all the laatest techniques into CSS that every browser will understand with graceful fallbacks
 - [PurifyCSS](https://github.com/purifycss/purifycss) - Automatically remove unused CSS at build time. Great if you use CSS frameworks as this tool can seriously cut down on the amount of CSS that is sent to the user's browser.

## Polyfills
 - [CSS.escape](https://github.com/mathiasbynens/CSS.escape) - A polyfill for the new CSS.escape method.

## Generators and Calculators
 - [Ultimate CSS Gradient Generator](http://www.colorzilla.com/gradient-editor/) - A GUI to help you design CSS gradients
 - [RedAlt I Like Your Colours](http://redalt.com/ilyc) - Find out what colours any website is using
 - [Nested `border-radius` Calculator](http://joshnh.com/tools/get-your-nested-border-radii-right.html) - Calculate nested `border-radius`es that look good together

## Tutorials and References
 - [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - A good css-tricks tutorial on how the flexbox works
 - [CSS Selectors Reference](http://www.w3schools.com/cssref/css_selectors.asp) - A reference for the CSS selectors with examples
 - [caniuse](http://caniuse.com) - HTML5 and CSS3 support tables for all the major browsers and versions
 - [caniuse-cmd](https://github.com/sgentle/caniuse-cmd) - A command line tool to conenct to the above service

## CSS Resets
 - [CSS Reset](http://www.cssreset.com/) - List of CSS resets, useful when building bookmarklets
 - [Marx](https://mblode.github.io/marx/) - A small and simple CSS reset

## Other
 - [Critical Path CSS Generator](http://jonassebastianohlsson.com/criticalpathcssgenerator/) - Analyses your web page and picks out 7 optimises the CSS needed to render the above-the-fold content
 - [Making a website responsive in 3 easy steps](http://www.catswhocode.com/blog/making-a-website-responsive-in-3-easy-steps) - Guide to making a website responsive so that it look sgood on a mobile device