Documentation
Index
Content layout and structure elements (layout)
Throughout development and as new CSS features have been added, other features have also expanded the diversity of options, allowing for unexpected backward compatibility and flexibility.
Tables (table)
In this case, because they are calculated according to the browser's dimensions, they do not support responsive code.
| code | display | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <table> <thead><tr> <th>Fusce</th> <th>iaculis</th> <th>nisi</th> </tr></thead> <tbody><tr> <td>non efficitur</td> <td>lectus porta quis</td> <td>Ut congue</td> </tr><tr> <td>fringilla laoreet</td> <td>Aliquam ac</td> <td>ipsum hendrerit</td> </tr><tr> <td>pretium dui sed</td> <td>malesuada sapien</td> <td>Aenean fermentum sollicitudin</td> </tr></tbody> <tfoot><tr> <td>metus</td> <td>quis</td> <td>dictum</td> </tr></tfoot> </table> |
|
|||||||||||||||
| <table class="table-h"> <thead><tr> <th>Fusce</th> <th>iaculis</th> <th>nisi</th> </tr></thead> <tbody><tr> <td>non efficitur</td> <td>lectus porta quis</td> <td>Ut congue</td> </tr><tr> <td>fringilla laoreet</td> <td>Aliquam ac</td> <td>ipsum hendrerit</td> </tr><tr> <td>pretium dui sed</td> <td>malesuada sapien</td> <td>Aenean fermentum sollicitudin</td> </tr></tbody> </table> |
|
|||||||||||||||
| <table class="table-v"> <tr> <th>Fusce</th> <td>iaculis</td> <td>nisi</td> </tr><tr> <th>non efficitur</th> <td>lectus porta quis</td> <td>Ut congue</td> </tr><tr> <th>fringilla laoreet</th> <td>Aliquam ac</td> <td>ipsum hendrerit</td> </tr> </table> |
|
|||||||||||||||
| <table class="table-nopad"> <tr> <th>Fusce</th> <th>iaculis</th> <th>nisi</th> </tr><tr> <td>non efficitur</td> <td>lectus porta quis</td> <td>Ut congue</td> </tr><tr> <td>fringilla laoreet</td> <td>Aliquam ac</td> <td>ipsum hendrerit</td> </tr> </table> |
|
|||||||||||||||
| <table class="table-pad"> <tr> <th>Fusce</th> <th>iaculis</th> <th>nisi</th> </tr><tr> <td>non efficitur</td> <td>lectus porta quis</td> <td>Ut congue</td> </tr><tr> <td>fringilla laoreet</td> <td>Aliquam ac</td> <td>ipsum hendrerit</td> </tr> </table> |
|
Row/column dividers (.row/.col)
In this case, dividers (div) are used as a row (row) / column (col) relationship, based on 12 dividers per line, although relationships with 5 and 7 dividers are also supported.
It is noted that the modifiers for row or col must accompany these classes, and that the column width values must add up to the base of dividers used. Otherwise, the new cell will be shifted.
| code | display |
|---|---|
| <div class="row" style="border:1px blue solid"> <div class="col col-4">Integer enim enim</div> <div class="col col-4">tincidunt id turpis eget</div> <div class="col col-4">porta tristique dolor</div> </div> |
Integer enim enim
tincidunt id turpis eget
porta tristique dolor
|
| <div class="row row-auto" style="border:1px gray solid"> <div class="col col-3" style="border:1px blue solid">Integer enim enim</div> <div class="col col-6" style="border:1px red solid">tincidunt id turpis eget</div> <div class="col col-3" style="border:1px green solid">porta tristique dolor</div> </div> |
Integer enim enim
tincidunt id turpis eget
porta tristique dolor
|
| <div class="row row-fix" style="border:1px gray solid"> <div class="col col-2of7" style="border:1px blue solid">Integer enim enim</div> <div class="col col-3of7" style="border:1px red solid">tincidunt id turpis eget</div> <div class="col col-2of7" style="border:1px green solid">porta tristique dolor</div> </div> |
Integer enim enim
tincidunt id turpis eget
porta tristique dolor
|
| <div class="row row-equal" style="border:1px gray solid"> <div class="col col-2of5" style="border:1px blue solid">Integer enim enim</div> <div class="col col-3of5" style="border:1px green solid">tincidunt id turpis eget, porta tristique dolor</div> </div> |
Integer enim enim
tincidunt id turpis eget, porta tristique dolor
|
| <div class="row" style="border:1px blue solid"> <div class="col col-4 col-push8" style="border:1px blue solid">Lorem ipsum</div> <div class="col col-8 col-pull4" style="border:1px green solid">dolor sit amet</div> </div> |
Lorem ipsum
dolor sit amet
|
| <div class="row" style="border:1px gray solid"> <div class="col col-4 col-off2" style="border:1px blue solid">Lorem ipsum</div> <div class="col col-4" style="border:1px green solid">dolor sit amet</div> </div> |
Lorem ipsum
dolor sit amet
|
| <div class="row" style="border:1px gray solid"> <div class="col col-s6 col-m4 col-l8" style="border:1px blue solid">Lorem ipsum</div> <div class="col col-s6 col-m8 col-l4" style="border:1px green solid">dolor sit amet</div> </div> |
Lorem ipsum
dolor sit amet
|
Grids (.grid/.cell)
Designed to scale a grid-like divider. It offers greater control than regular tables,
although not as dynamically as row/col dividers. It can also be responsive.
A template with up to 12 columns has been supported.
| code | display |
|---|---|
| <div class="grid grid-4"> <div>1 Lorem</div> <div>2 ipsum</div> <div>3 dolor</div> <div>4 sit</div> <div>5 amet,</div> <div>6 consectetur</div> <div>7 adipiscing</div> <div>8 elit.</div> </div> |
1 Lorem
2 ipsum
3 dolor
4 sit
5 amet,
6 consectetur
7 adipiscing
8 elit.
|
| <div class="grid grid-4"> <div>1 Lorem</div> <div>2 ipsum</div> <div class="cell-colspan2">3 dolor</div> <div class="cell-rowspan2">5 amet,</div> <div>6 consectetur</div> <div>7 adipiscing</div> </div> |
1 Lorem
2 ipsum
3 dolor
5 amet,
6 consectetur
7 adipiscing
|
| <div class="grid grid-inline"> <div class="text-center"> <strong> 1 </strong> </div> <div class="text-center"> <strong> 2 </strong> </div> <div class="text-center"> <strong> 3 </strong> </div> <div class="text-center"> <strong> 4 </strong> </div> <div class="text-center"> <strong> 5 </strong> </div> </div> |
1
2
3
4
5
|
| <div class="grid grid-gap"> <div class="text-center"> <strong> 1 </strong> </div> <div class="text-center"> <strong> 2 </strong> </div> <div class="text-center"> <strong> 3 </strong> </div> <div class="text-center"> <strong> 4 </strong> </div> <div class="text-center"> <strong> 5 </strong> </div> </div> |
1
2
3
4
5
|
| <div class="grid grid-center"> <div class="text-center"> <strong> 1 </strong> </div> <div class="text-center"> <strong> 2 </strong> </div> <div class="text-center"> <strong> 3 </strong> </div> <div class="text-center"> <strong> 4 </strong> </div> <div class="text-center"> <strong> 5 </strong> </div> </div> |
1
2
3
4
5
|
| <div class="grid grid-justify"> <div class="text-center"> <strong> 1 </strong> </div> <div class="text-center"> <strong> 2 </strong> </div> <div class="text-center"> <strong> 3 </strong> </div> <div class="text-center"> <strong> 4 </strong> </div> <div class="text-center"> <strong> 5 </strong> </div> </div> |
1
2
3
4
5
|
| <div class="grid grid-spaced"> <div class="text-center"> <strong> 1 </strong> </div> <div class="text-center"> <strong> 2 </strong> </div> <div class="text-center"> <strong> 3 </strong> </div> <div class="text-center"> <strong> 4 </strong> </div> <div class="text-center"> <strong> 5 </strong> </div> </div> |
1
2
3
4
5
|
| <div class="grid grid-extreme"> <div class="text-center"> <strong> 1 </strong> </div> <div class="text-center"> <strong> 2 </strong> </div> <div class="text-center"> <strong> 3 </strong> </div> <div class="text-center"> <strong> 4 </strong> </div> <div class="text-center"> <strong> 5 </strong> </div> </div> |
1
2
3
4
5
|
| <div class="grid grid-top"> <div class="text-center"> <strong> 1 </strong> </div> <div class="text-center"> <strong> 2 </strong> </div> <div class="text-center"> <strong> 3 </strong> </div> <div class="text-center"> <strong> 4 </strong> </div> <div class="text-center"> <strong> 5 </strong> </div> </div> |
1
2
3
4
5
|
| <div class="grid grid-right"> <div class="text-center"> <strong> 1 </strong> </div> <div class="text-center"> <strong> 2 </strong> </div> <div class="text-center"> <strong> 3 </strong> </div> <div class="text-center"> <strong> 4 </strong> </div> <div class="text-center"> <strong> 5 </strong> </div> </div> |
1
2
3
4
5
|
| <div class="grid grid-bottom"> <div class="text-center"> <strong> 1 </strong> </div> <div class="text-center"> <strong> 2 </strong> </div> <div class="text-center"> <strong> 3 </strong> </div> <div class="text-center"> <strong> 4 </strong> </div> <div class="text-center"> <strong> 5 </strong> </div> </div> |
1
2
3
4
5
|
| <div class="grid grid-left"> <div class="text-center"> <strong> 1 </strong> </div> <div class="text-center"> <strong> 2 </strong> </div> <div class="text-center"> <strong> 3 </strong> </div> <div class="text-center"> <strong> 4 </strong> </div> <div class="text-center"> <strong> 5 </strong> </div> </div> |
1
2
3
4
5
|
Dynamic Grid (flex)
In this case, we're talking about the flex property, which can be applied to a variety of cases.
| code | display |
|---|---|
| <div class="flex" style="border:1px red solid;"> <div class="text-center" style="border:1px blue solid;"> <strong>A</strong> </div> <div class="text-center" style="border:1px green solid;"> <strong>B</strong> </div> <div class="text-center" style="border:1px yellow solid;"> <strong>C</strong> </div> </div> |
A
B
C
|
| <div class="flex flex-row" style="border:1px red solid;"> <div class="text-center" style="border:1px blue solid;"> <strong>A</strong> </div> <div class="text-center" style="border:1px green solid;"> <strong>B</strong> </div> <div class="text-center" style="border:1px yellow solid;"> <strong>C</strong> </div> </div> |
A
B
C
|
| <div class="flex flex-col" style="border:1px red solid;"> <div class="text-center" style="border:1px blue solid;"> <strong>A</strong> </div> <div class="text-center" style="border:1px green solid;"> <strong>B</strong> </div> <div class="text-center" style="border:1px yellow solid;"> <strong>C</strong> </div> </div> |
A
B
C
|
| <div class="flex flex-start" style="border:1px red solid;"> <div class="text-center" style="border:1px blue solid;"> <strong>A</strong> </div> <div class="text-center" style="border:1px green solid;"> <strong>B</strong> </div> <div class="text-center" style="border:1px yellow solid;"> <strong>C</strong> </div> </div> |
A
B
C
|
| <div class="flex flex-center" style="border:1px red solid;"> <div class="text-center" style="border:1px blue solid;"> <strong>A</strong> </div> <div class="text-center" style="border:1px green solid;"> <strong>B</strong> </div> <div class="text-center" style="border:1px yellow solid;"> <strong>C</strong> </div> </div> |
A
B
C
|
| <div class="flex flex-end" style="border:1px red solid;"> <div class="text-center" style="border:1px blue solid;"> <strong>A</strong> </div> <div class="text-center" style="border:1px green solid;"> <strong>B</strong> </div> <div class="text-center" style="border:1px yellow solid;"> <strong>C</strong> </div> </div> |
A
B
C
|
| <div class="flex flex-around" style="border:1px red solid;"> <div class="text-center" style="border:1px blue solid;"> <strong>A</strong> </div> <div class="text-center" style="border:1px green solid;"> <strong>B</strong> </div> <div class="text-center" style="border:1px yellow solid;"> <strong>C</strong> </div> </div> |
A
B
C
|
| <div class="flex flex-justify" style="border:1px red solid;"> <div class="text-center" style="border:1px blue solid;"> <strong>A</strong> </div> <div class="text-center" style="border:1px green solid;"> <strong>B</strong> </div> <div class="text-center" style="border:1px yellow solid;"> <strong>C</strong> </div> </div> |
A
B
C
|
| <div class="flex flex-alternate" style="border:1px red solid;"> <div class="text-center" style="border:1px blue solid;"> <strong>A</strong> </div> <div class="text-center" style="border:1px green solid;"> <strong>B</strong> </div> <div class="text-center" style="border:1px yellow solid;"> <strong>C</strong> </div> </div> |
A
B
C
|