Basic Concepts of Responsive Layouts

This tutorial covers some of the basic concepts that you're going to have to understand if you want to modify the theme templates or create rich responsive content.


The first concept that is critical to understand is the framework in which the themes are developed.  All our themes currently use Zurb's Foundation framework.  This popular framework is used by hundreds of thousands of web developers around the world and is battle tested.  If you're new to Foundation then some useful resources are:


Everything in Foundation is a grid.  So you have to understand the grid layout concept.  We highly recommend you reach through this quick tutorial on Zurb's site.

Foundation Grid Documentation

Once you understand the concept of a grid, it's important to know how your theme uses the grid.  The first template we released Mr Teas used a 16 column layout.  All other themes use a 12 column layout.  We moved to the 12 column layout because it's easier to do 1/4, 1/3rd, and 1/2 width layouts whereas 1/3rd width layouts were not possible with a 16 column layout.


Mr Teas16YYY


TODO: More concepts.