STANDARD GRID

Tornado Standard Grid Based on Flex Box Property Flexible and Mobile First Responsive

CONTAINERS

Containers are a containing element to wrap and centering site contents and is required for the grid system. You may choose one of three containers to use in your projects. for standard normal usage use (container) class name will gave you container with max width 1200px , for Large Clean Designs usage use (container-xl) class name will gave you container with max width 1400px and for Full Width use (container-fluid) class name will gave you container with width 100%

<!-- Standard Container -->
<div class="container">
    <!-- Site Content -->
<div>

<!-- Large Container -->
<div class="container-xl">
    <!-- Site Content -->
<div>

<!-- Full Width Container -->
<div class="container-fluid">
    <!-- Site Content -->
<div>

DEFAULT GRID

Tornado using a standard 12 column Flexible mobile first responsive grid system scales up to the device or viewport size increases. It includes predefined classes for easy layout options , the columns elements must be placed into a .row Wrap and Rows must be placed within a container element for proper alignment and padding. except in one case that you use class .no-gutter with the .row container scroll down to see example of all columns cases

STANDARD GRID USAGE

in order to use grid system first of all you create a container element then add a row wrapper inside of your container element.

<!-- Standard Container -->
<div class="container">
    <!-- Row Wraper -->
    <div class="row">
        <!-- Columns Elements -->
    <div>
<div>

AUTO/ADAPTIVE EQUAL COLUMNS WIDTH

By using class col-auto you can easily create equal width columns depending on there number that's mean when putting x5 columns they will automatically take an equal width on a row line.

<!-- Standard Container -->
<div class="container">
    <!-- Row Wraper -->
    <div class="row">
        <!-- Columns Elements -->
        <div class="col-auto"></div>
        <div class="col-auto"></div>
        <div class="col-auto"></div>
        <div class="col-auto"></div>
        <div class="col-auto"></div>
    <div>
<div>

RESPONSIVE COLUMNS

Grid Responsive Works and Depending on Specific Size in Each Screen Size by Using Breakpoint Prefixed Class in the Table Below You Will See List of the Columns Breakpoint Class.

Options	Extra small	small	Medium	Large	Extra Large
Screen Size	<== 576px	576px ==>	768px ==>	1024px ==>	1366px ==>
Class prefix’s	col-#number	col-s-#number	col-m-#number	col-l-#number	col-xl-#number
Default # of columns	12 columns and can be change via sass.
Default Columns Gutter	30px (15px on each side of a column)
Nesting Support	Fully Support

RESPONSIVE GRID EXAMPLE

Resize to see the Next Responsive Columns in Action.

<!-- Columns Wraper -->
<div class="row">
    <!-- Column Element -->
    <div class="col-12 col-m-6 col-l-4">
        12/12 in mobile 6/12 in tablets 4/12 in Desktop's
    </div>

    <!-- Column Element -->
    <div class="col-12 col-m-6 col-l-4">
        12/12 in mobile 6/12 in tablets 4/12 in Desktop's
    </div>

    <!-- Column Element -->
    <div class="col-12 col-m-6 col-l-4">
        12/12 in mobile 6/12 in tablets 4/12 in Desktop's
    </div>
</div>