Frontend Development Tools and Resources 🔨

A curated collection of essential tools, resources, and utilities for frontend developers. PR's are welcome!

Table of Contents

• Browser Extensions
  • Firefox Extensions
  • Chrome Extensions
• Development Tools
  • CSS Tools and Frameworks
  • UI Libraries
  • React Ecosystem
• Design Resources
  • Icons
  • Fonts
  • Visual Resources
  • Colors and Patterns
• Templates and Components
• Learning Resources

Browser Extensions

Firefox Extensions

• Altair GraphQL Client - A beautiful feature-rich GraphQL Client
• ColorZilla - Color picker and analyzer
• Empty Cache Button - Cache clearing made easy
• GraphQL Developer Tools - GraphQL development panel
• JSON Lite - Fast JSON viewer for large files
• Open Pesticide - CSS layout debugging
• React Developer Tools - React debugging essentials
• Web Developer Checklist - Best practices analyzer
• Tota11y - Accessibility visualization toolkit

Chrome Extensions

• React Developer Tools - React debugging essentials
• Redux DevTools - State management debugging
• Grid Ruler - Grid measurement tool
• Design Grid Overlay - Grid system overlay
• ColorZilla - Color picker
• VisBug - Visual debugging
• Wappalyzer - Tech stack analyzer
• JSON Viewer Awesome - JSON response formatter
• Axe - Accessibility checker
• Spider - Web scraping tool
• WhatFont - Font identifier
• Lighthouse - Performance auditing
• Vue.js DevTools - Vue.js debugging

Development Tools

CSS Tools and Frameworks

• CSS Tricks - Comprehensive CSS resources
• CSS Stats - CSS analyzer
• Every Layout - Modern CSS layouts
• CSS Matic - CSS generator tools
• CSS Reference - Visual CSS guide
• CSS Triggers - Performance guide
• CSS Effects Snippets - Ready-to-use effects
• Animatopy - CSS animations
• Can I Use - Browser support tables
• CSS Grid Generator - Visual grid builder
• Grid Malven - Grid cheatsheet
• Flexbox Malven - Flexbox guide
• CSS Transform - Transform examples
• CSSFX - Copy-paste effects

CSS Frameworks

• Carbon Design System - IBM's design system
• Bulma - Modern CSS framework
• Codyhouse - Components library
• Hint.css - CSS tooltips
• Skeleton - Lightweight framework
• Mini.css - Minimal framework

UI Libraries

• Material Kit React - Material Design
• Material UI - React components
• React Bootstrap - Bootstrap for React
• React Virtualized - Large data rendering
• Argon Design System - Bootstrap 4
• BlueprintJS - UI toolkit
• Semantic UI - Development framework
• React Toolbox - Material Design
• React Desktop - Native desktop experience
• Onsen UI - Mobile apps framework
• Evergreen - Design system
• Reactstrap - Bootstrap 4 React
• Rebass - Primitive components
• Grommet - Mobile-first components
• Elemental UI - React UI toolkit
• Rsuite - Suite of components
• Belle - Configurable components
• React MD - Material Design
• Prime React - UI framework
• Kendo React UI - Professional UI
• Nivo - Data visualization

React Ecosystem

• Dumper.js - Variable inspector
• Laxxx - Scroll animations
• Nano React App - Minimal React
• React Proto - UI prototyping
• React Cosmos - Component dev tool
• Guppy - React.js task runner
• React Lifecycle Visualizer - Lifecycle methods
• Why Did You Render - Re-render detector
• React SVGR - SVG to React converter

Design Resources

Icons

• Nucleo - Icon manager
• Octicons - GitHub's icons
• Xicons - Icon sets
• Spovv - Tourist icons
• Pixel Buddha - Vector icons
• Feather Icons - Simple icons
• Font Awesome - Icon font
• IcoMoon - Icon font maker
• Iconmonstr - Icon search
• Remix Icon - Open source icons
• Icons8 - Icons and resources
• Flaticon - Vector icons
• Fontello - Icon fonts
• Sparkk - SVG icons

Fonts

• Google Sans Font - Google's font
• Cereal Airbnb Font - Airbnb's font
• Font Squirrel - Free fonts
• Urban Fonts - Free fonts
• Google Fonts - Web fonts

Visual Resources

• Geo Pattern - SVG generator
• Pattern Library - Background patterns
• Hero Patterns - SVG backgrounds
• Humaaans - Illustration library
• unDraw - Open source illustrations
• Pexels - Stock photos
• Unsplash - Stock photos

Colors and Patterns

• Gradient Magic - CSS gradients
• Colormind - Color scheme AI
• Coolors - Color schemes
• Branition - Branding colors
• Colors and Fonts - Color/font pairs
• Material Color Generator - Material palettes

Templates and Components

• Templated - HTML5 templates
• Vibe - React dashboard
• Wired Dots - Bootstrap themes
• UI Cookies - Bootstrap templates
• Windframe - Tailwind prototyping

Learning Resources

• W3Schools CSS - CSS tutorials
• Use Hooks - React Hooks recipes
• Divjoy - React codebase generator
• JavaScript Stuff - JS tools
• JS Coach - Package catalog
• unDesign - Design resources
• Laws of UX - UX principles
• UI Goodies - Designer resources
• DevDocs - API documentation
• Figma - Design tool

Contributors

Andrés Villanueva 💻	Daniel Díaz 💻	Mateo Silguero 💻	Nicolás Avila 💻	Daniel Mata 💻	Marcos Paulo Sarges Rolim 💻
Ahmed Şeref 💻	Rodrigo Adones 💻	Juan Mora 💻	jacob-shu 💻	IvanFLeon 💻	Alessandro Digilio 💻
Luis Bustamante Flores 💻	Krystle Salazar 💻

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!