Smashing collection of tools and libraries you need to know as a web-developer

Oct 23, 2017

Frontend is a tricky thing. It’s easy to comprehend. However, it’s hard to become a master hand at it due to a great number of peculiarities. Fortunately, developers and designers create tools that make it easier to perform routine tasks and get freedom at work. That is why we decided to collect the most important ones here.


Extract CSS

This tool fetches id, classes and inline styles from HTML document and displays them as CSS.


A formatting tool for improving the code quality which sorts out CSS properties in a predefined order.

CSS Compressor

This application is designed to compress and optimize CSS code.

Live CSS Editor

The extension for Chrome and Safari that allows experimenting with CSS rules on any site.


This tool displays a relative size em. You just need to enter the necessary parent value in px.

Really Quick Responsive Web Design Calculator

RQRWDC is a responsible tool in web design that allows to convert the width values of elements from the percentage into px.

CSS Animation Generator

A tool for fast animation generating. To use the generated code in HTML and CSS, you should just insert it into your project.


A tool for converting SVG images into CSS icons.


A convenient app for starting circular CSS animations.

Create CSS3

CSS code generator that works according to chosen parameters. If possible, it provides alternative variations.


A simple Flexbox code generator.

This program is used to assign the image with a universal identifier as a line that can be included in HTML and CSS files.


This tool creates a custom template based on HTML5 Boilerplate. Select the template if you need, define between JS and jQuery, and set the required compatibility settings.

Layer Styles

A simple and easy to use tool to create CSS − it’s almost a graphics editor. It allows to add shadows, background, borders and creates a cross-browser code.

Mobile Boilerplate

This template is used to create efficient web apps. It supports both top-popular smartphones, Blackberry, Symbian, and IE Mobile devices.


This tool updates the table of styles in browsers and can be customised with multiple browsers. You should install NodeJS and npm.


This tool allows to change CSS properties in IDE and not to worry about updating the page.

CodeKit for macOS

CodeKit is designed to speed up and simplify the process of sites development. It supports Less, Sass, Stylus, Jade, Haml, Slim, CoffeeScript, Javascript, and Compass.


Needle is a convenient tool for testing CSS and comparing parts of websites.


The tool Normalize.css is an alternative to the tool Reset. It ensures that items are displayed correctly in different browsers according to modern standards. It purposefully regulates only those styles that require normalization. Such an approach saves time and increases performance.

Emmet (a former Zen Coding)

Emmet is a plugin to speed up and edit the code using numerous and very handy abbreviations.


This is a CSS processor written on PHP that offers you additional opportunities with CSS.

JS tools

Modernizr 2

Modernizr is a popular open source JS library which helps create sites on HTML and CSS3. The second version has new features that allow to combine browser’s opportunities with media requests and resources load to increase performance and optimization.


FitText is a jQuery plugin to create a responsive and floating layout.

jQuery Waypoints

Waypoints is a jQuery plugin allowing to tune the function performance through scrolling towards the element.


A set of JS syntax extensions that simplify its usage.


This library is inspired by utilities URL Route/Dispatch presented in the following frameworks: Rails, Pyramid, Django, CakePHP, CodeIgniter, etc. It parses the input string and defines the desired action.

Grid Calculator

The calculator that allows to tune the net in no time and load it in Adobe Illustrator or Photoshop.

The site that ensures a simple way to align editing. All you need is to place the dimensions after the provided URL to get a background image with the page layout.

Previous articleNext article