Design, CG Graphics & Inspiration
Timesaving Tools and Services for Web Developers

Timesaving Tools and Services for Web Developers

Web developers should always be abreast of the latest news. And to make their work easier and to help in saving their time a lot of talented web developers from all around the world always try to bring some new decisions and tools. To your attention, we would like to showcase some fresh timesaving tools among which you’ll find useful services, resources, generators and frameworks that you might find very interesting.

HTML/CSS Tools

Initializr

Initializr by Jonathan Verrecchia is an HTML5 templates generator based on HTML5 Boilerplate, a powerful HTML5 template created by Paul Irish and Divya Manian. Initializr – simple way to generate a clean customizable template based on Boilerplate.
Initializr in Timesaving Tools for Web Developers

HTML5 Boilerplate

HTML5 Boilerplate in Timesaving Tools for Web Developers
HTML5 Boilerplate – professional and very powerful tool for web development. It’s HTML/CSS/JS template with best hacks for cross-browser compatibility, true HTML5( you can use new tags right now), support for mobile browsers, special classes for Internet Explorer and many other features!

HTML Email Boilerplate

This website and its sample code creates a template of sorts, absent of design or layout, that will help you avoid some of the major rendering problems with the most common email clients out there. HTML Email Boilerplate will provide some helpful examples and snippets that will keep your email design rendering as true-to-form as possible.
HTML Email Boilerplate in Timesaving Tools for Web DevelopersDownload

CSS shadow generator

A fantastic CSS shadow generator free for use and with tons of features, including more than 8 shadow styles, opacity, blur and position handlers, real-time preview of both design and source code. The generator features a very intuitive control section where you can switch between the different shadow styles and adjust their position, opacity and blur values.
CSS shadow generator in Timesaving Tools for Web Developers

CSSWARP

CSS3Warp is a proof of concept: create Illustrator like “warped” text (text following an irregular path) with pure CSS and HTML. CSS3 brings new text-transform options: rotation, skew, matrix, transform-origin… By applying the right transformations to every single letter it is possible to create the illusion of text following a path.
Type your text into the webform, click “Warp it!”, then alter the path as you like. You can attach your text to a circle or a bezier. Add or delete points, or change position, angle and radius of the circle. When your done, click “Generate code”. Copy the CSS and HTML into your document.
CSSWARP in Timesaving Tools for Web Developers

CSS Lint

CSS Lint is a tool to help point out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don’t want.
CSS Lint in Timesaving Tools for Web Developers

CSS3 Pie

CSS3 Pie makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.
CSS3 Pie in Timesaving Tools for Web DevelopersDownload

Schema.org

This site provides a collection of schemas, i.e., html tags, that webmasters can use to markup their pages in ways recognized by major search providers. Search engines including Bing, Google and Yahoo! rely on this markup to improve the display of search results, making it easier for people to find the right web pages.
Schema.org in Timesaving Tools for Web Developers

CSS Font Stack

CSS Font Stack – the long awaited CSS font stack resource. Just click the stack CSS Font Stack.
CSS Font Stack in Timesaving Tools for Web Developers

Google Swiffy

Swiffy converts Flash SWF files to HTML5, allowing you to reuse Flash content on devices without a Flash player (such as iPhones and iPads).

Google Swiffy in Timesaving Tools for Web Developers

Fractal

A simple HTML and CSS Validator for email designers and marketers.

Fractal in Timesaving Tools for Web Developers

Spritecow

Sprite Cow helps you get the background-position, width and height of sprites within a spritesheet as a nice bit of copyable css.

Spritecow in Timesaving Tools for Web Developers

CSS3 Buttonize Framework

The Light-Weight, Flexable Instant Button Framework.

CSS3 Buttonize Framework in Timesaving Tools for Web Developers

Normalize.css

Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards.

Normalize.css in Timesaving Tools for Web Developers

CSS3 Simple Shapes – Cheat Sheet

CSS3 Simple Shapes – Cheat Sheet in Timesaving Tools for Web Developers

Download

Textify.it

Textify.it visualizes images using text. Lots of text.
Drag and drop images on to the page to start, every image produces a unique result!

Textify.it in Timesaving Tools for Web Developers

Layerstyles

This handy tool lets you add drop shadow, inner shadow, background, border and border radius and generates cross-browser CSS code with Photoshop-like interface.

Layerstyles in Timesaving Tools for Web Developers

css-x-fire

Allows editing CSS properties in the IDE from Firebug CSS editor.
Download

Skeleton

Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.

Skeleton in Timesaving Tools for Web Developers

Download

Kotatsu

Kotatsu – a simple html table generator

Kotatsu in Timesaving Tools for Web Developers

Spritemapper

Spritemapper is an application that merges multiple images into one and generates CSS positioning for the corresponding slices.

