Articles in Shopify

Firefox flex-basis: auto and srcset bug on retina screens

I ran into a problem with a customer’s site specifically on Firefox (on Mac). Their logo was setup to use a 2X retina size and srcset to show it properly on retina devices. Our specific layout used flexbox, and on the logo’s container, flex-basis: auto.

But in Firefox we saw this:

Firefox srcset and flex-basis bug example

The parent of the image was being set to 400px, exactly twice as large as the image loaded in was. After a bit of exploration I came across this bug opened up with Firefox three years ago. With no fix in sight from the browser, I needed to find a workaround.

Upgrade your existing Shopify theme with Slate migrate

If you haven’t read about Shopify’s new theme development toolkit, Slate, check out the introductory post here. It provides you a starting set of files for developing your own custom Shopify theme along with handy build tools to speed up and optimize your workflow.

But what if you’re not starting from scratch? Whether you’re basing your work off an existing theme or supporting a client’s existing theme, there’s no doubt you’ve wanted to improve your development workflow at some point.

With Slate installed (npm install -g @shopify/slate), you can run slate migrate to convert an existing theme into the folder structure compatible with Slate.

SVG Icon Workflow with Gulp and Shopify

We are no longer developing our free Shopify themes to support IE8 and it has been fantastic so far. No more media query polyfills (an absolute nightmare when dealing with a CDN – though Gavin Ballard figured it out) and no more fear of CSS3 selectors has been great. One of my favourite perks, however, is leaving behind icon fonts and moving toward SVG icons.

We’re currently using a few Gulp tasks for our themes development process right now, but in this post I’ll focus on how we generate an SVG sprite sheet with the help of Gulp and gulp-svg-sprite and gulp-cheerio.

Github Metadata with Jekyll and JavaScript

Last week Github announced that organization and project metadata would be available to Jekyll templates in the site.github namespace, rather than relying on client-side API calls.

Their documentation lacks real world code examples, so here is what I used to restructure Shopify’s Open Source page (mostly) away from JS API calls in favour of Github metadata. Be warned, this data is only available when the page is live, so I had to work on hidden code on our live page until it was bug free.

Introducing Shopify Timber

After pitching the idea for a responsive framework that made learning the basics of theme development on Shopify late in 2013, I got a chance to make that a reality. Today we launched Shopify Timber, the ultimate Shopify theme framework.

Follow @cshold to stay updated on the status of Timber, or join in on GitHub to have your say what makes it in. To see it in action, take a look at the demo store.