A compiled index of awesome frontend design tools & resources.
Contributions must have free resources available, though may include additional paid tiers. (ie: Font Awesome)
-
Markdown Syntax - PDF cheatsheet provided by GitHub for formatting ReadMe files. Also useful for other general Markdown applications.
-
Emmet Syntax - Official syntax cheatsheet from Emmet docs.
- CSS Gradient - A fantasticly color gradient picker ui and css generator.
- Colormind - Color palette generator with mockups for usage visualization.
- AI Color Wheel - Image-based color palette generator with random image gallery and unload option.
- A Complete Guide to Flexbox - CSS Tricks coming in for the win again with this One Sheet. This get's a Google #1 Rank for 'flexbox', even above w3 and mdn. Also available in glossy poster form ya nerds.
- Flexbox Patterns - Common flexbox patterns with code examples and style guides.
- Screen Siz.es - Master list of screen sizes for all of your media query needs!
- Unsplash - The Go-to royalty-free stock image library boasting over 2 Million images.
- Pexels - 1 Million stock images and growing. Royalty-free and comercially available.
- SVG on The Web: A Practical Guide - Deep Dive introduction into the world of using SVG in your web project!
- Heroicons - Tailwind's collection of free SVG icons, available in 2 weights.
- Potlab Icons - A small but sweet collection of animated icons.
- Zondicons - Another nice set of SVG Icons by Steve Schoger. Downloadable & free!
- Font Joy - Excellent Google Fonts pairing tool with generator and custom type.
- Chart.js - Open source collection of javascript based charts