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.

Framework

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:

Website: Foundation - Getting Started
Book: Learning Zurb Foundation

Grid

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.

Theme	Columns	Small	Medium	Large
Mr Teas	16	Y	Y	Y
Craft	12	Y	Y	Y
Natural	12	Y	Y	Y

TODO: More concepts.