51 lines
3.8 KiB
Markdown
51 lines
3.8 KiB
Markdown
# 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)
|
|
- [draGGradients](http://elrumordelaluz.github.io/draGGradients/) - Another colourful gradient background generator
|
|
|
|
- [Hint.css](http://kushagragour.in/lab/hint/) - Pure CSS tooltips
|
|
|
|
## Frameworks
|
|
- [chewing-grid](http://tzi.github.io/chewing-grid.css/) - A CSS Grid ideal for card listing design like tiles, videos or articles listing.
|
|
|
|
## 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.
|
|
- [CSS conical gradient](http://leaverou.github.io/conic-gradient/) - A polyfill for the _awesome_ new conical gradient
|
|
|
|
## 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
|
|
- [Gradify](http://gradifycss.com/) - A python script that generates a gradient that can be used as a placeholder before an image loads.
|
|
- [Bulletproof email buttons](http://buttons.cm/) - As the name suggests. Creates buttons that _will_ work in an any email client.
|
|
|
|
## 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
|
|
- [sanitize.css](http://10up.github.io/sanitize.css/) - Makes browsers render elements consistently.
|
|
|
|
## 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
|
|
|