Frontend-Tools 🔨

Hey! I hope that you can found here some interesting tools.

If you want to add some tools that you actually use, please do it! PR's are open.

Firefox

Extension 🎯 - Altair GraphQL Client

A beautiful feature-rich GraphQL Client for all platforms
Extension 🎯 - ColorZilla

Get a color reading from any point in your browser, quickly adjust this color and paste it into another program
Extension 🎯 - Empty Cache Button

Cache clearing made easy. One click
Extension 🎯 - GraphQL developer tools

Developer tools panel for GraphQL development
Extension 🎯 - JSON Lite

Fast JSON viewer - highlights, shows items count/size, handles large files
Extension 🎯 - Open Pesticide

Outlines each element on the page to help you visualize their dimensions and overcome those annoying CSS layout issues
Extension 🎯 - React Developer Tools

React Developer Tools is a tool that allows you to inspect a React tree, including the component hierarchy, props, state, and more
Extension 🎯 - Web Developer Checklist

Analyses any web page for violations of best practices
Extension 🎯 - Tota11y: Accessibility toolkit

Inserts the tota11y JS file from Khan Academy into the current tab so that you can visualize how the current page performs with assistive technologies

Chrome

Extension 🎯 - React Developer Tools

Adds React debugging tools to the Chrome Developer Tools
Extension 🎯 - Redux DevTools

Adds Redux debugging tools for any architectures which handle state
Extension 🎯 - Grid Ruler

Create grids and measure their distance easily
Extension 🎯 - Design Grid Overlay

This extension displays grid and measurement overlays for a design grid system
Extension 🎯 - ColorZilla

Get a color reading from any point in your browser, quickly adjust this color and paste it into another program
Extension 🎯 - VisBug

Design debug tools
Extension 🎯 - Wappalyzer

A browser extension that uncovers the technologies used on websites.
Extension 🎯 - JSON Viewer Awesome

A browser extension for visualize formatted JSON responses from APIs
Extension 🎯 - Axe

A browser extension that reveals accesibility issues
Extension 🎯 - Spider

Spider is a smart point-and-click web scraping tool
Extension 🎯 - WhatFont

The easiest way to identify fonts on web pages
Extension 🎯 - Lighthouse

Audit page to improve performance. The report contain many advices
Extension 🎯 - Vue.js devtools

Extension for debugging Vue.js applications

FONTS

Fonts 💬 - Google-Sans-Font

Google-Sans-Font
Fonts 💬 - Cereal Airbnb Font

Cereal Airbnb Font
Fonts 💬 - fontsquirrel.com

Free squirrel fonts
Fonts 💬 - urbanfonts.com

Free urban fonts
Fonts 💬 - Google fonts

Free google fonts

UI Libraries

Web 🚀 - Material Kit React

New design inspired by Google's material design
Web 🚀 - Material UI

React components for faster and easier web development
Web 🚀 - React Bootstrap

The most popular front-end framework. Rebuilt for React
Web 🚀 - React Virtualized

React components for efficiently rendering large lists and tabular data
Web 🚀 - Argon Design System React

Start your development with a Design System for Bootstrap 4, React and Reactstrap
Web 🚀 - BlueprintJs

A React based UI toolkit fot the web
Web 🚀 - Semantic UI

User Interface is the language of the web
Web 🚀 - React Toolbox

Bootstrap your application with beautiful Material Design Components
Web 🚀 - React Desktop

Designe to bring a native desktop experience to the web, featuring many macOS Sierra and Windows 10 components
Web 🚀 - Osen

The most beautiful and efficient way to develop HTML5 hybrid and mobile web apps
Web 🚀 - Evergreen

A Design System for the Web
Web 🚀 - Reactstrap

Easy to use React Bootstrap 4 components
Web 🚀 - RebassJs

React primitive UI components
Web 🚀 - Grommet

Build responsive and accessible mobile-first projects
Web 🚀 - Elemental UI

A UI Toolkit for React.js Websites and Apps
Web 🚀 - RsuiteJs

A suite of React components, sensible UI design, and a friendly development experience
Web 🚀 - Belle

Configurable React Components with great UX
Web 🚀 - React MD

This project's goal is to be able to create a fully accessible material design
Web 🚀 - Prime React

The Most Complete UI Framework
Web 🚀 - Kendo React UI

UI for React Developers
- Web 🚀 - Nivo UI Chart
_UI for create react chart component _

CSS

Web 🌏 - gradientmagic.com

Magic Gradients just with CSS
Web 🌏 - cssstats.com

Analyze your CSS
Web 🌏 - every-layout.dev

Relearn CSS layout
Web 🌏 - cssmatic.com

