TemplateMonster © Privacy Policy
Trunk version: v1-4

HTML Templates Documentation

Modules

Flex Grid System

HTML Website Template uses the specially developed Flex Grid system. This system in a more multipurpose and flexible solution, in comparison to Bootstrap Grid.

Different aspects of default Flex Grid functionality are covered in the following table:

XXS Devices
(< 480px)		 XS Devices
(≥ 480px)		 SM Devices
(≥ 768px)		 MD Devices
(≥ 992px)		 LG Devices
(≥ 1200px)		 Xl Devices
(≥ 1800px)
Grid conduct Instant flow Collapsed to start, horizontal above breakpoints
Container width 300~450px, Fluid 750px 970px 1170px 1770px
Prefix class .cell- .cell-xs- .cell-sm- .cell-md- .cell-lg- .cell-xl-
# of column 1 12
Column width 100% ~25 → ~37px ~62px ~81px ~97px ~149px
Gutter width 30px (15px on each column side)
Nesting Yes
Offset No Yes
Columns order control No Yes
Horizontal align control No Yes
Vertical align contro No Yes
Reverse No Yes

Nested columns

To create nested columns in Grid system, add a new .range and .cell-*-* target columns to an existing column.

Level 1: .cell-*-9
Level 2: .cell-*-6 Level 2: .cell-*-6
Lvl.1: .cell-*-1 Lvl.1: .cell-*-1 Lvl.1: .cell-*-1

E.g.:


        <div class="range">
            <div class="cell-md-9">
                Level 1: .cell-md-9
                <div class="range">
                    <div class="cell-md-6">
                        Level 2: .cell-md-6
                    </div>
                    <div class="cell-md-6">
                        Level 2: .cell-md-6
                    </div>
                </div>
            </div>
        </div>

Attention: nested columns width is determined based on parent column width, not the container width.

Columns offset

To add offset for a column, use the .cell-*-preffix-* class:

.cell-*-4

E.g.,


        <div class="range">
            <div class="cell-md-4 cell-md-preffix-4">
                Level 1: .cell-md-4
            </div>
        </div>

Columns reverse

To reverse columns order in a .range, add the .range-* class or .range-*-reverse class:

  • .range-*-reverse
    inverts columns order, starting from the specified resolution.
  • .range-*
    restores the initial columns order, if .range-*-reverse is used for a smaller resolution.

E.g.:


        <div class="range range-xs-reverse range-sm">
            <div class="cell-md-4">
                Level 1: .cell-md-4
            </div>
            <div class="cell-md-4">
                Level 1: .cell-md-4
            </div>
            <div class="cell-md-4">
                Level 1: .cell-md-4
            </div>
        </div>

Disabling gutter

To disable column gutter, add the .range-condensed class to the parent block with .range class.

E.g.:


        <div class="range range-condensed">
            <div class="cell-md-6">
                Level 1: .cell-md-6
            </div>
            <div class="cell-md-6">
                Level 1: .cell-md-6
            </div>
        </div>

Vertical alignment control

To align columns vertically, use one if the following classes:

  • .range-*-middle
    aligns all the nested columns of the 1st level in the middle;
.cell-*-6  
.cell-*-6
 

E.g.:


        <div class="range range-md-middle">
            <div class="cell-md-6">
                Level 1: .cell-md-6
            </div>
            <div class="cell-md-6">
                Level 1: .cell-md-6
            </div>
        </div>
  • .range-*-bottom
    aligns all the nested 1st-level columns in the bottom;
.cell-*-6  
 
.cell-*-6

E.g.:


        <div class="range range-md-bottom">
            <div class="cell-md-6">
                Level 1: .cell-md-6
            </div>
            <div class="cell-md-6">
                Level 1: .cell-md-6
            </div>
        </div>
  • .range-*-top
    aligns all the nested 1st-level columns on top;
.cell-*-6 .cell-*-6
 
 

E.g.:


        <div class="range range-md-top">
            <div class="cell-md-6">
                Level 1: .cell-md-6
            </div>
            <div class="cell-md-6">
                Level 1: .cell-md-6
            </div>
        </div>
  • .cell-*-middle
    aligns the target column in the middle;
