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.

Index of content

Firefox Extensions
Chrome Extensions
Fonts
UI Libraries
CSS
CSS Frameworks
Repository
Icons
Resources
React
Templates
Contributors

Firefox Extensions

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 Extensions

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 🌏 - cssgrid-generator

CSS Grid Generator
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

Repositories

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
Package 📦 - IcoMoon

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
Web 🌏 - sparkk.fr

SVG Icons

Resources

Web 🌏 - geopattern

SVG Pattern generator
- Web 🌏 - W3School
Css Docs
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 🌏 - 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
Web 🌏 - www.devwares.com/windframe

A design and prototyping tool for building responsive websites using tailwind css
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
Documentation 📚 - devdocs

Offline first documentation platform. It combines multiple API documentations (mostly front-end stuff) in a fast, organized, and searchable interface

React

Web 🌏 - react-svgr.com

Transfrom SVG to React Component

Templates

Web - uicookies.com Free Responsive Bootstrap Themes and HTML Templates

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