Tools
List of tools, libraries, browser extensions, editor packages.
Chrome Extensions
- WhatFont - Identify fonts used on web pages
- ColorPick Eyedropper - identify any colour on any web page
- Window Resizer - will resize any screen you’re working on to a range of popular screen sizes.
- BrowserStack - Rather than different screen sizes, this extension lets you test with different browsers.
- CSS Viewer - hows you the CSS properties of a given page wherever you hover your mouse.
- Lorem Ipsum Generator - It generates filler text for demo websites
- Ghostery - privacy extension designed to block intrusive ads, stop tracking, prevent data collection and block all those page elements that slow you down.
- HTML Validator - HTML Validator is a quick tool for checking your HTML within a browser. There are hundreds of HTML tools out there and you’ll likely have a bunch of them already. But HTML Validator is genuinely useful for quickly validating markup within the browser.
- React Developer Tools - React Developer Tools are specifically for the open source React JavaScript library. If you work with React, this extension helps you inspect the library as required.
- JSON Viewer - JSON Viewer is an alternative to JSONView and helps manage JSON data into a quickly recognizable hierarchy view in a browser window. Working with raw JSON data is fine when you have the time, but using this addon makes the code easier to quickly absorb and use
- ColorZilla - ColorZilla is a superb Chrome developer extension for colour selection. It includes an eyedrop colour selector, a colour history tool, a CSS gradient analyzer and a page analyzer that assesses colours on a web page.
- Dimensions - Dimensions is a dynamic measure that uses your mouse. It’s a very useful Chrome developer extension if you want to measure spacing, dimensions, gaps between page elements and anything else you see on the page.
- Page Ruler - Page Ruler is similar to Dimensions in that it’s a dynamic measurement extension. While Dimensions can measure the height and width of elements, it is more useful for measuring between them. Page Rule measures those elements very accurately.
- Check My Links - Check My Links does exactly what it says on the tin. It’s a super-simple way to check for broken links. It can also check for valid links and redirected links as well as broken ones. While technically a dev tool, this Chrome developer extension could be useful for SEO and other specialities too.
- Lightshot -Lightshot is another of those Chrome developer extensions that could be useful for all kinds of people. While devs will likely use it a lot, UX testers. user testers, instructors, graphic designers and all kinds of users will make great screenshots with this tool.
VS Code Extensions
Bracket Pair Colorizer - The Bracket Pair Colorizer extension is a good example of the power of VS Code's extensibility and makes heavy use of the Decoration API to colorize brackets.
Better Comments - The Better Comments extension will help you create more human-friendly comments in your code.
Snippets - VS Code has built-in snippets for a number of languages such as: JavaScript, TypeScript, Markdown, and PHP.
CSS Peak - Allow peeking to css ID and class strings as definitions from html files to respective CSS. Allows peek and goto definition.
Prettier - is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
Relative Path -Get the relative path to any file in your workspace
GitLens - GitLens supercharges Git inside VS Code and unlocks untapped knowledge within each repository.
Import Cost - This extension will display inline in the editor the size of the imported package.
Intellisense - IntelliSense is a code-completion aid that includes a number of features: List Members, Parameter Info, Quick Info, and Complete Word. These features help you to learn more about the code you're using, keep track of the parameters you're typing, and add calls to properties and methods with only a few keystrokes.
Libraries & Frameworks
These are time saver for web designers
Bootstrap
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
- Powerful responsive design
- Built-in libraries of resources
- Low learning curve
- Quickly build prototypes
$ npm install bootstrap
$ gem install bootstrap -v 4.4.1
<!-- BootstrapCDN -->
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
Font Awesome
Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
<!-- Example - Camera Image/Icon -->
<i class="fas fa-camera"></i> <!-- this icon's 1) style prefix == fas and 2) icon name == camera -->
<i class="fas fa-camera"></i> <!-- using an <i> element to reference the icon -->
<span class="fas fa-camera"></span> <!-- using a <span> element to reference the icon -->
Animate.css
animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. It is a great framework that lets you add CSS animations. These include bounce, flash, pulse, rubberBand, shake, swing, tada, wobble, jello, heartBeat, bounceIn, etc.
Foundation
The most advanced responsive front-end framework in the world.
- Create responsive design
- Powerful Email framework - Build responsive emails that look great on any device and all of the major email clients, even Outlook!
- Online webinar training support
- Easy to customize
- Vertical timeline layout
- Responsive HTML templates and UI components
Link / For Sites / For Emails
Ionic
Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS CSS components, gestures, and tools for building highly interactive apps. Built with Sass and optimized for AngularJS.
- New UI components and gestures
- Brand new custom animations API
- New icons, colors, and theming
- Official React & Angular integrations
Install
$ npm install -g @ionic/cli
Start
$ ionic start myApp tabs
Run the App
$ cd myApp
$ ionic serve
Normalize.css
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
$ npm install normalize.css
- Preserves useful defaults, unlike many CSS resets
- Normalizes styles for a wide range of elements
- Corrects bugs and common browser inconsistencies
- Improves usability with subtle modifications
- Explains what code does using detailed comments Link
Others - Tools that make the life of designers easier
CSS3 Generator
CSS3 Generator makes the task of generating useful cross-browser snippets for a range of CSS3 properties, simple and convenient.This tool covers all vendor prefixes. All you need to do is use the drop-down menu to pick the element of choice, generate code to style it and paste it into your project.
CSS LINT
CSS Lint is a tool to help point out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don't want.
Code Beautifier
The Code Beautifier is a simple, no frills tool that helps you clean your CSS. Paste or link CSS and just wait for the tool to do its job.