Buy Intense Now

Intense Template Documentation

Модули

Flex Grid System

Intense использует специально подготовленную 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>

.range-*-top

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

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

Например:


        <div class="range range-md-top">
        <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>

Управление порядком вывода колонок

Для того чтобы изменить порядок отображения элементов сетки, необходимо воспользоваться классом .cell-RS-push-X, где RS - целевое разрешение, X - порядок. Например:


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

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

Bootstrap Grid System

Intense основан на Bootstrap и соответствует всем требованиям данного фреймворка. Подробную информацию работе с Bootstrap Grid Вы можете найти на оффициальном сайте .

Responsive Units

Intense содержит новую систему управления содержимым, основанную на 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>