Design, CG Graphics & Inspiration
40+ New Tools and Services for Web Designers and Developers

40+ New Tools and Services for Web Designers and Developers

Last year, in summer we published a very informative roundup Timesaving Tools and Services for Web Developers with numerous handy resources. Such services, generators and frameworks are in a popular demand, especially among people who value their precious time. In this post you’ll find a lot of helpful things, except that it hasn’t any of jQuery plugins, as previously we’ve presented to you a showcase of 50 New jQuery Plugins For Web Developers.

HTML/CSS Tools, Services and Resources

HTML5 Please

Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are.
HTML5 Please in 40 New Tools and Services for Web Designers and Developers

Bear CSS

Bear CSS is a handy little tool for web designers. It generates a CSS template containing all the HTML elements, classes & IDs defined in your markup.
Bear CSS in 40 New Tools and Services for Web Designers and Developers

HTML KickStart

HTML KickStart is an ultra–lean set of HTML5, CSS, and jQuery (javascript) files, layouts, and elements designed to give you a headstart and save you 10’s of hours on your next web project.
HTML KickStart in 40 New Tools and Services for Web Designers and Developers
Download

CheckMyColours

CheckMyColours is a tool for checking foreground and background color combinations of all DOM elements and determining if they provide sufficient contrast when viewed by someone having color deficits.
CheckMyColours in 40 New Tools and Services for Web Designers and Developers

Mobile HTMl5

Trying to understand HTML5 compatibility on mobile and tablet browsers.
Mobile HTMl5 in 40 New Tools and Services for Web Designers and Developers

CSS3 Click Chart

CSS3 Click Chart in 40 New Tools and Services for Web Designers and Developers

deCSS3

Use this bookmarklet to get a whiff of what your site will look like on older browsers that don’t support CSS3.
deCSS3 in 40 New Tools and Services for Web Designers and Developers

Create

Create, from the Midgard Project is a comprehensive web editing interface for Content Management Systems. It is designed to provide a modern, fully browser-based HTML5 environment for managing content. Create can be adapted to work on almost any content management backend.
Create in 40 New Tools and Services for Web Designers and Developers

Periodic Table of the HTML5 Elements

Periodic Table of the HTML5 Elements in 40 New Tools and Services for Web Designers and Developers

Bootstrap Generator

Kick-start your Twitter Bootstrap project the way you want. Simply alter the options below and click “Generate” to get your compiled Bootstrap CSS file.
Bootstrap Generator in 40 New Tools and Services for Web Designers and Developers

Tinkerbin

Tinkerbin lets you play around with HTML, JavaScript and CSS without creating files or uploading to servers.
Tinkerbin in 40 New Tools and Services for Web Designers and Developers

Site-wide markup validation

Validate the HTML markup of your whole website with just one click.
Site-wide markup validation in 40 New Tools and Services for Web Designers and Developers

Stitches

Drag and drop image files into the space below and click “Generate” to create a sprite sheet and stylesheet. This demo uses a couple of HTML5 APIs, and it is only currently compatible with the latest versions of Chrome and Firefox.
Stitches in 40 New Tools and Services for Web Designers and Developers

CSSrefresh

CSSrefresh is a small, unobstructive javascript file that monitors the CSS-files included in your webpage. As soon as you save a CSS-file, the changes are directly implemented, without having to refresh your browser.
CSSrefresh in 40 New Tools and Services for Web Designers and Developers

Simpless

Simpless compiles your *.less files into valid CSS.
Simpless in 40 New Tools and Services for Web Designers and Developers
Download

The Goldilocks Approach

A good starting point for design that takes device resolution out of the equation.
The Goldilocks Approach in 40 New Tools and Services for Web Designers and Developers

ht5ifv

HTML5 inline form validator.
ht5ifv in 40 New Tools and Services for Web Designers and Developers

HTML Purifier

HTML Purifier is a standards-compliant HTML filter library written in PHP. HTML Purifier will not only remove all malicious code (better known as XSS) with a thoroughly audited, secure yet permissive whitelist, it will also make sure your documents are standards compliant, something only achievable with a comprehensive knowledge of W3C’s specifications.
HTML Purifier in 40 New Tools and Services for Web Designers and Developers
Demo | Download

CSS font stack

CSS font stack in 40 New Tools and Services for Web Designers and Developers

excssive

Simply drag and drop your CSS files onto this page, and watch as they’re compressed on the fly.

Download

Cssizer

Cssizer is a simple tool to let you edit the design of an html page in real time (As you type).
Cssizer in 40 New Tools and Services for Web Designers and Developers

The CSS3 Test

This test checks which CSS3 features the browser recognizes, not whether they are implemented correctly.
CSS3 Test in 40 New Tools and Services for Web Designers and Developers

Animate.css

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
Animate.css in 40 New Tools and Services for Web Designers and Developers
Download

foneFrame

foneFrame is a suite of HTML5-based tools that create web pages in the sweet spot shared by Android and iPhone. foneFrame is a schema and naming convention implemented as a a series of templates, multiple free online generators, and misc. tools & widgets. The core foneFrame framework is free, licensed under Creative Commons, and hosted in the cloud for decreased latency & ease of use.
foneFrame in 40 New Tools and Services for Web Designers and Developers
Download

Grids and Frameworks

Toast

Toast is a super simple CSS framework, inspired by the likes of Twitter’s Bootstrap and the 960 grid system to make rapid web design and development easier.
Toast in 40 New Tools and Services for Web Designers and Developers
Download

MQFramework

MQFramework is a responsive CSS framework, MQFramework utilises the @media property to allow you to design your sites for browsers of all sizes. Based on a 12 column grid, MQFramework degrades perfectly down to mobile screen sizes.
MQFramework in 40 New Tools and Services for Web Designers and Developers
Download

