What is Zurb Foundation & How It Can Improve Your Responsive Website?

What is Zurb Foundation? Zurb Foundation is a responsive front-end framework. The framework is mobile-friendly and ready to be customized any way you want to use it. It is compatible with almost all browsers and devices. Foundation is built with HTML, CSS and Javascript, the core components of the Web. Foundation recently decided to build […]

By Alyssa Schaad

How Will Zurb Foundation Improve Your Responsive Website?

What is Zurb Foundation?

Zurb Foundation is a responsive front-end framework. The framework is mobile-friendly and ready to be customized any way you want to use it. It is compatible with almost all browsers and devices.

Foundation is built with HTML, CSS and Javascript, the core components of the Web. Foundation recently decided to build on Sass (Scss, technically) that has constant development and also allows the power of semantic code, faster styling and tons of programming features. Sass is an extension of CSS that adds power and elegance to the basic language. Sass helps keep large stylesheets well-organized, using variables, nested rules, mixins, inline imports and more.

How will Foundation improve your responsive website?

mobile-first
True mobile-first philosophy

Foundation is built with small devices as a priority. Foundation was built from the ground up to support any kind of device, any screen size, with any resolution.

mobile-first
Grid system

Using a grid system creates a powerful multi-device layout that can be easily converted from desktop view down to mobile view. The grid system is based on a default of 12-column layout, making the code customizable if you change your mind on the width of a specific column.

If you need help with your Magento store, call 845-656-3000 or Contact us here »

mobile-first
Pre-made templates

Foundation has several pre-made templates for download. The templates are created using the grid system, that can be easily customized to anything you desire! The templates are just a starting point for you to work off of.

mobile-first
Icon fonts

Foundation created a set of icons scale on every device. The icons won’t need to be resized, all the icons are created at a similar size so one doesn’t look obscenely larger than the other. It is easy to apply color, shadows and gradients, the control is yours.

mobile-first
Building blocks / Kitchen Sink

Foundation has building blocks and snippets of code that can be easily added into the website without having to do much coding or styling to them. Some options include: alert boxes, predesigned buttons, calendars, forms, navigation bars, search bars, pagination and more.

Zurb Foundation is “The most advanced responsive front-end framework in the world.” Foundation promotes building a mobile first experience with styles that are ideal for prototyping and are easily modified. Foundation can be implemented into a preexisting website, created from scratch or used with CMS platforms like WordPress or Magento. Our team at Shero recently used a Magento theme named Polarcore that using Foundation as the framework.

What is Polarcore?

Polarcore is a Magento theme created using Zurb’s Foundation framework. Polarcore is a starter Magento theme that is fully responsive and mobile ready. It is created with minimal styling that is designed to be built upon using Zurb Foundation. Polarcore is constructed to avoid conflicts because it is built with minimal bells and whistles.

Here are a few examples of Foundation websites and websites using Foundation with Magento:

Websites using Foundation
HTC
Digital Fio

Website created using Magento and Foundation
My Lokai

Website that uses Polarcore
Kringle Candle

The future is mobile, and the diversity of devices will only increase in the coming years, so to be competitive you have to be prepared.

Support Operations Manager