Layout Info

In the Layout Page you will find the information for creating a full-width page to adding 2, 3, 4, and multi columns to each page. Just follow the "How to Explanations that will explane the math behind the 12 grid system, the most important thing is that the grids are not greater than 12 grids. Very simple to follow.

***So let's begin with the full-width page and then you can move on to the other possibilities.***

Full Width Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat velit ac augue volutpat vitae suscipit lacus viverra. Vivamus adipiscing fringilla sem, sit amet gravida felis fringilla non. Cras vitae aliquet nisl. Nulla facilisi. Praesent facilisis vulputate nunc, et sagittis nibh eleifend sit amet. Nam ultrices aliquet quam, sed sollicitudin mi iaculis ac. Mauris id sapien nec libero Some Tooltip Content. Vivamus auctor metus sit amet magna feugiat elementum. Integer blandit velit quis leo bibendum vel venenatis eros ultrices. Maecenas adipiscing elementum sem aliquet congue. Proin tincidunt volutpat augue et accumsan. Sed blandit nisl at enim suscipit interdum. Vivamus at elit massa. Quisque sit amet mauris orci, sit amet tincidunt elit. Proin dolor arcu, euismod quis interdum nec, eleifend et massa.

Donec sem nibh, egestas quis eleifend sit amet, aliquam eu mi. Sed pretium commodo sapien at porta. Nam scelerisque, odio eu iaculis convallis, mauris mi semper risus, et dictum tellus justo ut ante. Curabitur eleifend convallis sollicitudin. Etiam ut arcu at felis interdum molestie sed quis est. Sed sodales gravida libero, quis consequat velit varius at. Mauris quis nisl in ligula pharetra cursus in ac leo. Nullam eget diam eu urna pharetra pellentesque ac pellentesque justo. Fusce porttitor gravida porttitor. Integer facilisis pulvinar quam, in mattis urna pellentesque eu. Class aptent taciti sociosqu ad litora More Tooltip Content nostra, per inceptos himenaeos. Sed a orci at libero aliquam aliquam id vel sapien. Vivamus vitae lectus a lacus blandit

Aliquam sit amet mauris felis, lacinia tincidunt ligula. Nunc vestibulum ornare mi vitae porttitor. Phasellus egestas consequat feugiat. Fusce ut elit eget neque tincidunt pretium. Quisque sodales massa at nunc egestas bibendum. Vivamus metus massa, tincidunt non viverra sit amet, viverra at metus. Aliquam ut tellus mauris, in gravida enim. Proin sit amet nunc odio, ut convallis nisi. Etiam ut turpis vel nisl facilisis suscipit sit amet quis dui. Suspendisse odio mauris, semper sed semper sed, mattis eget mi. Nulla facilisi. Integer feugiat mattis semper. Ut hendrerit ipsum et urna elementum vel pellentesque ante ornare. Duis tellus nisi, aliquet in suscipit nec, blandit in ipsum.

Aenean non elit diam. Mauris in velit ut arcu scelerisque vehicula. In laoreet aliquam diam id pulvinar. Suspendisse et lacus eget mauris egestas interdum. Maecenas quis egestas mi. Praesent tincidunt iaculis felis pretium convallis. Alright, One More Tooltip Content, ac pretium velit lacinia eu. In hac habitasse platea dictumst. Nunc metus turpis, tempus venenatis viverra quis, adipiscing non lorem. Sed semper libero odio. Nam sollicitudin, metus non imperdiet interdum, metus velit interdum diam, vitae pharetra leo orci non dolor.

<div class="wrapper">
<div class="grid_16">
<!-- insert content here -->
</div>
</div>

This template is based on a grid system that uses 12 gridumns. In order to create the full-witdh gridumn you will have to insert the following code:

<div class="wrapper">
<div class="grid_12">
<!-- insert your desired content here -->
</div>
</div>

The examination of the layout creation process, step by step:

  1. Create a <div> with the "wrapper" class (<div class="wrapper">). This <div> is a container for our gridumns so using it is a must.
  2. The next step you will need to do is create the desired numbers of gridumns and add the "grid" class to them.
  3. Now the most important step is is that you have to add a "grid_X" class to each of the gridumns, where X - is the gridumn width index. Total index of all the gridumns should be equal to 12 and should not be bigger than this value.
    As an example, we'll create a single gridumn structure: 
    <div class="wrapper">
<div class="grid_12">
<!-- insert your desired content here -->
</div>
</div>
    As you can see, the total index is  12.
top

Heading One

