Monday, January 27, 2014

50+ Awesome Free Tools for Web Developers

50+ Awesome Free Tools for Web Developers

A post by Joseph Howard@http://www.pencilscoop.com/2013/12/50-awesome-free-tools-for-web-developers/
If you’re a front-end developer or web designer, chances are you spend a lot of time writing mark-up.  Luckily, there are some great tools and projects on the web for improving your next project easily and quickly.
Often you may need a little helping hand to get things done. Today we have tracked down over 50 brilliant free online tools for developers. We’ve included everything from mark-up organizers, grid systems, jQuery plugins, gradient generators and much more.
Enjoy.

Nettuts+ Prefixr

Ensuring cross-browser compatibility is a must for any project. However, writing all those browser prefixes can be a pain. Prefixr from Nettuts+ is great online tool, simply copy and paste your mark-up and it will output all the necessary prefixes for you!
free_code_tools_prefixr

CSSmatic Gradient Generator

Creating nice gradients in CSS can be tricky, particularly if you’re a visual thinker. However this free tool from CSSmatic can create any gradient, no matter how complex! A great tool for any developer.
free_code_tools_gradients

Headroom.js

Playing around with headers can be difficult and almost always requires JavaScript of some sort.Headroom is an awesome jQuery based plugin that allows you to show/hide your header until it’s needed by the user, reacting to page scrolling changes. A great plugin.
free_code_tools_headroom

Retinise.js

Retinise.js is a really simple jQuery plugin which ‘retinises’ your inline images, and because it uses ‘data-src’ instead of ‘src’ it means it only ever serves up the image you need, saving you and your users bandwidth.
free_code_tools_retinise

Pure

Pure is a set of small, responsive CSS modules that you can use in every web project, such as forms, grids, tables, buttons and much more.
free_code_tools_pure

Colourco

Colourco lets you create a number of different color themes based on a simple GUI set-up.
free_code_tools_colourco

CSS Modal

A plugin using only CSS for modals. The modals are designed using responsive web design methods. They work on all screen sizes from a small mobile phone up to high resolution screens.
free_code_tools_css_modal

Snap.SVG

Snap.SVG is a free library for SVG based web animations. It’s probably one of the better SVG-jQuery scripts available at the moment.
free_code_tools_snap-svg

ProCSSor

If you need to clean up your CSS, ProCSSor is hands-down the best free online CSS beautifier. It has host of awesome features so your mark-up gets formatted just the way you like it.
free_code_tools_css-procssor

W3C Markup Validation

Usually when you’re at the finishing stages of a project, you’ll want to ensure all your work is error free and W3C compliant. A pretty standard procedure for most, however nonetheless integral.
free_code_tools_w3c--HTML

Foundation

Foundation is probably the most widely used responsive front-end development framework for developers.
free_code_tools_foundation

Animate.CSS

Hands-down the best CSS animation presets. A really great tool.
animate.css


Responsive Web CSS

Build responsive CSS media queries and breakpoints for specific devices.
free_code_tools_resonsivecss

Grunt

Grunt is an awesome tool for developers. It’s a JavaScript task runner that minifies CSS and jQuery as well as converting SASS to CSS. And lot’s lot’s more. Take a look at these two articles to learn how to use it.
First Moments With Grunt (screen cast video) – CSS Tricks.
developer-tools-grunt

SASS

While it’s not so much of a tool as a markup language, SASS is a way of writing CSS that can save you lot’s of time and produce cleaner, less repetitive stylesheets. It’s also great for Grunt.
SASS-tools


Yeoman

A lot of these tools have funny names, Yeoman is one of them. But don’t be fooled, if you’ve decided to use Grunt you should definitely take a look at this.Yeoman is an open source project which defines an opinionated stack for web application development.
yeoman-tool


Dirty Markup

Clean up your HTML, CSS and JavaScript with the appropriately named Dirty Markup.
free_code_tools_dirty-markup

Free Formatter

If you need to convert HTML to JSON or convert something to escaped format, or pretty much any Web Dev related conversion, freeformatters.com has a whole bunch of tools ready for the job.
free_code_tools_free-formatters

Glyph Search

Glyph Search let’s you search a number of free online glyph icon libraries.
free_code_tools_glyphsearch

CodePen

Codepen is a really great site for sharing web code with the greater community. It can also serve as a great tool when you need to figure out how do something. Simply type what you’re looking for into search, and chances are someone has made it.
free_code_tools_codepen

CSS Animation Cheat Sheet

The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated.
free_code_tools_css_animation-sheet

Pre Composed Touch Gestures

A set of basic, precomposed touch-device gestures in a neatly organized zip file for you to use in product demos or presentations.
free_code_tools_touch-gesture

CSS Inliner