.cell-*-6  
.cell-*-6.cell-*-middle
 

E.g.:


        <div class="range">
            <div class="cell-md-6">
                Level 1: .cell-md-6
            </div>
            <div class="cell-md-6 cell-md-middle">
                Level 1: .cell-md-6
            </div>
        </div>
  • .cell-*-top
    aligns the target column on top;
.cell-*-6 .cell-*-6.cell-*-top
 
 

E.g.:


        <div class="range">
            <div class="cell-md-6">
                Level 1: .cell-md-6
            </div>
            <div class="cell-md-6 cell-md-top">
                Level 1: .cell-md-6
            </div>
        </div>
  • .cell-*-bottom
    aligns the target column to the bottom.
.cell-*-6  
 
.cell-*-6.cell-*-bottom

E.g.:


        <div class="range">
            <div class="cell-md-6">
                Level 1: .cell-md-6
            </div>
            <div class="cell-md-6 cell-md-bottom">
                Level 1: .cell-md-6
            </div>
        </div>

Horizontal align control

To align columns horizontally, use one of the following classes:

  • .range-*-left
    aligns nested columns to the left;
.cell-*-4 .cell-*-4  

E.g.:


        <div class="range range-md-left">
            <div class="cell-md-4">
                Level 1: .cell-md-4
            </div>
            <div class="cell-md-4">
                Level 1: .cell-md-4
            </div>
        </div>
  • .range-*-center
    aligns 1-st-level nested columns in the middle;
.cell-*-4 .cell-*-4

E.g.:


        <div class="range range-md-center">
            <div class="cell-md-4">
                Level 1: .cell-md-4
            </div>
            <div class="cell-md-4">
                Level 1: .cell-md-4
            </div>
        </div>
  • .range-*-right
    aligns 1st-level nested columns to the right;
  .cell-*-4 .cell-*-4

E.g.:


        <div class="range range-md-right">
            <div class="cell-md-4">
                Level 1: .cell-md-4
            </div>
            <div class="cell-md-4">
                Level 1: .cell-md-4
            </div>
        </div>
  • .range-*-justify
    justifies the nested 1st level columns;
.cell-*-4   .cell-*-4

E.g.:


        <div class="range range-md-justify">
            <div class="cell-md-4">
                Level 1: .cell-md-4
            </div>
            <div class="cell-md-4">
                Level 1: .cell-md-4
            </div>
        </div>
  • .range-*-around
    justifies the nested 1st-level columns and adds an offset on both sides:
.cell-*-4   .cell-*-4

E.g.:


        <div class="range range-md-around">
            <div class="cell-md-4">
                Level 1: .cell-md-4
            </div>
            <div class="cell-md-4">
                Level 1: .cell-md-4
            </div>
        </div>

Bootstrap Grid System

HTML Website Template is based on Bootstrap and meets all the requirements of this framework. You can find out more about working with Bootstrap Grid on their official website .

Responsive Units

HTML Website Template has a new content management system, based on Flex. It’s called Responsive Units. Using these units, you can easily manage the layout of the elements: embed them in a horizontal or vertical way at any resolution, manage their location relative to each other, etc.

Responsive Units operating principle is somewhat similar to the operating principle of Media in Bootstrap.

Responsive Units logics meets the requirements of Mobile First. The basic Responsive Unit markup looks the following way:


        <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>

How to align elements relative to each other

To align elements relative to each other, use the .unit-*-middle, .unit-*-top, .unit-*-bottom classes. So, if you need to align elements in a Unit relative to each other in the middle starting from XS resolution, use the following code:


        <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>

How to change layout from horizontal to vertical

To change the layout of elements in a Responsive Unit from horizontal to vertical for different resolutions, use the corresponding combination of *, unit-*-horizontal or unit-*, unit-*-vertical for the target resolution. So, if you need the default Responsive Units layout to be vertical, but become horizontal at the SM screen resolution, use the following example:


        <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>

How to reverse the layout of the elements

You can also invert the layout of the elements in a Responsive Unit. So, if you need a Responsive Unit to be vertical and to have direct display order of elements, and starting from SM resolution become horizontal and have the reverse order of elements (right-body-left), use the following example:


        <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>