HTML Templates Documentation

Модули

Flex Grid System

HTML Website Templates используют специально подготовленную Flex Grid систему. Данная система предоставляет более гибкое и комплексное решение, по сравнению с Bootstrap Grid.

Различные аспекты работы Flex Grid системы по-умолчанию представленны в следующей таблице:

	XXS Devices (< 480px)	XS Devices (≥ 480px)	SM Devices (≥ 768px)	MD Devices (≥ 992px)	LG Devices (≥ 1200px)	Xl Devices (≥ 1800px)
Поведение сетки	Instant flow	Collapsed to start, horizontal above breakpoints
Ширина контейнера	300~450px, Fluid		750px	970px	1170px	1770px
Преффикс класса	.cell-	.cell-xs-	.cell-sm-	.cell-md-	.cell-lg-	.cell-xl-
# колонок	1	12
Ширина колонки	100%	~25 → ~37px	~62px	~81px	~97px	~149px
Ширина Гаттера	30px (по 15px с обеих сторон колонки)
Вложенность	Да
Смещения	Нет	Да
Управление порядком вывода колонок	Нет	Да
Управление горизонтальным выравнием	Нет	Да
Управление вертикальным выравниванием	Нет	Да
Инвертируемость	Нет	Да

Вкладываемость колонок

Для реализации вложености колонок в Grid системе, добавьте новый .range и набор целевых колонок .cell-*-* в уже существующую колонку.

Уровень 1: .cell-*-9

Уровень 2: .cell-*-6

Ур.1: .cell-*-1

Например,


        <div class="range">
            <div class="cell-md-9">
                Уровень 1: .cell-md-9
                <div class="range">
                    <div class="cell-md-6">
                        Уровень 2: .cell-md-6
                    </div>
                    <div class="cell-md-6">
                        Уровень 2: .cell-md-6
                    </div>
                </div>
            </div>
        </div>

Обратите внимание: ширина вложенных колонок расчитывается исходя из ширины родительской колонки, а не контейнера.

Смещение колонок

Для того, чтобы добавить смещение для одной из колонок необходимо воспользоваться соответствующим классом .cell-*-preffix-*.

.cell-*-4

Например,


        <div class="range">
            <div class="cell-md-4 cell-md-preffix-4">
                Уровень 1: .cell-md-4
            </div>
        </div>

Инвертирование колонок

Для того, чтобы инвертировать порядок вывода всех колонок в .range необходимо добавить соответствующий класс .range-* или .range-*-reverse:

.range-*-reverse

инвертирует порядок вывода колонок, начиная с указанного разрешения.
.range-*

возвращает нормальный порядок вывода колонок, в случае, когда был применен .range-*-reverse на разрешении ниже.

Например,


        <div class="range range-xs-reverse range-sm">
            <div class="cell-md-4">
                Уровень 1: .cell-md-4
            </div>
            <div class="cell-md-4">
                Уровень 1: .cell-md-4
            </div>
            <div class="cell-md-4">
                Уровень 1: .cell-md-4
            </div>
        </div>

Отключение гаттера

Для того, чтобы отключить наличие гаттера на колонках просто добавьте класс .range-condensed на родительский блок с классом .range.

Например,


        <div class="range range-condensed">
            <div class="cell-md-6">
                Уровень 1: .cell-md-6
            </div>
            <div class="cell-md-6">
                Уровень 1: .cell-md-6
            </div>
        </div>

Управление вертикальным выравниванием колонок

Для того, чтобы выровнять колонки по-вертикали относительно друг друга воспользуйтесь одним из следующих классов:

.range-*-middle

выравнивает все вложенные колонки 1 уровня по центру;

.cell-*-6
	.cell-*-6

Например,


        <div class="range range-md-middle">
            <div class="cell-md-6">
                Уровень 1: .cell-md-6
            </div>
            <div class="cell-md-6">
                Уровень 1: .cell-md-6
            </div>
        </div>

.range-*-bottom

прижимает все вложенные колонки 1 уровня к низу;

.cell-*-6

	.cell-*-6

Например,


        <div class="range range-md-bottom">
            <div class="cell-md-6">
                Уровень 1: .cell-md-6
            </div>
            <div class="cell-md-6">
                Уровень 1: .cell-md-6
            </div>
        </div>

.cell-*-middle

выравнивает целевую колонку по центру;

.cell-*-6
	.cell--6.cell--middle

Например,


        <div class="range">
            <div class="cell-md-6">
                Уровень 1: .cell-md-6
            </div>
            <div class="cell-md-6 cell-md-middle">
                Уровень 1: .cell-md-6
            </div>
        </div>

.cell-*-top

прижимает целевую колонку к верху;

.cell-*-6	.cell--6.cell--top

Например,


        <div class="range">
            <div class="cell-md-6">
                Уровень 1: .cell-md-6
            </div>
            <div class="cell-md-6 cell-md-top">
                Уровень 1: .cell-md-6
            </div>
        </div>

.cell-*-bottom

прижимает целевую колонку к низу.

