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.
Image may be NSFW.
Clik here to view.

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.
Image may be NSFW.
Clik here to view.

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.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.

Mobile HTMl5

Trying to understand HTML5 compatibility on mobile and tablet browsers.
Image may be NSFW.
Clik here to view.

CSS3 Click Chart

Image may be NSFW.
Clik here to view.

deCSS3

Use this bookmarklet to get a whiff of what your site will look like on older browsers that don’t support CSS3.
Image may be NSFW.
Clik here to view.

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.
Image may be NSFW.
Clik here to view.

Periodic Table of the HTML5 Elements

Image may be NSFW.
Clik here to view.

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.
Image may be NSFW.
Clik here to view.

Tinkerbin

Tinkerbin lets you play around with HTML, JavaScript and CSS without creating files or uploading to servers.
Image may be NSFW.
Clik here to view.

Site-wide markup validation

Validate the HTML markup of your whole website with just one click.
Image may be NSFW.
Clik here to view.

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.
Image may be NSFW.
Clik here to view.

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.
Image may be NSFW.
Clik here to view.

Simpless

Simpless compiles your *.less files into valid CSS.
Image may be NSFW.
Clik here to view.
Download

The Goldilocks Approach

A good starting point for design that takes device resolution out of the equation.
Image may be NSFW.
Clik here to view.

ht5ifv

HTML5 inline form validator.
Image may be NSFW.
Clik here to view.

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.
Image may be NSFW.
Clik here to view.
Demo | Download

CSS font stack

Image may be NSFW.
Clik here to view.

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).
Image may be NSFW.
Clik here to view.

The CSS3 Test

This test checks which CSS3 features the browser recognizes, not whether they are implemented correctly.
Image may be NSFW.
Clik here to view.

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.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
Download

Less+ Framework

Less+ Framework is a cross-device CSS grid system using media queries.
Image may be NSFW.
Clik here to view.
Demo | Download

Wonderflux

Wonderflux is a powerful, free WordPress theme framework.
Image may be NSFW.
Clik here to view.
Download

Zoey

Zoey is a lightweight framework for developing mobile apps. It is small, customisable and features a range of UI components.
Image may be NSFW.
Clik here to view.

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.
Image may be NSFW.
Clik here to view.

Gridpak

Gridpak is a responsive grid generator. Created by Erskine Design.
Image may be NSFW.
Clik here to view.

YAMB

Yet another boilerplate for responsive (mobile) web design.
Image may be NSFW.
Clik here to view.
Demo | Download

Reverie

Versatile HTML5 Responsive WordPress Framework based on the Power of Foundation.
Image may be NSFW.
Clik here to view.
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!
Image may be NSFW.
Clik here to view.

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.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.

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.
Image may be NSFW.
Clik here to view.
Demo | Download

Responsive Design Test Bookmarklet

It lets you view any webpage in multiple screen sizes, simulating the viewport of different devices.
Image may be NSFW.
Clik here to view.

α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.
Image may be NSFW.
Clik here to view.

Hextone

Convert hex to rgb.
Image may be NSFW.
Clik here to view.

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.
Image may be NSFW.
Clik here to view.

HTML/CSS Tools, Services and Resources

Grids and Frameworks

Other

You might also be interested in..

Trending Articles