Aliquam sit amet mauris felis, lacinia tincidunt ligula. Nunc vestibulum ornare mi vitae porttitor. Phasellus egestas consequat feugiat. Fusce ut elit eget neque tincidunt pretium. Quisque sodales massa at nunc egestas bibendum. Vivamus metus massa, tincidunt non viverra sit amet, viverra at metus. Aliquam ut tellus mauris, in gravida enim. Proin sit amet nunc odio, ut convallis nisi. Etiam ut turpis vel nisl facilisis suscipit sit amet quis dui. Suspendisse odio mauris, semper sed semper sed, mattis eget mi. Nulla facilisi. Integer feugiat mattis semper. Ut hendrerit ipsum et urna elementum vel pellentesque ante ornare. Duis tellus nisi, aliquet in suscipit nec, blandit in ipsum.

Aenean non elit diam. Mauris in velit ut arcu scelerisque vehicula. In laoreet aliquam diam id pulvinar. Suspendisse et lacus eget mauris egestas interdum. Maecenas quis egestas mi. Praesent tincidunt iaculis felis pretium convallis. Ut tempor ultrices quam, ac pretium velit lacinia eu. In hac habitasse platea dictumst. Nunc metus turpis, tempus venenatis viverra quis, adipiscing non lorem. Sed semper libero odio. Nam sollicitudin, metus non imperdiet interdum, metus velit interdum diam, vitae pharetra leo orci non dolor.

Second Heading

Aliquam sit amet mauris felis, lacinia tincidunt ligula. Nunc vestibulum ornare mi vitae porttitor. Phasellus egestas consequat feugiat. Fusce ut elit eget neque tincidunt pretium. Quisque sodales massa at nunc egestas bibendum.

Vivamus metus massa, tincidunt non viverra sit amet, viverra at metus. Aliquam ut tellus mauris, in gravida enim. Proin sit amet nunc odio, ut convallis nisi. Etiam ut turpis vel nisl facilisis suscipit sit amet quis dui. Suspendisse odio mauris, semper sed semper sed. Nulla facilisi. Integer feugiat mattis semper. Ut hendrerit ipsum et urna elementum vel pellentesque ante ornare. Duis tellus nisi, aliquet in suscipit nec, blandit in ipsum.

Aenean non elit diam. Mauris in velit ut arcu scelerisque vehicula. In laoreet aliquam diam id pulvinar. Suspendisse et lacus eget mauris egestas interdum. Maecenas quis egestas mi. Praesent tincidunt iaculis felis pretium convallis. Ut tempor ultrices quam, ac pretium velit lacinia eu. In hac habitasse platea dictumst. Nunc metus turpis, tempus venenatis viverra quis, adipiscing non lorem. Sed semper libero odio. Nam sollicitudin, metus non imperdiet interdum, metus velit interdum diam, vitae pharetra leo orci non dolor.

<div class="wrapper">
<div class="grid_6">
<!-- insert content here -->
</div>
<div class="grid_6">
<!-- insert your desired content here -->
</div>
</div>
  1. Create a <div> with the "wrapper" class (<div class="wrapper">). This <div> is a container for our gridumns so using it is a must.
  2. Next you need to create the desired numberS of gridumns and add the "grid" class to them.
  3. Now the most important step is that you need to add a "grid_X" class to each of the gridumns, where X - is the gridumn width index. Total index of all the gridumns should be equal to 12 and should not be bigger than this value.
    As an example, we'll create a two gridumn structure: 
    <div class="wrapper">
<div class="grid_6">
<!-- insert content here -->
</div>
<div class="grid_6">
<!-- insert content here -->
</div>
</div>
    As you can see, the total index is  6 + 6 = 12.
top

Heading One

Aliquam sit amet mauris felis, lacinia tincidunt ligula. Nunc vestibulum ornare mi vitae porttitor. Phasellus egestas consequat feugiat. Fusce ut elit eget neque tincidunt pretium. Quisque sodales massa at nunc egestas bibendum. Aliquam ut tellus mauris, in gravida enim. Proin sit amet nunc odio, ut convallis nisi. Et urna elementum vel pellentesque ante ornare. Duis tellus nisi, aliquet in suscipit nec, blandit in ipsum.

Aenean non elit diam. Mauris in velit ut arcu scelerisque vehicula. In laoreet aliquam diam id pulvinar. Suspendisse et lacus eget mauris egestas interdum. Maecenas quis egestas mi. Praesent tincidunt iaculis felis pretium convallis.

