Skip to main content

February's top new web design tools

The last few weeks have seen the release of a number of interesting tools, not least the new versions of HTML5 Boilerplate (opens in new tab), which is now at 5.0, and Laravel (opens in new tab) which is also now on 5 – click through to see the new features and fixes.

A bunch of brand new offerings have also been unleashed, including utilities for working with Google Fonts, style guides, SVGs, iOS animations and IE8 pitfalls.

01. Pattern Library (opens in new tab)

Anna Debenham's open source style guide

Anna Debenham's open source style guide

Style guides, in the words of Brad Frost (opens in new tab) , are "essential tools for sanity maintenance and organisational success", and more and more of us are dealing with them as this fact is increasingly acknowleged.

Anyone who works with style guides will love this resource created by Anna Debenham (opens in new tab); it's a Jekyll-based open source style guide/pattern library. New to Jekyll (opens in new tab)? Try Debenham's tutorial (opens in new tab). For more style guide goodness, have a look at Debenham and Frost's new podcast (opens in new tab) on the topic and their repository of useful style guide articles and resources (opens in new tab).

02. Web Font Load (opens in new tab)

All the Google Web Fonts on your machine with no extra software

All the Google Web Fonts on your machine with no extra software

Get all the Google Web Fonts installed on your Mac or Debian machine with this simple script – it's a quick and easy way to get the fonts without having to install any other software. Unlike the Google-approved SkyFonts (opens in new tab) route, your fonts of course won't be updated automatically but this can be achieved by just running the script again.

03. Font Pair (opens in new tab)

Discover beautiful font pairings

Discover beautiful font pairings

Still on the subject of Google Web Fonts, here's a convenient tool for pairing them. First decide what types of fonts you want (a serif with a sans serif, a cursive with a serif etc.) then browse some combinations. When you see something you like, you can paste in your actual copy to see how it will look. Here are some tips on choosing good pairings (opens in new tab) from the creator of this tool, Hayden Mills.

04. is.js (opens in new tab)

is.js: a useful checking library

is.js: a useful checking library

Checking library is.js has received a fair amount of attention this month – it's useful for writing checks to verify types, times, dates and so on via a simple API. Its creator Aras Atasaygin tells us he's only been coding for 18 months and that the repo has become "very contribution-friendly".

05. shade (opens in new tab)

Make beautiful gradients with shade

Make beautiful gradients with shade

shade is a 'mathematically derived gradient explorer' that provides a neat interface for making the perfect background gradient. Adjust the colour and gradient spread with sliders for hue, saturation and lightness and get an instant preview of the results. The code you need to recreate your gradient is displayed at the bottom of the display area ready to be pasted into your own code.

06. Spring (opens in new tab)

Easier iOS animations in Swift

Easier iOS animations in Swift

Deftly-used animations can add meaning and personality to your interface, and this library simplifies the process of creating them for iOS. Swift is a new language for creating apps for iOS and OS X and Spring makes it easier to make animations with Swift. For detailed instructions on getting started with Spring, head to this tutorial (opens in new tab) and scroll down about two thirds.

07. memory-stats.js (opens in new tab)

Keep track of JavaScript Heap Size with memory-stats.js

Keep track of JavaScript Heap Size with memory-stats.js

Paul Irish has written this handy minimal monitor for JavaScript Heap Size that works inside the page. It's similar to mrdoob's stat.js (opens in new tab), but for JavaScript memory. You can find it here (opens in new tab) as a Rails gem, there's an Ember add-on (opens in new tab), and an Angular component on this page (opens in new tab).

08. IE8 Linter (opens in new tab)

Check for IE8 compatibility and fix any problems

Check for IE8 compatibility and fix any problems

For those "special occasions", as he puts it, when IE8 compatibility is required, Danny Povolotski has created IE8 Linter which checks your site for things that might cause incompatibility and suggests solutions. It's on GitHub (opens in new tab). He's very keen on making this as comprehensive as possible and invites us all to contribute our "favourite" IE8 pitfalls.

09. SVGOMG (opens in new tab)

Get a preview of what SVGO will do before it does it

Get a preview of what SVGO will do before it does it

Optimising your SVG files is an essential step before adding them to your site, and SVG Optimizer (opens in new tab) is one of the best tools for the job. It will remove data you don't need such as comments, hidden elements, metadata and so on as well as other handy tweaks. It doesn't, however, provide a way to see the effects of running the optimisations, so Jake Archibald has created SVGO's Missing GUI which provides live previews and makes it easier to use. Sara Soueidan has written a useful article about it (opens in new tab).

10. CSS Reference (opens in new tab)

A useful cheat sheet for CSS

A useful cheat sheet for CSS

This fantastic resource arranges the important bits of CSS on one page organised by pseudo-class, data type, property and so on. Find the thing you need guidance on and click through to an explainer file that gives you everything you need to know in a concise, digestible article.

Words: Tanya Combrinck

Tanya Combrinck has been writing about the web for over four years, and the internet is actually her preferred method of interacting with humanity. You can find her on Twitter at @tanyacombrinck (opens in new tab).

Like this? Read these:

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of six full-time members of staff: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, and Staff Writer Amelia Bamsey, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq. 

Topics