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.
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.
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.
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.
Mobile HTMl5
Trying to understand HTML5 compatibility on mobile and tablet browsers.
CSS3 Click Chart
deCSS3
Use this bookmarklet to get a whiff of what your site will look like on older browsers that don’t support CSS3.
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.
Periodic Table of the HTML5 Elements
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.
Tinkerbin
Tinkerbin lets you play around with HTML, JavaScript and CSS without creating files or uploading to servers.
Site-wide markup validation
Validate the HTML markup of your whole website with just one click.
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.
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.
Simpless
Simpless compiles your *.less files into valid CSS.
Download
The Goldilocks Approach
A good starting point for design that takes device resolution out of the equation.
ht5ifv
HTML5 inline form validator.
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.
Demo | Download
CSS font stack
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).
The CSS3 Test
This test checks which CSS3 features the browser recognizes, not whether they are implemented correctly.
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.
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.
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.
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.
Download
Less+ Framework
Less+ Framework is a cross-device CSS grid system using media queries.
Demo | Download
Wonderflux
Wonderflux is a powerful, free WordPress theme framework.
Download
Zoey
Zoey is a lightweight framework for developing mobile apps. It is small, customisable and features a range of UI components.
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.
Gridpak
Gridpak is a responsive grid generator. Created by Erskine Design.
YAMB
Yet another boilerplate for responsive (mobile) web design.
Demo | Download
Reverie
Versatile HTML5 Responsive WordPress Framework based on the Power of Foundation.
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!
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.
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.
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.
Demo | Download
Responsive Design Test Bookmarklet
It lets you view any webpage in multiple screen sizes, simulating the viewport of different devices.
α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.
Hextone
Convert hex to rgb.
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.
Illustrator Short Keys
InDesign Short Keys
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