An article on new and upcoming CSS features for Web Designer magazine.
Read it on Creative Bloq
My son was recently tasked with the responsibility of looking after his pre-school class teddy bear for the week, which comes with the obligation to take said teddy bear out on adventures and add your memories to a scrapbook. I quite enjoyed creating this scrapbook layout, and it got me thinking about how I would build something like this with CSS Grid!
Read more
I’ve just come back from State of the Browser, a wonderful, community-run conference in London, where I gave a talk about debugging CSS Grid. The conference intentionally focused on web standards, rather than the latest tooling or frameworks. Each of the speakers had their own area of expertise, but what was especially successful was the way the talks were, whether by accident or design, woven seemlessly together by a common thread: making the web work for everyone. Bruce Lawson set the tone early on by quoting Sir Tim Berners Lee (or “Uncle Timbo”, as Bruce would have him known):
Read more
An interview for Net magazine
Read it on Creative Bloq
I recently published an article on animating variable fonts with the help of the Javascript library Splitting.js. A few people asked about the accessibility implications of this, so in this article we’ll take a look at why splitting a string of text can be problematic from an accessibility point of view, and what we can do to make sure that split text is accessible to everyone.
Read more
A little while ago I made an animated variable font demo on Codepen. In this article I’ll explain what variable fonts are, how they can be animated with CSS, and how I created a breathing effect with CSS and a little bit of Javascript.
Read more
We’re right in the middle of a heatwave here in the UK, and things have been a little quiet on this blog while I’ve been very busy with various other projects. So I’d thought I’d take a little break today and try something a little bit fun – an animated CSS sun illustration, to capture the summer spirit (and the relentless heat)!
Read more
Debugging CSS Grid
When it comes to building a layout, CSS Grid offers us a number of different choices for placing items. In this article we’ll take a look at the different placement methods, how to use auto-flow to avoid having to explicitly place every item, and why sometimes grid items might not be placed where you expect them to be.
Read more
Want to experiment with the latest bleeding-edge web technologies? One way is to download a nightly (or developer) version of the browser. Both Chrome and Firefox have versions of their browsers where they launch experimental or non-standardised features – Chrome Canary and Firefox Nightly respectively. This allows for experimentation and getting feedback before rolling out full support. From time to time, you may need to enable experimental features yourself. This article will show you how to do that in Chrome and Firefox.
Read more
Future Sync conference recently published the videos from their 2019 conference, including the one from my talk, Building Complex Layouts with CSS Grid. If you’re new to CSS Grid, or haven’t had the chance to play around with it too much yet, this could be a good introduction. I start of with some basic usage and progressively get onto more complex examples, explaining different placement methods, and using the minmax() function to craft flexible layouts.
Read more
Last week I attended Pixel Pioneers, an annual conference in my local city of Bristol. It has fast become a firm date in my calendar, and this year didn’t disappoint. In fact, I’d go so far as to say it might be the best one yet.
Read more
Last year I spoke about CSS Grid at State of the Browser conference. This was a great conference to attend, with awesome speakers including Jeremy Keith, Christian Heilmann, Ruth John and Charlie Owen.
Read more