The 10 best new web design tools in March

On account of not really being a tool it's not on the main list, but a special shout out this month goes to I am the fold. You might say it's a tool for your brain that teaches about the perils of designing for the fold; each line on the page is a kind of shadow left by a previous visitor representing their viewport height. There are lots and lots of lines on that page, appearing in a great variance of positions.

Win clients & work smarter with our FREE ebook: get it now!

Also new is, a searchable repository of open source libraries, frameworks and modules that's useful for discovering things.

Beyond those, great slew of utilities emerged this month for helping you out with colour schemes, menus, mockups, deployment and more. We've listed 10 of our favourites.

01. Awesomeplete

Lea Verou's autocomplete widget

Disappointed with HTML5 <datalist> due to inconsistency across browsers and a lack of customisability, Lea Verou wrote her own autocomplete widget. There's loads of documentation to get you started, and it's very customisable. At the time of release it was just under 1.5KB minified, has zero dependencies and works with IE10+, Chrome, Firefox, Safari 5+, Mobile Safari and 'sorta' IE9.

02. Coolors

Lock the colours you like and keep generating until you have a perfect palette

This is one of the smartest colour scheme generators we've seen. If you know where you want to start with your palette just mouse over the bars and enter a hex code or drag the sliders to find your starting colours. If you have no idea what kinds of colours you want, just hit space for a random scheme. When you see a colour you like press the padlock button to lock it and then continue hitting space to generate a scheme around it. You can lock as many colours as you like until the perfect scheme has materialised.

03. CSS Devices

CSS iPhones, iPads and Apple Watches

Luke James Taylor has created this useful resource that generates CSS iOS devices for mockups. Choose the models, colours and sizes of iPhones and iPads that you want to use and get a CSS file for use in your prototypes. Scroll right to the bottom to find an Apple Watch generator.

04. Surge

A content delivery network that works with your favourite tools

Surge is a free content delivery network aimed at front-end developers that's designed to work with tools like Grunt, Gulp, Browserify and npm. You can deploy using your build tool; there's no need to use Surge directly, and it has a bunch of handy features such as fallback 404 pages, clean URLs, and nice handling of trailing slashes. The people behind Surge reckon front-end devs will prefer it to Github Pages and Amazon S3 because it's been designed especially for them and with modern tools and workflows in mind. It looks nifty to us.

05. Color Safe

Make sure your text colours are easy to read

It's frustrating to create a great colour palette only to find that it results in a site that isn't accessible. This tool helps you to create colour schemes that are both beautiful and accessible by applying WCAG guidelines. Enter your font size, font weight and desired background colour, and Color Safe will help you to pick text colours that have the right contrast ratio to be clearly visible on your page.

Next page: five more of March's top web design tools