Creative Bloq | Tanya Combrinck

There’s good news this month for Foundation users: the team has released a library of UI components you can download, edit and plug into your site to give you a big head start with new projects. We’ve also got learning resources, tools to improve site performance and some great colour apps. 

01. Material Design color tool

Accessible Material Design colour palettes

This is a great tool for making, sharing and applying colour palettes to your user interfaces. Unlike most colour palette tools, it helps you to make sure that your colour schemes are accessible while you’re building them. 

02. Semantic UI 2.2

Write more readable code

The idea behind the Semantic framework is that, as the name suggests, it’s set up to make your code more readable and similar to natural language. It might be helpful if code readability is a problem on your team.

03. Colormind

Smart palette-making

Building colour palettes is both an art and a science, and the person behind Colormind has explained in detail how he’s gone about creating this palette builder using a combination of mathematical models and hand-picked palettes judged by eye. His aim is to provide something that will help you build a palette that meets brand guidelines while also looking great, which can sometimes be tricky.

You can use Colormind to extract colours from artwork, which apparently is a good idea because artists usually select palettes that will look pleasing. It’s definitely worth playing around with next time to you make a colour scheme. 

04. Moon

A fast and light framework for great performance

Yep, another framework! We think this one sets itself apart from the rest by being super-fast and light, which is what we all need these days. Moon was made by Kabir Shah when he was using Vue and became frustrated by some performance issues. The Moon API is very similar to Vue, but it uses Preact, a faster alternative to React. Moon is really lightweight – 5KB minified and gzipped – and rerenders the DOM in an efficient way. Read about it here.

05. Thumbor

A highly capable, smart imaging service

Thumbor is a smart imaging service that makes it easy for you to batch-manipulate the images on your site. If you want to resize every image on your site, Thumbor is your friend. It does intelligent cropping and flipping, and supports filters and WebP. You can store and load images from anywhere, and it does what it can to make your images as performant as possible. 

06. Penguin

Fast and easy SVG handling

This cool Mac app enables you to recolour hundreds of icons and SVGs quickly, and export SVGs to PNGs. You can either get it on the Mac appstore, or find it on GitHub.

07. CSS Text Gradient Generator

Make the gradient, grab the code

Here’s the easiest way to make a gradient for your text. You can choose the start colour, end colour and direction, and then grab the code. Definitely a good bookmark for your tools folder.

08. Foundation Building Blocks

Build sites quicker than ever in Foundation

Building Blocks is a library of coded UI components that you can plug into any Foundation project. They’re all created to work together so you can use any combinations of components and edit them to get exactly what you need. The library is huge, so some of them have been organised into Kits to make things easier. For example, if you’re building an ecommerce site you can download that Kit to get things that will be useful for that.

09. CSS Peeper

Inspect Element for designers

This Chrome extension makes Inspect Element designer-friendly. For example, if you inspect a button it will tell you the font family, font size, colour and other attributes useful to a designer, all presented in a clear way. One of our favourite features is the ability to browse and export a site’s colour palette easily.

10. CSS Grid Garden

Learn some Grid quickly with this game

Here’s a novel way to learn CSS Grid: by growing a carrot garden. Following the guidance within the game, you learn the ways of Grid by typing CSS to water your carrots and poison the weeds. It might sound silly but it’s a really low-effort way to get some Grid in your brain. 

Related articles:

• 7 tips to manage colour better on the web
• 10 essential TED talks for UX designers
• Designers react to the Huffington Post rebrand