๐จ
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 ClientA beautiful feature-rich GraphQL Client for all platforms
-
Extension
๐ฏ - ColorZillaGet a color reading from any point in your browser, quickly adjust this color and paste it into another program
-
Extension
๐ฏ - Empty Cache ButtonCache clearing made easy. One click
-
Extension
๐ฏ - GraphQL developer toolsDeveloper tools panel for GraphQL development
-
Extension
๐ฏ - JSON LiteFast JSON viewer - highlights, shows items count/size, handles large files
-
Extension
๐ฏ - Open PesticideOutlines each element on the page to help you visualize their dimensions and overcome those annoying CSS layout issues
-
Extension
๐ฏ - React Developer ToolsReact Developer Tools is a tool that allows you to inspect a React tree, including the component hierarchy, props, state, and more
-
Extension
๐ฏ - Web Developer ChecklistAnalyses any web page for violations of best practices
-
Extension
๐ฏ - Tota11y: Accessibility toolkitInserts 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 ToolsAdds React debugging tools to the Chrome Developer Tools
-
Extension
๐ฏ - Redux DevToolsAdds Redux debugging tools for any architectures which handle state
-
Extension
๐ฏ - Grid RulerCreate grids and measure their distance easily
-
Extension
๐ฏ - Design Grid OverlayThis extension displays grid and measurement overlays for a design grid system
-
Extension
๐ฏ - ColorZillaGet a color reading from any point in your browser, quickly adjust this color and paste it into another program
-
Extension
๐ฏ - VisBugDesign debug tools
-
Extension
๐ฏ - WappalyzerA browser extension that uncovers the technologies used on websites.
-
Extension
๐ฏ - JSON Viewer AwesomeA browser extension for visualize formatted JSON responses from APIs
-
Extension
๐ฏ - AxeA browser extension that reveals accesibility issues
-
Extension
๐ฏ - SpiderSpider is a smart point-and-click web scraping tool
-
Extension
๐ฏ - WhatFontThe easiest way to identify fonts on web pages
-
Extension
๐ฏ - LighthouseAudit page to improve performance. The report contain many advices
-
Extension
๐ฏ - Vue.js devtoolsExtension for debugging Vue.js applications
Fonts
-
Fonts
๐ฌ - Google-Sans-FontGoogle-Sans-Font
-
Fonts
๐ฌ - Cereal Airbnb FontCereal Airbnb Font
-
Fonts
๐ฌ - fontsquirrel.comFree squirrel fonts
-
Fonts
๐ฌ - urbanfonts.comFree urban fonts
-
Fonts
๐ฌ - Google fontsFree google fonts
UI Libraries
-
Web
๐ - Material Kit ReactNew design inspired by Google's material design
-
Web
๐ - Material UIReact components for faster and easier web development
-
Web
๐ - React BootstrapThe most popular front-end framework. Rebuilt for React
-
Web
๐ - React VirtualizedReact components for efficiently rendering large lists and tabular data
-
Web
๐ - Argon Design System ReactStart your development with a Design System for Bootstrap 4, React and Reactstrap
-
Web
๐ - BlueprintJsA React based UI toolkit fot the web
-
Web
๐ - Semantic UIUser Interface is the language of the web
-
Web
๐ - React ToolboxBootstrap your application with beautiful Material Design Components
-
Web
๐ - React DesktopDesigne to bring a native desktop experience to the web, featuring many macOS Sierra and Windows 10 components
-
Web
๐ - OsenThe most beautiful and efficient way to develop HTML5 hybrid and mobile web apps
-
Web
๐ - EvergreenA Design System for the Web
-
Web
๐ - ReactstrapEasy to use React Bootstrap 4 components
-
Web
๐ - RebassJsReact primitive UI components
-
Web
๐ - GrommetBuild responsive and accessible mobile-first projects
-
Web
๐ - Elemental UIA UI Toolkit for React.js Websites and Apps
-
Web
๐ - RsuiteJsA suite of React components, sensible UI design, and a friendly development experience
-
Web
๐ - BelleConfigurable React Components with great UX
-
Web
๐ - React MDThis project's goal is to be able to create a fully accessible material design
-
Web
๐ - Prime ReactThe Most Complete UI Framework
-
Web
๐ - Kendo React UIUI for React Developers
-
Web
๐ - Nivo UI ChartUI for create react chart component
CSS
-
Web
๐ - gradientmagic.comMagic Gradients just with CSS
-
Web
๐ - cssstats.comAnalyze your CSS
-
Web
๐ - every-layout.devRelearn CSS layout
-
Web
๐ - cssmatic.comGenerate gradient, border radios, noise texture and box shadow
-
Web
๐ - css-tricks.comSnippets, Articles, Newletters, Guides, Guides and more
-
Web
๐ - cssreference.ioCSS full cheatsheet
-
Web
๐ - csstriggers.comHow browsers react to css properties changes
-
Web
๐ - css-effects-snippetsCss Effects Snippets
-
Web
๐ - AnimatopyCss Animation Effects
-
Web
๐ - CSS selectors cheatsheetCSS selectors cheatsheet
-
Web
๐ - Browser support tablesSearchable CSS and HTML support tables
-
Package
๐ฆ - Animate.cssCollection of a cool animation
-
Package
๐ฆ - ImageHover.cssAdding image hover animation
-
Package
๐ฆ - Loading.ioCSS libraries for loading animation
-
Web
๐ - cssgrid-generatorCSS Grid Generator
-
Web
๐ - grid.malven.coCSS grid cheatsheet
-
Web
๐ - flexbox.malven.coCSS flexbox cheatsheet
-
Web
๐ - css-transform.moro.esCSS Transforms examples and output code
-
Web
๐ - cssfx.devBeautifully simple click-to-copy CSS effects
-
Book
๐ - CSS HandbookThe CSS Handbook
-
Web
๐ - Free FrontendFree Frontend Code, Hints, Examples
CSS Framework
-
Web
๐ - carbondesignsystem.comIBM Components UI Components Library
-
Web
๐ - bulma.ioCSS Framework base on flexbox
-
Web
๐ - codyhouse.coShare Components and CSS
-
Package
๐ - Hint.cssTool tips with out using JavaScript
-
Package
๐ - SkeletonCSS library to quick start your project
-
Package
๐ - mini.cssCSS library to provide basic template for your website
Repositories
-
Package
๐ฆ - dumper.jsPretty variable inspector
-
Package
๐ฆ - laxxxJavascript plugin to create smooth & beautiful animations when you scrolllll
-
Package
๐ฆ - Nano React AppNano React App with Parcel
-
Package
๐ฆ - React-ProtoInterface and components design for React app
-
Package
๐ฆ - React-CosmosDev tool for creating reusable React components
-
Package
๐ฆ - guppyA friendly application manager and task runner for React.js
-
Package
๐ฆ - react-lifecycle-visualizerAn npm package for tracing & visualizing lifecycle methods of arbitrary React components
-
Package
๐ฆ - why-did-you-renderwhy-did-you-render monkey patches React to notify you about avoidable re-renders
Icons
-
App
๐ฑ - nucleoapp.comIcons
-
Package
๐ฆ - octiconsIcons
-
Package
๐ฆ - xicons.coIcons
-
Package
๐ฆ - spovv.comIcons
-
Package
๐ฆ - pixelbuddha.netIcons
-
Package
๐ฆ - feathericons.comIcons
-
Package
๐ฆ - fontawesome.comIcons
-
Package
๐ฆ - IcoMoonIcons
-
Web
๐ - iconmonstr.comIcons finder
-
Web
๐ - remixicon.comRemixicon open source svg icons
-
Web
๐ - icons8.comFree design resources and software
-
Web
๐ - flaticon.comIcons finder
-
Web
๐ - fontello.comIcons finder
-
Web
๐ - sparkk.frSVG Icons
Resources
-
Web
๐ - geopatternSVG Pattern generator
- Web
๐ - W3School
Css Docs
- Web
-
Web
๐ - colormind.ioColormind is a color scheme generator that uses deep learning
-
Web
๐ - usehooks.comEasy to understand React Hook recipes by Gabe Ragland
-
Web
๐ - divjoy.comUse our free web-based tool to create the perfect codebase for your next project
-
Web
๐ - javascriptstuff.comLearn the Latest JavaScript Tools
-
Web
๐ - js.coachThis is an opinionated catalog of open source JS packages
-
Web
๐ - undesign.learn.unoCollection of free design tools and resources for makers, developers and designers
-
Web
๐ - thepatternlibrary.comPattern Library
-
Web
๐ - heropatterns.comA collection of repeatable SVG background patterns for you to use on your web projects
-
Web
๐ - lawsofux.comLaws of UX
-
Web
๐ - humaaans.comMix-&-match illustrations of people with a design library
-
Web
๐ - uigoodies.comThe best resources for designers in one place
-
Web
๐ - pexels.comHigh quality photos free of copyright
-
Web
๐ - unsplash.comHigh quality photos free of copyright
-
Web
๐ - undraw.coOpen-source illustrations for every project you can imagine and create
-
Web
๐ - coolors.coA super fast color schemes generator!
-
Web
๐ - colorsandfonts.comColor styles and font pairings for everyone
-
Web
๐ - mcg.mbitson.comMaterial Design Palette Generator
-
Web
๐ - www.figma.comA collaborative interface design tool
-
Web
๐ - www.devwares.com/windframeA design and prototyping tool for building responsive websites using tailwind css
-
Templates
๐ก - templated.coA collection of 867 simple CSS, HTML5 & Responsive site templates, built by us and released for free under the Creative Commons
-
Templates
๐ก - vibeA beautiful react.js dashboard build with Bootstrap 4
-
Templates
๐ก - wireddotsFree Bootstrap Themes & UI Kits for Startups
-
Documentation
๐ - devdocsOffline first documentation platform. It combines multiple API documentations (mostly front-end stuff) in a fast, organized, and searchable interface
React
-
Web
๐ - react-svgr.comTransfrom SVG to React Component
Templates
- Web - uicookies.com Free Responsive Bootstrap Themes and HTML Templates
Contributors
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!