brokenmold/dev-style-resource

A compiled index of awesome front-end style tools & resources.

Dev-Style-Resource

A compiled index of awesome frontend design tools & resources.

Contributions must have free resources available, though may include additional paid tiers. (ie: Font Awesome)

---

Syntax Cheatsheets

• 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

Color Palette Tools

• 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.

Layout Modules

• 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!

---

Imagry

Stock Images (Royaly Free)

• 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

• SVG on The Web: A Practical Guide - Deep Dive introduction into the world of using SVG in your web project!

Icons

• 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!

---

Typography

Font Pairings

• Font Joy - Excellent Google Fonts pairing tool with generator and custom type.

---

UI

Data Visualization

• Chart.js - Open source collection of javascript based charts