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.
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.