50+ Awesome Free Tools for Web DevelopersA 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.
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!
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.
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.
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.
Colourco lets you create a number of different color themes based on a simple GUI set-up.
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.
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.
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.
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.
Foundation is probably the most widely used responsive front-end development framework for developers.
Hands-down the best CSS animation presets. A really great tool.
Responsive Web CSS
Build responsive CSS media queries and breakpoints for specific devices.
First Moments With Grunt (screen cast video) – CSS Tricks.
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.
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.
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.
Glyph Search let’s you search a number of free online glyph icon libraries.
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.
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.
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.
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.
Type Wonder let’s you test webfonts on any live site.
IcoMelon is a free online library and generator for SVG based web icons.
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.
WP Test is a set of data testing tools that check the integrity of your WordPress plugins and themes.
UI Cloud is the largest online database of user interface designs, letting you search through almost 50,000 designs.
Raw let’s you easily and quickly turn spreadsheet data into SVG web visualizations.
Bento is an online resource for learning web development, all links are categorized into various mark-up languages.
FlatIcon is a free online database of over 25, 000 vector icons.
Bitters is a free starter template for setting up projects based on bourbon and SASS.
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.
Color template is an online development and learning resource for creating color templates for web implementation.
IcoMoon is a free online library and generator for font icons.
Ink is an online tool for creating responsive HTML email templates that are cross-browser/device compatible.
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.
Script src is a simple website for all the most current and widely used script tags.
Sprite Box let’s you easily create image sprites for web implementation.
A simple tool for finding differences and comparing markup.
Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
Brackets is a free online text-editor for web designers and front-end developers.
Zurb Grid Builder
A great grid builder based on Zurb’s Foundation framework.
DropzoneJS is an open source library that provides drag’n'drop file uploads with image previews.
Hint.CSS is free css based library for tooltips based on SASS.
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.
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.
Hooks.js is a small plugin that allows app style ‘pull to refresh’ functionality on the web.
A lightweight library for manipulating web SVG.
A responsive grid system for fixed and fluid layouts. Built in SCSS, it gives you flexibility and full control.
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.
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.
What tools are you currently using in your workflow? Are there any awesome ones you would suggest? Let us know in the comments.