Сетки
Система SAVANT.PRO облегчает разметку страниц сайтов сообществ, предлагая использовать классы .grid
и .row
.
Класс .row
Класс .row
является оберткой для ряда классов: .span-2
, .span-3
, .span-4
, .span-5
, .span-6
, .span-7
, .span-8
, .span-9
, .span-10
, .span-11
, .span-12
, которые динамично занимают положенный им процент ширины родительского элемента. Работает это так: класс .span-2
занимает 13.6% от ширины родительского элемента (блока с классом .row
). Каждый последующий класс .span-
прибавляет к своей ширине по 8.6%. При создании такой разметки важно помнить одно правило:
Сумма чисел указанных в классах .span-
должна равняться двенадцати.
<div class="row"> <div class="span-4"> <p class="example">span-4</p> </div> <div class="span-4"> <p class="example">span-4</p> </div> <div class="span-4"> <p class="example">span-4</p> </div> </div>
span-4
span-4
span-4
Таким образом, мы можете комбнировать элементы класса .span-
как того требует шаблон вашего сайта.
Так же стоит учитывать, что если ширина экрана, на котором будет просмотриваться ваш сайт, будет меньше 960px, то элементы с классом .span-
встанут друг под друга и займут всю доступную ширину родительского элемента.
Так же, вы можете вкладывать в элементы с классом .span-
другие элементы с классом .row
. За счет этого вы можете создавать гибкие шаблоны по вашему вкусу.
<div class="row"> <div class="span-8"> <div class="example"> <h5>span-8, содержащий элемент с классом .row</h5> <div class="row"> <div class="span-6"> <p>Дочерний элемент span-6</p> </div> <div class="span-6"> <p>Дочерний элемент span-6</p> </div> </div> </div> </div> <div class="span-4"> <p class="example">span-4</p> </div> </div>
span-8, содержащий элемент с классом .row
Дочерний элемент span-6
Дочерний элемент span-6
span-4
Класс .grid
Этот класс не сильно отличается от класса .row
. Основные различия заключаются в дочерних классах, которые нужно использовать. В этом слечае это .w25
, .w33
, .w50
, .w66
, .w75
. Названия классов говорит само за себя: число говорит о занимаемых процентах ширины родительского элемента.
Используя класс .grid
нужно помнить что сумма чисел в классах потомках не должна превышать 100.
<div class="grid"> <div class="w50"> <p class="example">Элемент класса .w50</p> </div> <div class="w50"> <p class="example">Элемент класса .w50</p> </div> </div>
Элемент класса .w50
Элемент класса .w50
Дочерние элементы класса .grid
встанут друг под друга, при ширине окна браузера равной 480px, это значение отличается от значения описанного в классе .row
, будьте осторожны при комбинировании данных классов.
Так же существует класс .collapse-medium
, который заставит дочерние элементы отобразиться друг под другом при ширине окна браузера равной 768px. Добаляется к элементу с классом .grid
.
Создание вложенных элементов с классом .grid
происходит аналогично описанному выше способу. Второй уровень будет складываться друг под друга при ширине окна равной 960px.