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!
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.
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.
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.
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.
Colourco
Colourco lets you create a number of different color themes based on a simple GUI set-up.
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.
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.
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.
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
Foundation is probably the most widely used responsive front-end development framework for developers.
Animate.CSS
Hands-down the best CSS animation presets. A really great tool.
Responsive Web CSS
Build responsive CSS media queries and breakpoints for specific devices.
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.
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.
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.
Dirty Markup
Clean up your HTML, CSS and JavaScript with the appropriately named 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.
Glyph Search
Glyph Search let’s you search a number of free online glyph icon libraries.
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.
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.
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.
Type Wonder
Type Wonder let’s you test webfonts on any live site.
IcoMelon
IcoMelon is a free online library and generator for SVG based web icons.
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.
WP Test
WP Test is a set of data testing tools that check the integrity of your WordPress plugins and themes.
UI Cloud
UI Cloud is the largest online database of user interface designs, letting you search through almost 50,000 designs.
RAW
Raw let’s you easily and quickly turn spreadsheet data into SVG web visualizations.
Bento
Bento is an online resource for learning web development, all links are categorized into various mark-up languages.
FlatIcon
FlatIcon is a free online database of over 25, 000 vector icons.
Bitters
Bitters is a free starter template for setting up projects based on bourbon and SASS.
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.
Color Template
Color template is an online development and learning resource for creating color templates for web implementation.
IcoMoon
IcoMoon is a free online library and generator for font icons.
Ink
Ink is an online tool for creating responsive HTML email templates that are cross-browser/device compatible.
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.
Script SRC.net
Script src is a simple website for all the most current and widely used script tags.
Sprite Box
Sprite Box let’s you easily create image sprites for web implementation.
Diff Checker
A simple tool for finding differences and comparing markup.
Bootstrap
Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
Browser Hacks
BrowserHacks is an extensive list of browser specific CSS and JavaScript hacks from all over the interwebs.
Prefix Free
Prefix Free is a JavaScript based plugin that automatically adds browser prefixes to your CSS.
Brackets
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.
DropZone.js
DropzoneJS is an open source library that provides drag’n'drop file uploads with image previews.
Hint.CSS
Hint.CSS is free css based library for tooltips based on SASS.
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.
Top Drawer
Based on Modernizer, Top Drawer is plugin for smoother reveal menus in small contexts using CSS3 rather than animating with JavaScript.
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.
Hooks.js
Hooks.js is a small plugin that allows app style ‘pull to refresh’ functionality on the web.
SVG.js
A lightweight library for manipulating web SVG.
Profound Grid
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.
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.
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
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.
No comments:
Post a Comment