Spritemapper in Timesaving Tools for Web Developers

Ultimate CSS Gradient Generator

A powerful Photoshop-like CSS gradient editor from ColorZilla.

Ultimate CSS Gradient Generator in Timesaving Tools for Web Developers

Fructose

Fructose is a subset of Ruby that’s designed to be compiled into PHP 5.x. The generated code should run on any PHP version above 5.0. Most major Ruby features are supported, including operator overloading and blocks.

Fructose in Timesaving Tools for Web Developers

FFFFALLBACK

A simple tool for bulletproof web typography.

FFFFALLBACK in Timesaving Tools for Web Developers

Laker

Laker is a compendium of files, frameworks, styles and tips for designing digital publications in HTML5.

Laker in Timesaving Tools for Web Developers

Download

Holmes

Holmes is stand-alone diagnostic CSS stylesheet that can highlight potentially invalid, inaccessible or erroneous HTML(5) markup by adding one class.

Holmes in Timesaving Tools for Web Developers

Download

LiveReload

LiveReload applies CSS and JavaScript file changes without reloading a page + automatically reloads a page when any other file changes (html, image, server-side script, etc).

LiveReload in Timesaving Tools for Web Developers

Vogue

Auto-reload stylesheets whenever CSS files are saved.

Vogue in Timesaving Tools for Web Developers

HTML5 formbuilder

Simple generator for creating html5 forms.

HTML5 formbuilder in Timesaving Tools for Web Developers

CSS3menu.com

Creating a nice looking menu no longer needs all the code and time it use to, thanks to CSS3. Using this FREE CSS3Menu you can create great looking buttons using just CSS3 in a few clicks.

CSS3menu.com in Timesaving Tools for Web Developers

CSS3 Button Maker from css-tricks.com

CSS3 Button Maker from css-tricks.com in Timesaving Tools for Web Developers

Demo

CSSPrefixer

You hate writing vendor prefixes for all browsers? Just let CSSPrefixer do it for you!

CSSPrefixer in Timesaving Tools for Web Developers

CSSsitemap System

CSSsitemap System in Timesaving Tools for Web Developers

DemoDownload

CSS Pivot

Add CSS styles to any website, and share the result with a short link. Invite others to submit improvements for your website.

CSS Pivot in Timesaving Tools for Web Developers

PCSS

Shortcut-oriented Server-side CSS3 Preprocessor.

PCSS in Timesaving Tools for Web Developers

Needle

Needle is a tool for testing your CSS with Selenium and nose. It checks that CSS renders correctly by taking screenshots of portions of a website and comparing them against known good screenshots. It also provides tools for testing calculated CSS values and the position of HTML elements.

Needle in Timesaving Tools for Web Developers

Less Boilerplate

Less Boilerplate in Timesaving Tools for Web Developers

Download

Lorempixum

Placeholder Images for every case.

Lorempixum in Timesaving Tools for Web Developers

CSS3 Generator

CSS3 Generator in Timesaving Tools for Web Developers

320 and up

‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point. Try this page at different window sizes and on different devices to see it in action.

320 and up in Timesaving Tools for Web Developers

Download

CopyPasteCharacter.com

CopyPasteCharacter – handy tool for copying & pasting those HTML entities.

CopyPasteCharacter.com in Timesaving Tools for Web Developers

Html-ipsum

Lorem ipsum snippets with HTML markup for test your CSS.

Html-ipsum in Timesaving Tools for Web Developers

CSS Prism

Enter The url of any CSS file to view and modify its color spectrum.

CSS Prism in Timesaving Tools for Web Developers

Gridless

Gridless is an awesome HTML5 and CSS3 framework for making responsive, cross-browser websites with beautiful typography.

Gridless in Timesaving Tools for Web Developers

Demo

JavaScript Tools and Libraries

Modernizr 2

Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.

Modernizr 2 in Timesaving Tools for Web Developers

FitText

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

FitText in Timesaving Tools for Web Developers

Download

IE7.js

IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.

IE7.js in Timesaving Tools for Web Developers

Download

Paper.js

Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.

Paper.js in Timesaving Tools for Web Developers

Download

Boombox.js

Use HTML5

Boombox.js in Timesaving Tools for Web Developers

Download

Popcorn.js

The HTML5 Media Framework

Popcorn.js in Timesaving Tools for Web Developers

Download

Treesaver.js

Download

Bibliotype

Bibliotype is a (very) simple HTML, CSS and JS based library for rapid prototyping long-form typography and reading on tablets.

Bibliotype in Timesaving Tools for Web Developers

Demo

HIGHLIGHT.JS v6.0

Highlight.js highlights syntax in code examples on blogs, forums and in fact on any web pages. It’s very easy to use because it works automatically: finds blocks of code, detects a language, highlights it.

