Image for post
Image for post
The end goal, designed by Jennie Lewis from Sunside Studio.

Once upon a time, I might have had to begrudgingly tell a designer this type of layout wouldn’t work well on a responsive web page which needs to function across a range of screen sizes, but not anymore!

With CSS grid now available in all popular browsers it’s possible to reliably define the rows and columns that make up any kind of grid, I’m pretty excited about this and you should be too. In this article I’m going to detail how I achieved the designed layout using CSS grid without any silly workarounds or javascript magic necessary.

Defining The Grid

The first step in building any grid should be to work out the grid measurements, in other words — defining the grids columns and rows. Here’s a quick annotation I did on top of the designs to visualise the grid that needed to be achieved. …

Image for post
Image for post

Shopify’s slate, especially the new v1 release, is a great tool to improve the Shopify theme development workflow. For me one of the core benefits is getting to use new language features and organise JS code into different folders with ES6 imports.

Slate comes with a load more features out the box like a local development server, organising SVG’s into snippet includes and code splitting using template and layout bundles. …

Popmotion Pose is described as a “Declarative motion system for HTML, SVG, React & React Native”, it builds upon the author Matt Perry’s work on Popmotion to expose a simple way to declare animations. In this article we’re going to look at how it can be used with React via react-pose to effortlessly build animations with React that look great.

Rather than providing independent examples I’m going to start from scratch taking you through how to add advanced custom animations to an actual React project.

This article presumes basic knowledge of using the command line and creating React apps.

Get Started

If you want to follow along make sure you have NodeJS and NPM 5.2+ installed, the npx command we’re going to use comes with NPM version 5.2+. …


Dan Webb

Web developer and maker writing about creating things for the web.

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