Making Magento Responsive Using Foundation: Part 1

As a specialist in Responsive Design and UX, I’m always keeping an eye out for the latest updates on best practices and improved workflows. One of our biggest philosophy’s here at Demac is innovation and discovering better alternatives that put us on the cutting edge of our industry. I will be sharing a two part deep dive series on outfitting Foundation for Magento. Our quest to create a better base theme in a responsive flavour.

Part 1 of our two part series outlines a lot of the thoughts and methodologies around selecting and using Foundation to make Magento responsive.

Part 2 outlines our thoughts and methodologies around choosing and implementing Foundation to make Magento responsive.

1.1 – Backstory
1.2 – Methodology
1.3 – Mobile First
1.4 – The Grid
1.5 – Leveraging SCSS

Part 1 – Getting Responsive

1.1 – Backstory – In The Beginning

Responsive design and development is something that fires me up and I’ve been passionate about it since 2010/2011. If you haven’t read it yet, take a look at Ethan Marcotte’s original 2010 article on Responsive Web Design.

At Demac, I was first tasked with a few small updates for clients, getting a feel for Magento and figuring out how things work; where the PHTML view files are and where the CSS & JS of the theme live, as well as the hierarchical fallback, so that you only change what you need to, and how to extend what is already there.

Soon after that I was fortunate to get handed a project that was new, and responsive, which became an opportunity to build a responsive Magento theme “from scratch”. The project helped me get familiar with the nuances of Magento as well as allowed me to take the time to produce an internal framework for responsive best practices here at Demac Media.

1.2 – My Approach + Methodology & Choosing Foundation

Foundation is aptly referred to by Zurb as the “The most advanced responsive front-end framework in the world.” and it stays true to its name. If you refer to my previous blog post on SCSS, you can see that I’m an avid fan of Foundation by Zurb. Zurb also keeps pulse on the latest best practices and adds them into their framework where appropriate.

Twitter’s Bootstrap is another responsive front-end framework and is currently popular. But by keeping my eyes and ears open to responsive design best practices, I had come to the conclusion that Sass/SCSS + Compass was a better solution and workflow than LESS. However, even though Bootstrap started with LESS it can now also be used with Sass/SCSS.

Using SCSS gives you super powers when it comes to Foundation, and the biggest advantage to such a framework is that they have many ready-made solutions out-of-the-box ready to go. This allows front end developers to concentrate on important aspects such as matching the designer’s specs, and also UX.

DM+Yeti

1.3 – Mobile first approach

In the case of Foundation 4, Zurb chose to go mobile-first, following the best-practice introduced by Luke Wroblewski in 2009 and later made popular by other big names in the web dev community such as Brad FrostChris Coyier, and others.

Starting with mobile means you’re starting with a simpler design and smaller screen, and then you’re building complexity upon it as you get into larger screens. A mobile-first code base does not, however, mean that you need to take a mobile-first design approach; in our case we still do desktop first for our designs.

The part of the design process that did change, was in regards to the screen sizes and how content re-flows between screens in a standard way. Foundation, like many responsive grid systems, uses a 12 column grid set-up for desktop which can be easily divided and content re-flowed for tablet and mobile screens. You can find their grid in PSD’s in the Templates section of their links to many tools and templates that use, or help you use, Foundation.

For our purposes in front-end development, however, mobile-first means by default your styles apply to the smallest screen. You then use @media min-width to specify the next screen size up, and the same deal for the next size after that.

Example of an element class that has a different font colour for each screen size:

1.4 – The Grid + SCSS

“The Grid. A digital frontier. I tried to picture clusters of information as they moved through the computer. What did they look like? Ships? motorcycles? Were the circuits like freeways? I kept dreaming of a world I thought I’d never see. And then, one day…” – Kevin Flynn, Tron Legacy

Wrapping your head around responsive web design helps by putting your content in a grid system. The content wrapper defines the max-width of the grid. Then within the grid you have columns that take up a percentage of the overall grid. Four columns? width = 25%; each.

I started using Foundation’s grid with straight CSS and applying their classes to my elements. With SCSS, we can extend the grid classes onto any elements rather than get a really crowded HTML markup full of classes.

Yeti-Feature-Small-2

Before diving into the details below, or jumping into Part 2, take a look at how to Reduce the Complexity of RWD Using SCSS so that you have a better sense of how to use SCSS + Foundation’s grid.

1.5 – Leveraging SCSS & Foundation’s mixins

In Foundation’s documentation, you can find details on how to use their SCSS mixins and variables at the bottom of each page. For example, scroll down to the bottom of this page about using their grid.

Learn more about using SCSS superpowers here.

Tune in next week for Part 2 of this series on Making Magento Responsive using Foundation. Next week I’ll cover our approach to making Magento responsive from the ground up.