We use a standard 12-column grid system. The grid is built with Flexbox technology, totally responsive. It will help you to design your pages in an easy and orderly way, a system of simple and receptive columns.
Create a grid in just two steps, that simple.
Steps:
* Add e-cols container of columns.
* Add e-col as many as you need.
Each column will have an equal width with the class e-col ,
You can create countless columns, but it is advisable to use a maximum of 12.
<div class="e-cols">
<div class="e-col">
e-col 1
</div>
<div class="e-col">
e-col 2
</div>
<div class="e-col">
e-col 3
</div>
</div>
The previous example creates three columns of equal self-incremental width in devices> = 1024px (Desktop), its size is based on the screen, while in mobile devices and tablets the columns take a size of 100%.
This is the container that wraps the columns. This makes the role of a row so if you add more than
12 columns that do not enter the space of a row automatically low to the next row avoiding break the
vizualizacion of its content.
There are some classes attributed to the container of columns, you can see them below:
<div class="e-cols centered">
<div class="e-col">...</div>
<div class="e-col">...</div>
</div>
<div class="e-cols between">
<div class="e-col">...</div>
<div class="e-col">...</div>
<div class="e-col">...</div>
</div>
<div class="e-cols align-start">
<div class="e-col">...</div>
<div class="e-col">...</div>
</div>
<div class="e-cols align-start">
<div class="e-col">...</div>
<div class="e-col">...</div>
</div>
<div class="e-cols no-gap">
<div class="e-col">...</div>
<div class="e-col">...</div>
<div class="e-col">...</div>
</div>
This is the class of the columns, they indicate the number of columns that you want to use from
the possible 12 recommended per row. So,
if you want columns of the same width use e-col for specific
columns add Example: e-col-6.
There are some classes attributed to the columns, you can see them below:
Same as the previous example but in the content of the columns.
<div class="e-cols">
<div class="e-col">...</div>
<div class="e-col centered">...</div>
</div>
<div class="e-cols">
<div class="e-col">...</div>
<div class="e-col between">...</div>
</div>
<div class="e-cols">
<div class="e-col">...</div>
<div class="e-col align-start">...</div>
</div>
<div class="e-cols">
<div class="e-col">...</div>
<div class="e-col align-end">...</div>
</div>
This is a grid layout to expose an example of two rows of automatic columns that span all the space available in your row (e-cols).
<div class="e-cols">
<div class="e-col">...</div>
<div class="e-col">...</div>
</div>
<div class="e-cols">
<div class="e-col">...</div>
<div class="e-col">...</div>
<div class="e-col">...</div>
</div>
You can get the same result using a single row by adding an element, w-100 where you want to break the row.
<div class="e-cols">
<div class="e-col">...</div>
<div class="e-col">...</div>
<i class="w-100"></i>
<div class="e-col">...</div>
<div class="e-col">...</div>
<div class="e-col">...</div>
</div>
w-100 It can be a i or div or span among others.
e-col e-col-1 e-col-2 e-col-3 e-col-4
e-col-5 e-col-6 e-col-7 e-col-8 e-col-9
e-col-10 e-col-11 e-col-12
You can define the size of each column individually in a simple way and with short classes.
There are 12 defined sizes each modifier class is named after the number of columns you want
out of 12 available.
e-col-x
e-col-4
e-col-6
e-col-8
e-col-10
<div class="e-cols">
<div class="e-col-8">...</div>
<div class="e-col">...</div>
</div>
<div class="e-cols">
<div class="e-col">...</div>
<div class="e-col-4">...</div>
<div class="e-col-2">...</div>
</div>
<!-- or -->
<div class="e-cols">
<div class="e-col-8">...</div>
<div class="e-col">...</div>
<i class="w-100"></i>
<div class="e-col">...</div>
<div class="e-col-4">...</div>
<div class="e-col-2">...</div>
</div>
This is an example of nested columns, using containers e-cols plus the number of columns needed. Perfect to create your layout.
<div class="e-cols">
<header class="e-col-12">Header</header>
<main class="e-col-12 centered">
main container
<div class="e-cols">
<div class="e-col-8 centered">
main 2
<div class="e-cols">
<div class="e-col">Banner</div>
</div>
<div class="e-cols between">
<section class="e-col-3">Section 1</section>
<section class="e-col-3">Section 2</section>
<section class="e-col-3">Section 3</section>
</div>
</div>
<div class="e-col-4">Aside</div>
</div>
</main>
<footer class="e-col centered">Footer</footer>
</div>Some examples of the grid designs that you can achieve for your website quickly and easily.
<div class="e-cols">
<div class="e-col-12">Header</div>
<div class="e-col-8">Main</div>
<div class="e-col-4">Aside</div>
<div class="e-col-4">Section 1</div>
<div class="e-col-4">Section 2</div>
<div class="e-col-4">Section 3</div>
<div class="e-col-12">Footer</div>
</div>
<div class="e-cols">
<div class="e-col-12">Header</div>
<div class="e-col-4">Aside</div>
<div class="e-col-8">Main</div>
<div class="e-col">Section 1</div>
<div class="e-col">Section 2</div>
<div class="e-col-12">Footer</div>
</div>
If you are using our framework in a product that generates income,
you can also help its maintenance if you wish, if you frequently help in your company
or personal developments consider making a recurring donation.
If you want to see your company's logo on this site it's time to be a serious Sponsor.
