материал взят с сайта:http://www.dejurka.ru

Создаем структуру сайта

Модульная сетка фреймворка (12-ти колоночная по умолчанию) позволяет с легкостью создавать адаптивные шаблоны шаблоны страниц для десктопа и мобильных устройств. Если вы знакомы с grid-системами, вы будете чувствовать себя, как дома.  Она состоит из двух ключевых элементов: строки и столбцов. Строки создают максимальную ширину и содержат столбцы, которые формируют структуру. Размер столбцов будет изменяться в зависимости от размеров экрана монитора. Мы установили максимальную ширину столбца (.row ) 1000px.

Для начала давайте определимся с «фундаментом». Структура макета нашего блога будет выглядеть приблизительно так:

<div class="row">
 <div class="twelve columns">
 <h2>Шапка/12 колонок</h2>
 </div>
</div>
<div class="row">
 <div class="twelve columns">
 <div class="row">
 <div class="eight columns">
 <h2>Контент/8 колонок</h2>
 </div>
 <div class="four columns">
 <h2>Сайдбар/4 колонки</h2>
 </div>
 </div>
 </div>
</div>
<div class="row">
 <div class="twelve columns">
 <h2>Футер/12 колонок</h2>
 </div>
</div>