.no-js img.lazyload { display: none; }
Blog About Contact Search



Why you should use tachyons to make CSS easier

As I’ve spent time understanding the approach, it really makes sense for most CSS. Particularly spacing and font sizes. In this post I’m going to explain; why you may want to use this approach, and how to adapt it to your style of writing CSS.

Get up to speed with scroll snap points

Scroll snap points is the answer to the need for JavaScript carousels, to an extent. As browsers gain more and more new features in CSS, it’s important to keep up to date with them. As the generalisation is; where you can replace JavaScript with CSS…

Get up to speed with CSS shapes

I’ve wanted to explore CSS shapes for a little while now and get a good understanding for it. Find potential use cases, strengths and weaknesses. In this post I’m going to cover the level one properties. At the time of writing level two is in…

How to use inline-block for layout

The inline-block layout technique is a really handy one. It has a few advantages over float based layouts. Float based layouts suffer from needing to be cleared and if height varies it can have undesired effects. With inline-block you don’t need to worry about the…

How to: flexible squares with CSS

How do you maintain a perfect square shape with a responsive layout? The solution appears simple; the only issue is your content. Which if you want to maintain a square shape it should be able to accommodate the content. I’ll show you how to do…

Feature detection with CSS using @supports

Feature detection is a core part of day to day life as someone who makes websites. It’s one of those features I usually hand off to Modernizr. I recently saw a tweet, which spurred the curiosity to see if we’re ready to use the @supports

Remove letter-spacing from last letter

One of the frustrating things about the letter-spacing property is the addition of the letter-spacing you apply to the last letter of the text. This is fine when you have left aligned text, however if you right align or centre the text, you’re left with…

Manage text colour with ease

When designing a website you can have varied text colours depending on the background colour. This can be an area of frustration due to the unknown elements that could potentially be contained within an area. Here’s a simple technique for overcoming that.

My SVG workflow, from awkward to simple

Initially I thought it would be quite frustrating to get going with SVG, but after jumping in and seeing where I got it’s quite simple. Much better than exporting 1x and 2x images by far.

Understanding Sass default variables

Sass has a handy feature to create default variables using !default in the same way you would use !important. Why is this handy? Well you can use them to manipulate the default values of a mixin, remove or add certain bits of code based…

Using em’s for efficiency

There are a lot of CSS frameworks out there that are great, but their biggest flaw to me is their insistence to override styles and not use a relative measurement like em’s to adjust the styles when needed. I realise a lot of the way…

Create a fluid browser with border-image

I have been curious to try find a solution to having a fluid browser around portfolio images. I have attempted to find a solution which is as simple as I have been able to find. The overall idea uses :before to apply the browser…

Save time starting a new design

It’s my aim to help you be a better designer. I’ve made you a simple template to manage your colour, grid and guides. You’ll save around 20 minutes each time you start a new design.

Join my list and I’ll send you the template and update you with new Illustrator design tutorials and workflow improvements. Schedule is currently monthly.