Utilities


This is a collection of neat and useful utilities and tools I use to make a lot of things easier and way less time consuming.

§Typography

Web Fonts

This is a collection of websites to go to when you're looking for web fonts.

Google Webfonts

Font Squirrel

Typekit

Fonts.com

Lost Type Coop

Tools

Typewonder

With Typewonder you can preview web fonts on your website on the fly.

PX to EM Converter

Converts px to em and vice versa.

Characters

Character Code

An overview of HTML code, hexadecimal code and HTML entity for ASCII characters.

§Workflow

Patternlab

Patternlab is a collection of tools to help you create atomic design systems.

Frameworks

Bootstrap

Foundation

Basscss

Libraries

Bourbon

A lightweight mixin library for SASS.

Modernizr

A JavaScript library that detects HTML5 and CSS3 features in the browser.

Task Automation

JavaScript taks runners, helping you to automate repetitive tasks like minification, compilation and linting.

Grunt

Gulp

And CSS preprocessors, bringing your CSS to the next level with functions, mixins and variables.

SASS

LESS

§Icons & Images

Here are some great resources for free stock images, icons, placeholders and more.

Allthefreestock

1001 Free Downloads

Icons

Icomoon

Iconfinder

Flaticon

Iconmonstr

The Noun Project

Images

These sites help you out with placeholders:

Lorempixel

Placehold.it

These are the best websites for free stock photography:

Unsplash

Picjumbo

Gratisography

Little Visuals

Favicons

Favicon Generator

This page lets you generate all the files needed to make your website/logo look great on all devices.

Favicon Cheat-Sheet

A detailed cheat sheet about favicons.

§Colors

These are some tools I often use for inspiration when I need to create a new color scheme.

Adobe Color CC

Color Hunt

Coolors

Colourco

§Performance

Speed

Some helpful tools to make your website faster.

Google Pagespeed Insights

Tiny PNG

JPEG Mini

SEO

You can improve your SEO by using the following tools.

Seorch

Webpagetest

XML Sitemaps

Screaming Frog

Wave

RWD

With these tools you can test if your responsive website really works on all devices and screen sizes.

Ish

Responsinator

Top