Generate gradient, border radios, noise texture and box shadow
Web 🌏 - css-tricks.com

Snippets, Articles, Newletters, Guides, Guides and more
Web 🌏 - cssreference.io

CSS full cheatsheet
Web 🌏 - csstriggers.com

How browsers react to css properties changes
Web 🌏 - css-effects-snippets

Css Effects Snippets
Web 🌏 - Animatopy

Css Animation Effects
Web 🌏 - CSS selectors cheatsheet

CSS selectors cheatsheet
Web 🌏 - Browser support tables

Searchable CSS and HTML support tables
Package 📦 - Animate.css

Collection of a cool animation
Package 📦 - ImageHover.css

Adding image hover animation
Package 📦 - Loading.io

CSS libraries for loading animation
Web 🌏 - grid.malven.co

CSS grid cheatsheet
Web 🌏 - flexbox.malven.co

CSS flexbox cheatsheet
Web 🌏 - css-transform.moro.es

CSS Transforms examples and output code
Web 🌏 - cssfx.dev

Beautifully simple click-to-copy CSS effects
Book 📖 - CSS Handbook

The CSS Handbook
Web 🌏 - Free Frontend

Free Frontend Code, Hints, Examples

CSS framework

Web 📓 - carbondesignsystem.com

IBM Components UI Components Library
Web 📓 - bulma.io

CSS Framework base on flexbox
Web 📓 - codyhouse.co

Share Components and CSS
Package 📓 - Hint.css

Tool tips with out using JavaScript
Package 📓 - Skeleton

CSS library to quick start your project
Package 📓 - mini.css

CSS library to provide basic template for your website

Repository

Package 📦 - dumper.js

Pretty variable inspector
Package 📦 - laxxx

Javascript plugin to create smooth & beautiful animations when you scrolllll
Package 📦 - Nano React App

Nano React App with Parcel
Package 📦 - React-Proto

Interface and components design for React app
Package 📦 - React-Cosmos

Dev tool for creating reusable React components
Package 📦 - guppy

A friendly application manager and task runner for React.js
Package 📦 - react-lifecycle-visualizer

An npm package for tracing & visualizing lifecycle methods of arbitrary React components
Package 📦 - why-did-you-render

why-did-you-render monkey patches React to notify you about avoidable re-renders

Icons

App 📱 - nucleoapp.com

Icons
Package 📦 - octicons

Icons
Package 📦 - xicons.co

Icons
Package 📦 - spovv.com

Icons
Package 📦 - pixelbuddha.net

Icons
Package 📦 - feathericons.com

Icons
Package 📦 - fontawesome.com/

Icons
Web 🌏 - iconmonstr.com

Icons finder
Web 🌏 - remixicon.com

Remixicon open source svg icons
Web 🌏 - icons8.com

Free design resources and software
Web 🌏 - flaticon.com

Icons finder
Web 🌏 - fontello.com

Icons finder

Resources

Web 🌏 - colormind.io

Colormind is a color scheme generator that uses deep learning
Web 🌏 - usehooks.com

Easy to understand React Hook recipes by Gabe Ragland
Web 🌏 - divjoy.com

Use our free web-based tool to create the perfect codebase for your next project
Web 🌏 - javascriptstuff.com

Learn the Latest JavaScript Tools
Web 🌏 - js.coach

This is an opinionated catalog of open source JS packages
Web 🌏 - undesign.learn.uno

Collection of free design tools and resources for makers, developers and designers
Web 🌏 - thepatternlibrary.com

Pattern Library
Web 🌏 - heropatterns.com

A collection of repeatable SVG background patterns for you to use on your web projects
Web 🌏 - undraw.co

Free illustrations
Web 🌏 - lawsofux.com

Laws of UX
Web 🌏 - humaaans.com

Mix-&-match illustrations of people with a design library
Web 🌏 - uigoodies.com

The best resources for designers in one place
Web 🌏 - pexels.com

High quality photos free of copyright
Web 🌏 - unsplash.com

High quality photos free of copyright
Web 🌏 - undraw.co

Open-source illustrations for every project you can imagine and create
Web 🌏 - coolors.co

A super fast color schemes generator!
Web 🌏 - colorsandfonts.com

Color styles and font pairings for everyone
Web 🌏 - mcg.mbitson.com

Material Design Palette Generator
Web 🌏 - www.figma.com

A collaborative interface design tool
Templates 🏡 - templated.co

A collection of 867 simple CSS, HTML5 & Responsive site templates, built by us and released for free under the Creative Commons
Templates 🏡 - vibe

A beautiful react.js dashboard build with Bootstrap 4
Templates 🏡 - wireddots

Free Bootstrap Themes & UI Kits for Startups

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} 💻