Sometimes you need to put your CSS styles inline. This free tool does just that. Simply paste your HTML and it puts all your styles inline.
free_code_tools_css-inline

Type Wonder

Type Wonder let’s you test webfonts on any live site.
free_code_tools_type-wonder

IcoMelon

IcoMelon is a free online library and generator for SVG based web icons.
free_code_tools_icomelon

CSS Comb

CSS Comb is a free online tool for sorting CSS properties in a number of specific orders. It also is a plugin for a number of popular text editors.
free_code_tools_css-comb

WP Test

WP Test is a set of data testing tools that check the integrity of your WordPress plugins and themes.
free_code_tools_wp-test

UI Cloud

UI Cloud is the largest online database of user interface designs, letting you search through almost 50,000 designs.
free_code_tools_ui-cloud

RAW

Raw let’s you easily and quickly turn spreadsheet data into SVG web visualizations.
free_code_tools_raw

Bento

Bento is an online resource for learning web development, all links are categorized into various mark-up languages.
free_code_tools_bento

FlatIcon

FlatIcon is a free online database of over 25, 000 vector icons.
free_code_tools_flat-icons

Bitters

Bitters is a free starter template for setting up projects based on bourbon and SASS.
free_code_tools_bitters

Subtle Patterns

Subtle Patterns is probably the best online collection of patterns for backgrounds and other uses. It’s based on user provided content but it’s curated carefully, which means no junk. There’s also a photoshop plugin available.
subtle-patterns-tool

Color Template

Color template is an online development and learning resource for creating color templates for web implementation.
free_code_tools_color-template

IcoMoon

IcoMoon is a free online library and generator for font icons.
free_code_tools_icomoon

Ink

Ink is an online tool for creating responsive HTML email templates that are cross-browser/device compatible.
free_code_tools_ink

CSS Colors

Did you know CSS has over 140 different colors like “Thistle”, “Darkorchid” and “Cornflowerblue” ? Probably not right? Well this page has a comprehensive list of all the pre-defined CSS colors available.

css-colors-tool

Script SRC.net

Script src is a simple website for all the most current and widely used script tags.
free_code_tools_script-src

Sprite Box

Sprite Box let’s you easily create image sprites for web implementation.
free_code_tools_sprite-box

Diff Checker

A simple tool for finding differences and comparing markup.
free_code_tools_dif-checker

Bootstrap

Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
free_code_tools_bootstrap

Browser Hacks

BrowserHacks is an extensive list of browser specific CSS and JavaScript hacks from all over the interwebs.
free_code_tools_browser-hacks

Prefix Free

Prefix Free is a JavaScript based plugin that automatically adds browser prefixes to your CSS.
free_code_tools_prefix-free

Brackets

Brackets is a free online text-editor for web designers and front-end developers.
free_code_tools_brackets

Zurb Grid Builder

A great grid builder based on Zurb’s Foundation framework.
free_code_tools_zurb-builder

DropZone.js

DropzoneJS is an open source library that provides drag’n'drop file uploads with image previews.
free_code_tools_dropzone

Hint.CSS

Hint.CSS is free css based library for tooltips based on SASS.
free_code_tools_hintcss

MUELLER

MUELLER is a modular grid system for responsive/adaptive and non–responsive layouts, based on Compass. You have full control over column width, gutter width, baseline grid and media–queries.
free_code_tools_mueller-modules

Top Drawer

Based on Modernizer, Top Drawer is plugin for smoother reveal menus in small contexts using CSS3 rather than animating with JavaScript.
free_code_tools_top-drawer

Toolbar.js

Toolbar.js allows you to quickly create tooltip style toolbars for use in web applications and websites. The toolbar is easily customisable using the twitter bootstrap icons and provides flexability around the toolbars display and number of icons.
free_code_tools_toolbar

Hooks.js

Hooks.js is a small plugin that allows app style ‘pull to refresh’ functionality on the web.
free_code_tools_pullrefresh

SVG.js

A lightweight library for manipulating web SVG.
free_code_tools_SVGjs

Profound Grid

A responsive grid system for fixed and fluid layouts. Built in SCSS, it gives you flexibility and full control.
free_code_tools_profound-grid

Responsive Text Sizes

Responsive design can be tricky, particularly text sizes. While this is not a tool as such, this blogpost can help you determine your text sizes across different screen sizes.
text-size-tool


Sublime Text

If you work on a mac, Sublime Text is the code-editor of choice for most professionals. While it’s not strictly free, the trial version still works.
sublime-text-tool

What tools are you currently using in your workflow? Are there any awesome ones you would suggest? Let us know in the comments.

About The Author

Joseph Howard
Hi I'm Joseph Howard. I'm a web-designer and digital media professional and I'm the creator of PencilScoop. You can get in touch with me through your preferred social media account.