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 Уровень 2: .cell-*-6
Ур.1: .cell-*-1 Ур.1: .cell-*-1 Ур.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 .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 .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 .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   .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   .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>