Maintenance Costs

Published ....
Last modified ....

Share this post on BlueskySee discussion on Bluesky

One of the first large-scale projects I worked on at Wayfair as a software engineer was on our first ever desktop Grid system. It was late 2016, maybe early 2017 at that point, we had a shared mobile grid system that was using Flexbox for alignment and spacing, however we did not yet have a layout system for desktop browsers. Because we are an e-commerce company we still had to support IE8 and other IE browsers, so we couldn't just use the same mobile grid we were using elsewhere.

I don't remember exactly what made me do it, but I decided to pick up that work to create a shared global grid system for our desktop web experiences. We decided to use a progressive enhancement methodology and start with an inline-block system for the grid and then enhance to using Flexbox for the browsers that supported it. At the time this was a big step forward for us, many of our features were not using Flexbox for layouts, floats were the most common solutions that other frontend developers were using.

Setting the scene a bit, in early 2017 Wayfair was still using two separate codebases for our mobile web and desktop web experiences, responsive design was still questioned heavily by design, engineering and product. Our styles, authored in scss, were authored in two separate files for the mobile web and desktop features. Our bundler would then determine the user agent and serve up the appropriate styles to the customers browser.

When we started work on the desktop grid system, we aimed to fit the same model that mobile web was using as future looking development for teams to begin building responsive layouts using the same grid systems. So we started from the mobile web grid, using Flexbox as the backbone and then added in an inline-block + font-size 0 fallback system for older IE. We actually even started by wrapping our flexbox system behind an @supports "barrier", so even browsers like IE10 and IE11 wouldn't get the Flexbox based grid. This was a mechanism to avoid common flex-bugs that existed within these browsers at the time. At this time, we also added support for responsive column widths, meaning some columns could take up half the width of the grid on mobile and then take up a third or a fourth of the grid on desktop.