TemplateMonster © Privacy Policy

HTML Templates Documentation

Modules

TM Grid System

HTML Website Templates include Flex-based TM Grid system, that is especially prepared. This system provides you with more complex and flexible solution,comparing to Bootstrap Grid. TM Grid class naming format is similar to Bootstrap Grid one for usability.

Table below presents various aspects of TM Grid system default way of working:

XXS Devicesbr
(< 480px)		 XS Devices
(≥ 480px)		 SM Devices
(≥ 768px)		 MD Devices
(≥ 992px)		 LG Devices
(≥ 1200px)
Grid behaviour Instant flow Collapsed to start, horizontal above breakpoints
Container width 300~450px, Fluid 750px 970px 1170px
Class prefix .col- .col-xs- .col-sm- .col-md- .col-lg-
columns # 1 12
Columns width 100% ~25 → ~37px ~62px ~81px ~97px
Gutter width 30px (2 x15px, at both column sides)
Nesting Yes
Offsets No Yes
Columns output order control No Yes
Horizontal alignment control No Yes
Vertical alignment control No Yes
Inverting No Yes

Please note: grid behaviour and its corresponding breakpoints may differ from template to template.

Columns nesting

In order to implement columns nesting in Grid system, add a new .row and target .col-*-* columns set into existing column.

Level 1: .col-*-9
Level 2: .col-*-6 Level 2: .col-*-6
Level 1: .col-*-1 Level 1: .col-*-1 Level 1: .col-*-1

For instance,

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

Please note: nested columns width calculation is based on the parent column width instead of main container.

Columns offset

In order to add certain column offset you should use corresponding .col-*-preffix-* class.

.col-*-4

For example,

<div class="row">
    <div class="col-md-4 col-md-preffix-4">
            Level 1: .col-md-4
    </div>
</div>

Columns inverting

In order to invert columns display order you should add corresponding .row-* or .row-*-reverse class into parent .row class:

  • .row-*-reverse
    inverts columns display order, starting from dimensions specified.
  • .row-*
    returns regular columns display order in case .row-*-reverse was applied to lower dimension.

For example,

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

Gutter disabling

In order to disable columns gutter you should just add .row-no-gutter class to parent container with .row class.

For example,

<div class="row row-no-gutter">
    <div class="col-md-6">
        Level 1: .col-md-6
    </div>
    <div class="col-md-6">
        Level 1: .col-md-6
    </div>
</div>

Columns vertical alignment management

Use one of the following classes to align columns vertically:

  • .row-*-middle
    aligns all 1st level columns to the middle;
.col-*-6  
.col-*-6
 

For example,

<div class="row row-md-middle">
    <div class="col-md-6">
        Level 1: .col-md-6
    </div>
    <div class="col-md-6">
        Level 1: .col-md-6
    </div>
</div>
  • .row-*-bottom
    pushes all 1st level columns to the bottom;
.col-*-6  
 
.col-*-6

For example,

<div class="row row-md-bottom">
    <div class="col-md-6">
        Level 1: .col-md-6
    </div>
    <div class="col-md-6">
        Level 1: .col-md-6
    </div>
</div>
  • .row-*-top
    pushes all 1st level columns to the top;
.col-*-6 .col-*-6
 
 

For example,

<div class="row row-md-top">
    <div class="col-md-6">
        Level 1: .col-md-6
    </div>
    <div class="col-md-6">
        Level 1: .col-md-6
    </div>
</div>
  • .col-*-middle
    aligns target column to the middle;
.col-*-6  
.col-*-6.col-*-middle
 

For example,

<div class="row">
    <div class="col-md-6">
        Level 1: .col-md-6
    </div>
    <div class="col-md-6 col-md-middle">
        Level 1: .col-md-6
    </div>
</div>
  • .col-*-top
    aligns target column to the top;
.col-*-6 .col-*-6.col-*-top
 
 

For example,

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

For example,

<div class="row">
    <div class="col-md-6">
        Level 1: .col-md-6
    </div>
    <div class="col-md-6 col-md-bottom">
        Level 1: .col-md-6
    </div>
</div>

Columns horizontal alignment management

Use of the following classes to align columns horizontally:
  • .row-*-left
    aligns 1st level columns to the left;
.col-*-4 .col-*-4  

For example,

<div class="row row-md-left">
    <div class="col-md-4">
        Level 1: .col-md-4
    </div>
    <div class="col-md-4">
        Level 1: .col-md-4
    </div>
</div>
  • .row-*-center
    aligns 1st level columns to the middle;
.col-*-4 .col-*-4

For example,

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

For example,

<div class="row row-md-right">
    <div class="col-md-4">
        Level 1: .col-md-4
    </div>
    <div class="col-md-4">
        Level 1: .col-md-4
    </div>
</div>
  • .row-*-justify
    aligns 1st level columns by width;
.col-*-4 .col-*-4

For example,

<div class="row row-md-justify">
    <div class="col-md-4">
        Level 1: .col-md-4
    </div>
    <div class="col-md-4">
        Level 1: .col-md-4
    </div>
</div>
  • .row-*-around
    aligns 1st level columns by width with additional padding at the edges.
.col-*-4 .col-*-4

For example,

<div class="row row-md-around">
    <div class="col-md-4">
        Level 1: .col-md-4
    </div>
    <div class="col-md-4">
        Level 1: .col-md-4
    </div>
</div>

Columns order display management

In order to change grid items display order you should use .col-RS-push-X class, where RS stands for target dimensions, X stands for order. For example,

<div class="row">
    <div class="col-md-4 col-md-push-2">
        Level 1: .col-md-4
    </div>
    <div class="col-md-4 col-md-push-1">
        Level 1: .col-md-4
    </div>
</div>

Please note: in case of using classes, responsible for columns display order management, you must determine each row element order.

TM Box System

HTML Website Templates include specially prepared TM Box system, which is an enhanced and expanded version of .media object in Bootstrap.

TM Box system is a complex of classes, prepared for easy control of the target content layout, namely, changing the order of the output elements from vertical to horizontal and vice versa.

TM BOX system work principle is built on using .box, .box-*, .box-*-clear, .box__left, .box__body and .box__right classes.

You can find the list of classes available below:

  • .box, .box-xs, .box-sm, .box-md, .box-lg
    enables horizontal output mode for 1st level nested elements .box__body, .box__left, .box__right.
  • .box-xs-clear, .box-sm-clear, .box-md-clear, .box-lg-clear
    disables horizontal output mode for 1st level nested elements .box__body, .box__left, .box__right.
  • .box-*-rtl, .box-*-ltr
    controls the order of the output elements in .box item to target resolution: from left to the right, or from right to the left.
.box__left .box__body

For example,

<div class="box box-xs-clear box-sm">
    <div class="box__left">
        Box Left Content
    </div>
    <div class="box__body">
        Box Body Content
    </div>
</div>

In this example, .box__left and .box__right blocks will be displayed in horizontal row on screens with width < 480px, for screens with width ≥ 480px - in vertical row, for screens ≥ 768px - in horizontal row again.