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.
CSSmatic Border Radius Generator
If you’re not that familiar with border-radii in CSS this awesome free tool does all the leg work for you. It’s all done through a tidy GUI, which makes things easy.
Responsive Web CSS
Build responsive CSS media queries and breakpoints for specific devices.
CSS3 Maker
CSS has a so many great features for animation, transitions, text-shadow and more. While these are an integral part of any designers repertoire, if you’re having trouble with something, CSS3 Maker has a number of free online tools. It’s all GUI based an outputs the code with all major vendor prefixes. It’s also a great way to learn how to create various effects.
jQuery Function Builder
If you’re need help creating simple jQuery functions this tool can be really helpful. While it may not look all that fancy, it gets the job done and comes with a number of effects and triggers like mouse-over, click and show/hide or fade-in.
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.
Type Scale
Type Scale let’s you setup CSS based typography sizes for your projects.
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.
Noisli
Noisli is a fantastic and good looking background noise and color generator ideal for working and relaxing. Plus a Text Editor for distraction-free writing.
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.
0 comments:
Post a Comment