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.
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.
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.
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.
Download
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.
Trying to understand HTML5 compatibility on mobile and tablet browsers.
Use this bookmarklet to get a whiff of what your site will look like on older browsers that don’t support CSS3.
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.
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.
Tinkerbin lets you play around with HTML, JavaScript and CSS without creating files or uploading to servers.
Validate the HTML markup of your whole website with just one click.
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.
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.
Simpless compiles your *.less files into valid CSS.
Download
A good starting point for design that takes device resolution out of the equation.
HTML5 inline form validator.
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.
Demo | Download
Simply drag and drop your CSS files onto this page, and watch as they’re compressed on the fly.
Download
Cssizer is a simple tool to let you edit the design of an html page in real time (As you type).
This test checks which CSS3 features the browser recognizes, not whether they are implemented correctly.
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.
Download
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.
Download
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.
Download
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.
Download
Less+ Framework is a cross-device CSS grid system using media queries.
Demo | Download
Wonderflux is a powerful, free WordPress theme framework.
Download
Zoey is a lightweight framework for developing mobile apps. It is small, customisable and features a range of UI components.
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.
Gridpak is a responsive grid generator. Created by Erskine Design.
Yet another boilerplate for responsive (mobile) web design.
Demo | Download
Versatile HTML5 Responsive WordPress Framework based on the Power of Foundation.
Demo | Download
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!
The Fluid Baseline Grid System is an HTML5 & CSS3 development kit that provides a solid foundation to quickly design websites with ease.
Download
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.
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.
Demo | Download
It lets you view any webpage in multiple screen sizes, simulating the viewport of different devices.
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.
Convert hex to rgb.
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.
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
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.
Subscribe to our email newsletter for useful tips and freebies.
