Widgets
Grid
CSS grid with container, row and columns
CSS for the grid can be found in the
/css/ig-base.css file.General structure
1
<div class="container">
2
<div class="row">
3
<div class="col-70 col-s-100">70% wide column, 100% on mobile</div>
4
<div class="col-30 col-s-100">30% wide column, 100% on mobile</div>
5
</div>
6
</div>
Copied!
Container
1
<div class="container container--small">Small</div>
2
<div class="container">Standard</div>
3
<div class="container container--big">Big</div>
4
<div class="container container--fluid">100% width</div>
Copied!
Row
1
<div class="row"></div>
2
​
3
<div class="row row--flat">Remove gutters</div>
4
​
5
<div class="row row--center">Horizontal align center</div>
6
<div class="row row--left">Horizontal align start</div>
7
<div class="row row--right">Horizontal align end</div>
8
<div class="row row--space-around">Horizontal align space-around</div>
9
<div class="row row--space-between">Horizontal align space-between</div>
10
<div class="row row--space-evenly">Horizontal align space-evenly</div>
11
​
12
<div class="row row--v-top">Vertically align start</div>
13
<div class="row row--v-center">Vertically align center</div>
14
<div class="row row--v-center">Vertically align end</div>
15
​
16
<div class="row row--reverse">Reverse order of columns</div>
Copied!
Columns
1
<div class="col">Will grow to fit row</div>
2
​
3
<div class="col-10">10%</div>
4
<div class="col-16">16%</div>
5
<div class="col-20">20%</div>
6
<div class="col-25">25%</div>
7
<div class="col-30">30%</div>
8
<div class="col-33">33%</div>
9
<div class="col-40">40%</div>
10
<div class="col-45">45%</div>
11
<div class="col-50">50%</div>
12
<div class="col-55">55%</div>
13
<div class="col-60">60%</div>
14
<div class="col-66">66%;</div>
15
<div class="col-70">70%</div>
16
<div class="col-75">75%</div>
17
<div class="col-80">80%</div>
18
<div class="col-90">90%</div>
19
<div class="col-100">100%</div>
20
​
21
<div class="col-l-50">50% at max-width 1200px</div>
22
<div class="col-m-50">50% at max-width 992px</div>
23
<div class="col-s-50">50% at max-width 768px</div>
24
<div class="col-xs-50">50% at max-width 480px</div>
25
​
26
<div class="col-order-1">Set col order to 1</div>
27
<div class="col-m-order-3">Set col order to 3 at max-width 992px</div>
28
<div class="col-s-order-5">Set col order to 5 at max-width 768px</div>
Copied!
Nesting Rows
1
<div class="container">
2
<div class="row">
3
<div class="col-70">
4
<div class="row">
5
<div class="col-50">
6
Nested 50% of parent
7
</div>
8
<div class="col-50">
9
Nested 50% of parent
10
</div>
11
</div>
12
</div>
13
</div>
14
</div>
Copied!
Last modified 1yr ago
Copy link