juandiego26/frontend-tools

Community frontend tools for developers

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.

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

CSS

• 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

• 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

Icons

• App 📱 - nucleoapp.com

  Icons

• Package 📦 - octicons

  Icons

• Package 📦 - xicons.co

  Icons

• Package 📦 - spovv.com

  Icons

• Package 📦 - pixelbuddha.net

  Icons

• Package 📦 - feathericons.com

  Icons

• Web 🌏 - iconmonstr.com

  Icons finder

• Web 🌏 - remixicon.com

  Remixicon open source svg icons

Resources

• Web 🌏 - unsplash.com

  High quality photos free of copyright

• Web 🌏 - coolors.co

  A super fast color schemes generator!

• Web 🌏 - mcg.mbitson.com

  Material Design Palette Generator

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

Thanks goes to these wonderful people (emoji key):

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