HIGHLIGHT.JS v6.0 in Timesaving Tools for Web Developers

Download

jquery.easie.js

Css3-like easings for jQuery animations.

jquery.easie.js in Timesaving Tools for Web Developers

Download

Adapt.js

Adapt.js is a lightweight (845 bytes minified) JavaScript file that determines which CSS file to load before the browser renders a page. If the browser tilts or resizes, Adapt.js simply checks its width, and serves only the CSS that is needed, when it is needed.

Adapt.js in Timesaving Tools for Web Developers

Download

Live.js

Say goodbye to Alt-Tab. Live.js makes sure you’re always looking at the latest version of the page you’re working on, whether you’re writing HTML, CSS or Javascript.

Live.js in Timesaving Tools for Web Developers

Download

Microjs

Micro-frameworks are definitely the pocketknives of the JavaScript library world: short, sweet, to the point. And at 5k and under, micro-frameworks are very very portable. A micro-framework does one thing and one thing only — and does it well. No cruft, no featuritis, no feature creep, no excess anywhere.

Microjs in Timesaving Tools for Web Developers

Ninja UI

A jQuery plugin enabling beautiful web interface objects efficiently and unobtrusively.

Ninja UI in Timesaving Tools for Web Developers

Morf.js

Morf.js – Custom Easing Functions for CSS3 Transition.

in Timesaving Tools for Web Developers

Download

Simple Overlay

A jQuery Plugin for easily adding lightweight, flexible overlays to your projects.
Use custom effects, customize using CSS hooks, define custom callbacks for further action, take advantage of CSS3 and more.

Simple Overlay in Timesaving Tools for Web DevelopersDownload

Grids

Columnal

The Columnal CSS grid system is a “remix” of a couple others with some custom code thrown in. The elastic grid system is borrowed from cssgrid.net, while some code inspiration (and the idea for subcolumns) are taken from 960.gs.

Columnal in Timesaving Tools for Web Developers

DemoDownload

Griddle.it

A clean and simple way to align your website layout. No complex grid frameworks necessary.

Griddle.it in Timesaving Tools for Web Developers

Susy

Susy is different – a simple grid system that is fully customized to your markup, your grid, your designs, the way you want them.

Susy in Timesaving Tools for Web Developers

Modulargrid

Modulargrid in Timesaving Tools for Web Developers

Gridcalculator

Gridcalculator in Timesaving Tools for Web Developers

Javascriptgrid

Just drag the snipplets into your bookmarks bar, open your URL and click the bookmark.

Javascriptgrid in Timesaving Tools for Web Developers

Tinyfluidgrid

Tinyfluidgrid in Timesaving Tools for Web Developers

A Fluid Grid Calculator by Harry Roberts

A Fluid Grid Calculator by Harry Roberts in Timesaving Tools for Web Developers

Bonus

Chop

Nice service that allows you to quickly and easily paste and share a piece of code. Just copy and paste the lines in question, add your notes and share them with a unique URL.
Chop in Timesaving Tools for Web Developers

GeneratePrivacyPolicy.com

With GeneratePrivacyPolicy.com you may create professional privacy policies with our user friendly tools. Privacy policy agreements are tailored specifically for your website, your business and your requirements.

GeneratePrivacyPolicy.com in Timesaving Tools for Web Developers

SHARE THIS POST

Andrew is the chief editor of Splashnology blog. He has many years of experience within the web design industry and has a passion for the latest web technologies. 3D Models Marketplace

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.

  • Awesome collection of tools :)

  • Great list of tools…big help!

  • Endy

    great site, great collection, great tutorial and i’ve got great inspiration…

  • Awesome  Thanks

  • Zjcli

    greatful

  • Anonymous

    [email protected]:disqus ….This is crazy…Sister’s girlfriend makes 73 hourly on the PC. She has been fired from work for 11 months but last month her paycheck was 7756 USD just working on the PC for a few hours. Read about it on this web site…. ..http://alturl.com/ubqk2

  • Anonymous

    what a great list several of those were new to me.

  • You have contributed valuable,
    interesting and well-written information on this subject.

  • Awesome collection of tools :)

  • Great list of tools…big help!

  • Endy

    great site, great collection, great tutorial and i’ve got great inspiration…

  • Awesome  Thanks

  • Zjcli

    greatful

  • Anonymous

    [email protected]:disqus ….This is crazy…Sister’s girlfriend makes 73 hourly on the PC. She has been fired from work for 11 months but last month her paycheck was 7756 USD just working on the PC for a few hours. Read about it on this web site…. ..http://alturl.com/ubqk2

  • Anonymous

    what a great list several of those were new to me.

  • You have contributed valuable,
    interesting and well-written information on this subject.