Uppercasing is common in designs on the web you’ll often see it in navigation, on buttons and in headings or subheadings. I was recently changing the text in a navbar from uppercase to lowercase and I came across the situation where, instead of relying on the CSS, the last editor of this nav wrote the text in uppercase. This prompted a tweet whinge because this really bothers me. As a result of my tweet, it came to my attention that a lot of people don’t know why this is a problem (it’s easy to forget people, sorry about that). …

CSS Grid isn’t just for creating flat, 2D layouts — we can make the most of the CSS grid and combine it with other CSS properties to do a lot of amazing things, like 3D layouts (and also some great shapes too).

If you just want to play with the Codepen, feel free, otherwise read on for some explanations/ step by step process.

#Spoilers — Playroom setup working for our Component Library

This is a story of setting up Playroom in my component library may it help you through some of the bumps (specifically the ones I hit) along the way. Spoiler alert, I did get it running. 😄

First things first, the basic setup was pretty much as the Getting Started section of the readme explains — install playroom, setup the config. I set up a index.ts

One of the things I love about CSS is how easy it is to change things at different breakpoints. Maybe you want to drop text, images, or even change the layout.

You might do this for a number of reasons, maybe it’s to simplify a design on a smaller screen, or in the case I hit recently, to make things look more consistent when it’s stacked in a list. This should be pretty straightforward, but, when you are building components that can be shared reused and put together in a number of ways this can become more difficult.

What we…

When we think about web fonts and their impact on the performance on our websites we often focus on three main areas:

  • The number of font requests
  • Font file size
  • Time to first render

I wanted to see how variable fonts faired in these situations and did a review comparing with standard fonts. Here are my results.

Reducing the number of requests

This can be accomplished several ways including caching, CDNs and reducing the number of style variations. I’m not going to get into the use of CDN’s or caching because it’s essentially the same process for standard fonts as it is for variable fonts…

Adjust the width of your text to fit its parent container using a variable font width axis

One of the most exciting things for me about variable fonts is that their flexibility opens up an opportunity to create more responsive designs and components.

There are a number of ways you can have text resize to fit its parent container, but it’s been largely limited to adjusting the font size. The problem with this approach is that making the font smaller is not always the best option for our designs.

With variable fonts that contain a width axis, we can adjust the font-stretch property with CSS to condense the font. When we combine this with font-size as well…

When working in teams with mixed skills one of the biggest technical challenges I’ve faced is managing the changes to how things render visually across a codebase. Often you change something and it causes unintended problems somewhere else. This is where Automated Visual Testing has become invaluable.

Bitbucket showing differences to images when you commit code.

What is Automated Visual Testing

Automated Visual Testing (or Visual Regression Testing) is designed to automatically check that your user interface looks the way it’s supposed. It does this by checking and comparing what pixels are being rendered much like how you can see the differences in images in tools like Bitbucket.

When it comes to building flexible responsive layouts we’ve relied on media queries for quite some time, but did you know that you may not actually need them?

A quick tip

Using CSS grid we can create a list of cards that automatically fit and resize to the available space with just three lines of CSS. Specifically, the following three lines:

display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
grid-gap: 9px;

You can just stop here and view the Codepen, or you can carry on and I’ll explain what is going on.

Understanding grid-template-columns

The most important part of the code is grid-template-columns — it’s basically…

Over the holiday period we did some experimentation to remove the blocky cards on our website and replace it with a solid background. As a result we needed dividers to separate the articles on the page (otherwise they all ran into each other — it was bad).

The TL;DR is to combine :not & :nth-child with a pseudo-element and props which define the number of columns you need.

The Setup

Our site uses React on the front end with Emotion (CSS-in-JS library) for styles. …

Over the past two years I’ve done a bit of travelling — being based in Perth means almost all my flights are long haul. As a result there are a few things that i’ve found really useful as part of my travelling that I couldn’t do without.

Full disclosure, I typically travel with carry on only, because I don’t want to wait at the luggage carousel to pick up bags and the process ends up being significantly quicker! I also find the bigger a suitcase is the more things you take that you don’t need.

Bonus (didn’t quite make the…

Mandy Michael

Lover of CSS, and Batman. Front End Developer, Writer, Speaker, Development Manager | Founder & Organiser @fendersperth | Organiser @mixinconf

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store