<%= require('html-loader!./../components/sidebar-documentation.html') %>
<%= require('html-loader!./../components/footer-documentation.html') %>
Grid
A 12 column responsive grid for easy layout creation
Example
<div class="t-columns">
<div class="t-col-3">...</div>
<div class="t-col-9">...</div>
</div>
1
11
2
10
3
9
4
8
5
7
6
6
7
5
8
4
9
3
10
2
11
1
Gutters
Apply padding and a negative margin to the outside of the container
Example
<div class="t-columns t-columns-with-gap">
<div class="t-col-4">...</div>
<div class="t-col-4">...</div>
<div class="t-col-4">...</div>
</div>
4
4
4
Nested
You can easily nest columns to create complex layouts.
Example
<div class="t-columns">
<div class="t-col-4">...</div>
<div class="t-col-4">...</div>
<div class="t-col-4">
<div class="t-columns">
<div class="t-col-6">...</div>
<div class="t-col-6">...</div>
</div>
</div>
</div>
4
4
6
6
Offset
Easily move sections up to eleven columns by using the offset class.
Example
<div class="t-columns">
<div class="t-col-4">...</div>
<div class="t-col-4 t-offset-4">...</div>
<div class="t-col-4 t-offset-8">...</div>
</div>
4
4
4
Responsive
Easily move sections up to eleven columns by using the offset class.
Example
<div class="t-columns">
<div class="t-col-4 t-col-mobile-12 t-col-tab-6">...</div>
<div class="t-col-4 t-col-mobile-12 t-col-tab-6">...</div>
<div class="t-col-4 t-col-mobile-12 t-col-tab-6">...</div>
</div>
4
4
4