.cell-*-6

	.cell--6.cell--bottom

Например,


        <div class="range">
            <div class="cell-md-6">
                Уровень 1: .cell-md-6
            </div>
            <div class="cell-md-6 cell-md-bottom">
                Уровень 1: .cell-md-6
            </div>
        </div>

Управление горизонтальным выравниванием колонок

Для того, чтобы выровнять колонки по-горизонтали воспользуйтесь одним из следующих классов:

.range-*-left

выравнивает вложенные колонки 1 уровня по левому краю;

.cell-*-4

Например,


        <div class="range range-md-left">
            <div class="cell-md-4">
                Уровень 1: .cell-md-4
            </div>
            <div class="cell-md-4">
                Уровень 1: .cell-md-4
            </div>
        </div>

.range-*-center

выравнивает вложенные колонки 1 уровня по центру;

.cell-*-4

Например,


        <div class="range range-md-center">
            <div class="cell-md-4">
                Уровень 1: .cell-md-4
            </div>
            <div class="cell-md-4">
                Уровень 1: .cell-md-4
            </div>
        </div>

.range-*-right

выравнивает вложенные колонки 1 уровня по правому краю;

.cell-*-4

Например,


        <div class="range range-md-right">
            <div class="cell-md-4">
                Уровень 1: .cell-md-4
            </div>
            <div class="cell-md-4">
                Уровень 1: .cell-md-4
            </div>
        </div>

.range-*-justify

выравнивает вложенные колонки 1 уровня по ширине;

.cell-*-4

Например,


        <div class="range range-md-justify">
            <div class="cell-md-4">
                Уровень 1: .cell-md-4
            </div>
            <div class="cell-md-4">
                Уровень 1: .cell-md-4
            </div>
        </div>

.range-*-around

выравнивает вложенные колонки 1 уровня по ширине c добавлением отступа по краям.

.cell-*-4

Например,


        <div class="range range-md-around">
            <div class="cell-md-4">
                Уровень 1: .cell-md-4
            </div>
            <div class="cell-md-4">
                Уровень 1: .cell-md-4
            </div>
        </div>

Bootstrap Grid System

HTML Website Templates основаны на Bootstrap и соответствует всем требованиям данного фремворка. Подробную информацию работе с Bootstrap Grid вы можете найти на офф. сайте .

Responsive Units

HTML Website Templates содержат новую систему управления контентом, основанную на Flex. Мы назвали ее Responsive Units. Используя эту систему вы можете легко управлять лейаутом элементов: встраивать их в горизонтальном или вертикальном порядке на любом разрешении, управлять их расположением относительно друг друга и т.д.

Принцип работы Responsive Units несколько схож с принципом работы Media в Bootstrap.

Логика работы Responsive Units соответствует принципам Mobile First. Базовая разметка для Responsive Unit выглядит следующим образом:


        <div class="unit unit-horizontal">
            <div class="unit__left">
                Unit Left
            </div>
            <div class="unit__body">
                Unit Body
            </div>
            <div class="unit__right">
                Unit Right
            </div>
        </div>

Как выровнять элементы относительно друг друга

Для выравнивания элементов оносительно друг друга в Responsive Unit используются служебные классы: .unit-*-middle, .unit-*-top, .unit-*-bottom. Так, если вам необходимо выровнять элементы в Unit относительно друг друга по центру начиная с XS разрешения, код будет выглядеть следующим образом:


        <div class="unit unit-horizontal unit-xs-middle">
            <div class="unit__left">
                Unit Left
            </div>
            <div class="unit__body">
                Unit Body
            </div>
            <div class="unit__right">
                Unit Right
            </div>
        </div>

Как изменить лейаут элементов с горизонтального на вертикальный

Для того, чтобы изменить лейаут элементов в Responsive Unit с горизонтального на вертикальный на разных разрешениях нужно использовать соответствующую комбинацию unit-*, unit-*-horizontal или unit-*, unit-*-vertical для целевого разрешения. Так, если вам необходимо, чтобы по умолчанию леайут Responsive Unit был вертикальным, но с SM разрешения становился горизонтальным, воспользуйтесь следующим примером:


        <div class="unit unit-vertical unit-sm unit-sm-horizontal">
            <div class="unit__left">
                Unit Left
            </div>
            <div class="unit__body">
                Unit Body
            </div>
            <div class="unit__right">
                Unit Right
            </div>
        </div>

Как инвертировать лейаут элементов

Вы также можете выполнять инверсию соответствующего лейаута в Responsive Unit. Так, если вам необходимо, что по умолчанию Responsive Unit был вертикальным с прямым порядком отображения его элементов и начиная с SM разрешения он становился вертикальным, а его элементы имели обратный порядок (right-body-left), используйте следующий пример.


        <div class="unit unit-vertical unit-sm unit-sm-horizontal unit-sm--inverse">
            <div class="unit__left">
                Unit Left
            </div>
            <div class="unit__body">
                Unit Body
            </div>
            <div class="unit__right">
                Unit Right
            </div>
        </div>