First one from me in a while. A lot has happened including moving house and being engrossed in Ikea instructions most nights.

Design Principles

A great website for finding design principles from other organisations. This site led me to my local shops design style guide (Coop) which I am pretty impressed by. They provide guidance on content as well as styling which you don’t always see.

There are equally impressive sites such as Audible and Lyft which I haven’t come across before.

Design Principles

Ghost button design

A nice article by Suzanne Scacca detailing when and how to use ghost buttons backed up by some A/B testing examples.

CSS Grid + Flexbox Solving Real-world Problems

How Peter Mouland translates a design spec into a CSS Grid and Flexbox layout for different viewports. He provides code snippets and details how he battled with Internet Explorer and earlier versions of Safari. View the article.

We’ve gone from 1.39KB to 2.76kb. If we treat Internet Explorer like Safari and drop the -ms- prefixes, we are back down to 1.96kb.

Keeping aspect-ratio with HTML and no padding tricks

An alternative way of doing the aspect ratio trick in HTML. I am yet to try it but it looks promising.

How CSS works: Understanding the cascade

I’ve been guilty of using the !important tag especially when I first started out. Experience has taught me that if you are using it, you’re doing it wrong. Even when using id’s in CSS. I still do it if I’m making a quick and dirty change to a prototype, crossing my fingers that a developer doesn’t use the code. It does happen. It’s a good idea to brush up on the cascade every now and again as new features are added to CSS all the time but the fundamentals remain the same. Give this a read.

Stunning hover effects with CSS variables

A slightly misleading title as this effect requires a little bit of javaScript but impressive nonetheless. Article by Tobias Reich.

Button hover example

CSS Grid guest check

I think there’s no better way of learning CSS Grid then seeing working examples and being able to break and change the code. Here’s an example of a restaurant guest check in on codepen. There are some grid features I haven’t used before.

See the Pen Grid Experiment No. 6 by Jules Forrest (@julesforrest) on CodePen.

Photorealistic pure CSS mobile phone

Some more codepen inspiration. Initially I was impressed with a photo placed onto a realistic CSS mobile phone. After further inspection I was blown away to see no photo but the whole screen built in html and css.

See the Pen Photorealistic pure CSS mobile phone by Grzegorz Witczak (@Wujek_Greg) on CodePen.

Super-powered layouts with CSS Variables + CSS Grid

CSS grid has definitely improved the way we build html, there’s less code and it doesn’t feel like a hack like floats once did. Another powerful feature to be added to CSS recently is CSS variables. I added them to a project recently but ultimately I had to remove them from production CSS as they weren’t fully supported at the time. Controlling CSS variables with JS will open new possibilities and no doubt we will see more articles like this appearing on the web. See how Michelle Barker uses CSS Grid with CSS variables.

Phil Knight - Shoe Dog

I’m currently reading Phil Knight’s memoirs about how he came to set up Nike with his running coach Bill Bowerman. It amazes me how this mighty company in today’s world struggled to survive in the 70’s with little money and constant battles with other shoe manufacturers at home and abroad. Yet they were able to innovate and compete with the likes of Adidas and Puma on the track and eventually create a fashion icon. I really recommend giving this a read.

Phil Knight - Shoe Dog