Second Heading
Aliquam sit amet mauris felis, lacinia tincidunt ligula. Nunc vestibulum ornare mi vitae porttitor. Phasellus egestas consequat feugiat. Fusce ut elit eget neque tincidunt pretium. Quisque sodales massa at nunc egestas bibendum.

Vivamus metus massa, tincidunt non viverra sit amet, viverra at metus. Aliquam ut tellus mauris, in gravida enim. Proin sit amet nunc odio, ut convallis nisi. Integer feugiat mattis semper. Ut hendrerit ipsum et urna elementum vel pellentesque ante ornare..

Ut tempor ultrices quam, ac pretium velit lacinia eu. In hac habitasse platea dictumst. Nunc metus turpis, tempus venenatis viverra quis, adipiscing non lorem. Sed semper libero odio. Nam sollicitudin, metus non imperdiet interdum, vitae pharetra leo orci non dolor.

Third Heading

Aliquam sit amet mauris felis, lacinia tincidunt ligula. Nunc vestibulum ornare mi vitae porttitor. Phasellus egestas consequat feugiat. Fusce ut elit eget neque tincidunt pretium. Quisque sodales massa at nunc egestas bibendum. Aliquam ut tellus mauris, in gravida enim. Proin sit amet nunc odio, ut convallis nisi. Et urna elementum vel pellentesque ante ornare. Duis tellus nisi, aliquet in suscipit nec, blandit in ipsum.

Aenean non elit diam. Mauris in velit ut arcu scelerisque vehicula. In laoreet aliquam diam id pulvinar. Suspendisse et lacus eget mauris egestas interdum. Maecenas quis egestas mi. Praesent tincidunt iaculis felis pretium convallis.

<div class="wrapper">
<div class="grid_4">
<!-- insert your desired  content here -->
</div>
<div class="grid_4">
<!-- insert content here -->
</div>
<div class="grid_4">
<!-- insert your desired content here -->
</div>
</div>
  1. Create a <div> with the "wrapper" class (<div class="wrapper">). This <div> is a container for our gridumns so using it is a must.
  2. Next you have to create the desired numbers of gridumns and add the "grid" class to them.
  3. Now the most important step is thaty you need to add a "grid_X" class to each of the gridumns, where X - is the gridumn width index. Total index of all the gridumns should be equal to 12 and should not be bigger than this value.
    As an example, we'll create a three gridumn structure: 
    <div class="wrapper">
<div class="grid_4">
<!-- insert your desired content here -->
</div>
<div class="grid_4">
<!-- insert your desired content here -->
</div>
<div class="grid_4">
<!-- insert your desired content here -->
</div>
</div>
    As you can see, the total index is  4 + 4 + 4 = 12.
top

Heading One

Aliquam sit amet mauris felis, lacinia tincidunt ligula. Nunc vestibulum ornare mi vitae porttitor. Phasellus egestas consequat feugiat. Fusce ut elit eget neque tincidunt pretium. Quisque sodales massa at nunc egestas bibendum. Aliquam ut tellus mauris, in gravida enim. Proin sit amet nunc odio, ut convallis nisi. Et urna elementum vel pellentesque ante ornare. Duis tellus nisi, aliquet in suscipit nec, blandit in ipsum.

Aenean non elit diam. Mauris in velit ut arcu scelerisque vehicula. In laoreet aliquam diam id pulvinar. Suspendisse et lacus eget mauris egestas interdum. Maecenas quis egestas mi. Praesent tincidunt iaculis felis pretium convallis.

Heading Two

Aliquam sit amet mauris felis, lacinia tincidunt ligula. Phasellus egestas consequat feugiat. Fusce ut elit eget neque tincidunt pretium. Quisque sodales massa at nunc egestas bibendum.

Vivamus metus massa, tincidunt non viverra sit amet, tincidunt non viverra sit amet, viverra at metus. Aliquam ut tellus mauris, in gravida enim. Proin sit amet nunc odio, ut convallis nisi. Integer feugiat mattis semper..

Ut tempor ultrices quam, ac pretium velit lacinia eu. Sed semper libero odio. Nam sollicitudin, metus non imperdiet interdum, vitae pharetra leo orci non dolor.

Heading Three

Aliquam sit amet mauris felis, lacinia tincidunt ligula. Nunc vestibulum ornare mi vitae porttitor. Phasellus egestas consequat feugiat. Fusce ut elit eget neque tincidunt pretium. Quisque sodales massa at nunc egestas bibendum. Aliquam ut tellus mauris, in gravida enim. Proin sit amet nunc odio, ut convallis nisi. Et urna elementum vel pellentesque ante ornare. Duis tellus nisi, aliquet in suscipit nec, blandit in ipsum.

