The following is a guest post by Levin Mejia, a Designer Advocate at Shopify. Shopify uses flexbox in a new theme they developed and they wanted to share some of the techniques they used to do it here. To that I say: yes please.
Every day at Shopify I speak with Partners who are constantly pushing the boundaries of what’s possible in ecommerce design. Recently, I’ve noticed a number of designers are experimenting with Flexbox in their stores. As web designers and developers, one of our primary goals is to bring focus to content and make it easy for our visitors to navigate that content. To accomplish this goal, we need a functioning layout where technology gets out of the way and the content becomes the hero.
Flexbox can help us create flexible layouts that are optimized for the web and mobile devices. But are we using it? Many of us are still using floats and inline-block for layout. Of course, you know your audience best, so if you if you have a ton of users on, for example, IE 9 and down, and aren’t prepared to create an acceptable fallback experience, you might be stuck in float-land. But there is an awful lot of green (support) in flexbox-land these days.
I believe in the power of learning by doing. This article will take you through a recent release of a free Shopify theme called Venture and the steps to recreate the following product layout using Flexbox.
If you would like to follow up with the example in this post, check out the complete Pen.
In this tutorial article, I will demonstrate how to create a flexible and responsive product layout with Flexbox that will bring focus to products in unique ways depending on the viewport width. Also, we will do all of this in under 100 lines of CSS.
This is based on the “Venture” theme
Shopify
