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. …
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. This is great for building out new theme’s and keeping all the code organised and efficiently optimised. …
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+. …
About