Aenean non elit diam. Mauris in velit ut arcu scelerisque vehicula. In laoreet aliquam diam id pulvinar. Suspendisse et lacus eget mauris egestas interdum. Maecenas quis egestas mi. Praesent tincidunt iaculis felis pretium convallis.

Heading Four

Aliquam sit amet mauris felis, lacinia tincidunt ligula. Nunc vestibulum ornare mi vitae porttitor. Phasellus egestas consequat feugiat. Fusce ut elit eget neque tincidunt pretium. Quisque sodales massa at nunc egestas bibendum. Aliquam ut tellus mauris, in gravida enim. Proin sit amet nunc odio, ut convallis nisi. Et urna elementum vel pellentesque ante ornare. Duis tellus nisi, aliquet in suscipit nec, blandit in ipsum.

Aenean non elit diam. Mauris in velit ut arcu scelerisque vehicula. In laoreet aliquam diam id pulvinar. Suspendisse et lacus eget mauris egestas interdum. Maecenas quis egestas mi. Praesent tincidunt iaculis felis pretium convallis.

<div class="wrapper">
<div class="grid_3">
<!-- insert your desired content here -->
</div>
<div class="grid_3">
<!-- insert your desired content here -->
</div>
<div class="grid_3">
<!-- insert your desired content here -->
</div>
<div class="grid_3">
<!-- insert your desired content here -->
</div>
</div>
  1. Create a <div> with the "wrapper" class (<div class="wrapper">). This <div> is a container for our gridumns so using it is a must.
  2. Next you have to create the desired numbers of gridumns and add the "grid" class to them.
  3. Now the most important step is that you need to add a "grid_X" class to each of the gridumns, where X - is the gridumn width index. Total index of all the gridumns should be equal to 12 and should not be bigger than this value.
    As an example, we'll create a four gridumn structure: 
    <div class="wrapper">
<div class="grid_3">
<!-- insert content here -->
</div>
<div class="grid_3">
<!-- insert content here -->
</div>
<div class="grid_3">
<!-- insert content here -->
</div>
<div class="grid_3">
<!-- insert content here -->
</div>
</div>
    As you can see, the total index is  3 + 3 + 3 + 3 = 12.
top

Heading One

Aliquam sit amet mauris felis, lacinia tincidunt ligula. Nunc vestibulum ornare mi vitae porttitor. Phasellus egestas consequat feugiat. Fusce ut elit eget neque tincidunt pretium. Quisque sodales massa at nunc egestas bibendum. Aliquam ut tellus mauris, in gravida enim. Proin sit amet nunc odio, ut convallis nisi. Et urna elementum vel pellentesque ante ornare. Duis tellus nisi, aliquet in suscipit nec, blandit in ipsum.

Aenean non elit diam. Mauris in velit ut arcu scelerisque vehicula. In laoreet aliquam diam id pulvinar. Suspendisse et lacus eget mauris egestas interdum. Maecenas quis egestas mi. Praesent tincidunt iaculis felis pretium convallis.

Heading 2

Aliquam sit amet mauris felis, lacinia tincidunt ligula. Phasellus egestas consequat feugiat. Fusce ut elit eget neque tincidunt pretium. Quisque sodales massa at nunc egestas bibendum.

Vivamus metus massa, tincidunt non viverra sit amet, tincidunt non viverra sit amet, viverra at metus. Aliquam ut tellus mauris, in gravida enim. Proin sit amet nunc odio, ut convallis nisi. Integer feugiat mattis semper..

Ut tempor ultrices quam, ac pretium velit lacinia eu. Sed semper libero odio. Nam sollicitudin, metus non imperdiet interdum, vitae pharetra leo orci non dolor.

Heading 3

Aliquam sit amet mauris felis, lacinia tincidunt ligula. Nunc vestibulum ornare mi vitae porttitor. Phasellus egestas consequat feugiat. Fusce ut elit eget neque tincidunt pretium. Quisque sodales massa at nunc egestas bibendum. Aliquam ut tellus mauris, in gravida enim. Proin sit amet nunc odio, ut convallis nisi. Et urna elementum vel pellentesque ante ornare. Duis tellus nisi, aliquet in suscipit nec, blandit in ipsum. 
<div class="wrapper">
<div class="grid_5">
<!-- insert your desired content here -->
</div>
<div class="grid_4">
<!-- insert your desired content here -->
</div>
<div class="grid_3">
<!-- insert your desired content here -->
</div>
</div>
  1. Create a <div> with the "wrapper" class (<div class="wrapper">). This <div> is a container for our gridumns so using it is a must.
  2. Next you have to create the desired numbers of gridumns and add the "grid" class to them.
  3. Now the most important step is that you need to add a "grid_X" class to each of the gridumns, where X - is the gridumn width index. Total index of all the gridumns should be equal to 12 and should not be bigger than this value.
    As an example, we'll create a three gridumn structure with different gridumn widths: 
    <div class="wrapper">