Less+ Framework

Less+ Framework is a cross-device CSS grid system using media queries.
Less+ Framework in 40 New Tools and Services for Web Designers and Developers
Demo | Download

Wonderflux

Wonderflux is a powerful, free WordPress theme framework.
Wonderflux in 40 New Tools and Services for Web Designers and Developers
Download

Zoey

Zoey is a lightweight framework for developing mobile apps. It is small, customisable and features a range of UI components.
Zoey in 40 New Tools and Services for Web Designers and Developers

GuideGuide

Pixel accurate columns, rows, midpoints, and baselines can be created based on your document or marquee with the click of a button. Frequently used guide sets can be saved for repeat use. Grids can use multiple types of measurements.
GuideGuide in 40 New Tools and Services for Web Designers and Developers

Gridpak

Gridpak is a responsive grid generator. Created by Erskine Design.
Gridpak in 40 New Tools and Services for Web Designers and Developers

YAMB

Yet another boilerplate for responsive (mobile) web design.
YAMB in 40 New Tools and Services for Web Designers and Developers
Demo | Download

Reverie

Versatile HTML5 Responsive WordPress Framework based on the Power of Foundation.
Reverie in 40 New Tools and Services for Web Designers and Developers
Demo | Download

Padrino

Padrino is a ruby framework built upon the Sinatra web library. Sinatra is a DSL for creating simple web applications in Ruby. Padrino was created to make it fun and easy to code more advanced web applications while still adhering to the spirit that makes Sinatra great!
Padrino in 40 New Tools and Services for Web Designers and Developers

Fluid Baseline Grid

The Fluid Baseline Grid System is an HTML5 & CSS3 development kit that provides a solid foundation to quickly design websites with ease.
Fluid Baseline Grid in 40 New Tools and Services for Web Designers and Developers
Download

Other

Haste

Sharing code is a good thing, and it should be _really_ easy to do it. A lot of times, I want to show you something I’m seeing – and that’s where we
use pastebins. Type what you want me to see, click “Save”, and then copy the URL. Send that URL to someone and they’ll see what you see.
Haste in 40 New Tools and Services for Web Designers and Developers

MotionCAPTCHA

MotionCAPTCHA is a jQuery CAPTCHA plugin, based on the HTML5 Canvas Harmony procedural drawing tool by Mr Doob and the $1 Unistroke Gesture Regonizer algorithm (and the more recent Protractor algorithm improvement), requiring users to sketch the shape they see in the canvas in order to submit a form.
MotionCAPTCHA in 40 New Tools and Services for Web Designers and Developers
Demo | Download

Responsive Design Test Bookmarklet

It lets you view any webpage in multiple screen sizes, simulating the viewport of different devices.
Responsive Design Test Bookmarklet in 40 New Tools and Services for Web Designers and Developers

αlphaPun.ch

An image with a transparent background is like a painting on a window: you can see all sorts of exciting things behind it, but you can’t reach through to touch them. αlphaPun.ch changes that! αlphaPun.ch will trace the opaque part of your png or gif image. It will then punch through the alpha channel (i.e. the transparent bit), so you can click on things behind it.
αlphaPun.ch in 40 New Tools and Services for Web Designers and Developers

Hextone

Convert hex to rgb.
 in 40 New Tools and Services for Web Designers and Developers

Snoopy

Snoopy is a bookmarklet for snooping on web pages. It’s intended for use on mobile browsers (such as Mobile Safari on the iPad) where you can’t view-source to poke around under the hood of sites to see how they’re built. You might find it useful for your desktop browser, too.
Snoopy in 40 New Tools and Services for Web Designers and Developers

Illustrator Short Keys

Illustrator Short Keys in 40 New Tools and Services for Web Designers and Developers
Download

InDesign Short Keys

InDesign Short Keys in 40 New Tools and Services for Web Designers and Developers

You might also be interested in..

Timesaving Tools and Services for Web Developers
50 New jQuery Plugins For Web Developers
Responsive Web Design Toolbox: 50 Handy Tools and Services
15 Handy HTML5/CSS3 Frameworks For Web Developers
Online Generators For Web Development – Ultimate Colleсtion

  • AndrewG,
  • February 13, 2012

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.

  • really helpful article, thanks! :)

  • Wow what an awesome list thanks for these.

  • Totally useful resources you shared! Thanks u, its literally help me!

  • Thanks for sharing these useful tools for designers and developers, these tools and resources are totally workable..

    • Hi,
        I’m keen to check out your website templates.
      Cheers,
        Jason

  • Nice collection for design art thanks for shearing!

  • awesome i am impress your work THANKS for shearing 

  • That’s great! Literally u share such a useful resources! Gonna to check them…

  • Nandini

    Extremely nicely written! 

  • Nice article!

  • Thanks for the article.

    There a re a few tools of interest to me:
    – HTML KickStart;
    – HexTone;
    – YAMB; and
    – CheckMyColors.

  • really helpful article, thanks! :)

  • Wow what an awesome list thanks for these.

  • Totally useful resources you shared! Thanks u, its literally help me!

  • Thanks for sharing these useful tools for designers and developers, these tools and resources are totally workable..

    • Hi,
        I’m keen to check out your website templates.
      Cheers,
        Jason

  • Nice collection for design art thanks for shearing!

  • awesome i am impress your work THANKS for shearing 

  • That’s great! Literally u share such a useful resources! Gonna to check them…

  • Nandini

    Extremely nicely written! 

  • Nice article!

  • Thanks for the article.

    There a re a few tools of interest to me:
    – HTML KickStart;
    – HexTone;
    – YAMB; and
    – CheckMyColors.