<div class="grid_5">
<!-- insert your desired content here -->
</div>
<div class="grid_4">
<!-- insert your desired content here -->
</div>
<div class="grid_3">
<!-- insert your desired content here -->
</div>
</div>
    As you can see, the total index is  5 + 4 + 3 = 12.
top

Heading One

Aliquam sit amet mauris felis, lacinia tincidunt ligula. Nunc vestibulum ornare mi vitae porttitor. Phasellus egestas consequat feugiat. Fusce ut elit eget neque tincidunt pretium. Quisque sodales massa at nunc egestas bibendum. Et urna elementum vel pellentesque ante ornare. Duis tellus nisi, aliquet in suscipit nec, blandit in ipsum.

Aenean non elit diam. Mauris in velit ut arcu scelerisque vehicula. In laoreet aliquam diam id pulvinar. Suspendisse et lacus eget mauris egestas interdum. Maecenas quis egestas mi. Praesent tincidunt iaculis felis pretium convallis.

Heading 2

Aliquam sit amet mauris felis, lacinia tincidunt ligula. Nunc vestibulum ornare mi vitae porttitor. Phasellus egestas consequat feugiat. Fusce ut elit eget neque tincidunt pretium. Quisque sodales massa at nunc egestas bibendum. Aliquam ut tellus mauris, in gravida enim. Proin sit amet nunc odio, ut convallis nisi. Et urna elementum vel pellentesque ante ornare. Duis tellus nisi, aliquet in suscipit nec, blandit in ipsum.
Third Heading
Aliquam sit amet mauris felis, lacinia tincidunt ligula. Phasellus egestas consequat feugiat. Fusce ut elit eget neque tincidunt pretium. Quisque sodales massa at nunc egestas bibendum. Et urna elementum vel pellentesque ante ornare. Duis tellus nisi, aliquet in suscipit nec, blandit in ipsum.

Aenean non elit diam. Mauris in velit ut arcu scelerisque vehicula. In laoreet aliquam diam id pulvinar. Maecenas quis egestas mi. Praesent tincidunt iaculis felis pretium convallis.

Heading Four
Aliquam sit amet mauris felis, lacinia tincidunt ligula. Phasellus egestas consequat feugiat. Fusce ut elit eget neque tincidunt pretium. Quisque sodales massa at nunc egestas bibendum. Et urna elementum vel pellentesque ante ornare. Duis tellus nisi, aliquet in suscipit nec, blandit in ipsum.

Aenean non elit diam. Mauris in velit ut arcu scelerisque vehicula. In laoreet aliquam diam id pulvinar. Maecenas quis egestas mi. Praesent tincidunt iaculis felis pretium convallis.

<div class="wrapper">
<div class="grid_4">
<!-- insert your desired content here -->
</div>
<div class="grid_8">
<div class="wrapper">
<div class="grid_4 alpha">
<!-- insert your desired content here -->
</div>
<div class="grid_4 omega">
<!-- insert your desired content here -->
</div>
</div>
</div>
</div>
  1. Create a <div> with the "wrapper" class (<div class="wrapper">). This <div> is a container for our gridumns so using it is a must.
  2. Next you have to create the desired numbers of gridumns and add the "grid" class to them.
  3. Now the most important step is that you need to add a "grid_X" class to each of the gridumns, where X - is the gridumn width index. Total index of all the gridumns should be equal to 12 and should not be bigger than this value.
    As an example, we'll create a two gridumn structure where one of the gridumns contains another gridumn structure: 
    <div class="wrapper">
<div class="grid_4">
<!-- insert your desired content here -->
</div>
<div class="grid_8">
<div class="wrapper">
<div class="grid_4 alpha">
<!-- insert your desired content here -->
</div>
<div class="grid_4 omega">
<!-- insert your desired content here -->
</div>
</div>
</div>
</div>
    As you can see, the total index is  4 + 8 = 12. The width of the inner gridumn structure equals to the width of the second gridumn  4 + 4 = 8.
top