the containers
with gutters or full-width
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ad amet consequatur culpa
cupiditate deleniti dignissimos dolorem ducimus earum est fuga iure, iusto laboriosam
minima natus repellat repudiandae vitae voluptatem?
Consequuntur cumque cupiditate dolore hic, ipsam iusto magnam maiores maxime
necessitatibus nihil praesentium reprehenderit sed sunt tempore totam veniam voluptate?
Ad consequuntur dicta ducimus ea qui sunt ut! Cum, debitis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ad amet consequatur culpa
cupiditate deleniti dignissimos dolorem ducimus earum est fuga iure, iusto laboriosam
minima natus repellat repudiandae vitae voluptatem?
Consequuntur cumque cupiditate dolore hic, ipsam iusto magnam maiores maxime
necessitatibus nihil praesentium reprehenderit sed sunt tempore totam veniam voluptate?
Ad consequuntur dicta ducimus ea qui sunt ut! Cum, debitis.
<div>
<div class="container">
... content ...
</div>
</div>
<div>
<div class="container-fluid">
... content ...
</div>
</div>
the flex grid
the different screen sizes
| screen |
phone |
tablet |
desktop |
large desktop |
| prefix |
.s |
.m |
.l |
.xl |
| dimensions (px) |
from 0 to 600 |
from 601 to 992 |
from 993 to 1200 |
from 1201 to the sky |
| container width (%) |
90 |
85 |
70 |
70 |
row with equal sizes
row*
all the classes marked with: (*) are suffixed. So for example, with .column class,
you can use .column, .column-s, .column-m, .column-l, or .column-xl
The only exception is for the .row and .row-g classes that you can use as suffixed but are always necessary:
class="row row-s"
1) col
2) col
3) col
4) col
5) col
6) col
<div class="row">
<div class="col">
<h3>1) col</h3>
</div>
<div class="col">
<h3>2) col</h3>
</div>
<div class="col">
<h3>3) col</h3>
</div>
<div class="col">
<h3>4) col</h3>
</div>
<div class="col">
<h3>5) col</h3>
</div>
<div class="col">
<h3>6) col</h3>
</div>
</div>
row row-reverse*
1) col
2) col
3) col
4) col
5) col
6) col
<div class="row row-reverse">
<div class="col">
<h3>1) col</h3>
</div>
<div class="col">
<h3>2) col</h3>
</div>
<div class="col">
<h3>3) col</h3>
</div>
<div class="col">
<h3>4) col</h3>
</div>
<div class="col">
<h3>5) col</h3>
</div>
<div class="col">
<h3>6) col</h3>
</div>
</div>
row column*
1) col
2) col
3) col
4) col
5) col
6) col
<div class="row column">
<div class="col">
<h3>1) col</h3>
</div>
<div class="col">
<h3>2) col</h3>
</div>
<div class="col">
<h3>3) col</h3>
</div>
<div class="col">
<h3>4) col</h3>
</div>
<div class="col">
<h3>5) col</h3>
</div>
<div class="col">
<h3>6) col</h3>
</div>
</div>
row column-reverse*
1) col
2) col
3) col
4) col
5) col
6) col
<div class="row column-reverse">
<div class="col">
<h3>1) col</h3>
</div>
<div class="col">
<h3>2) col</h3>
</div>
<div class="col">
<h3>3) col</h3>
</div>
<div class="col">
<h3>4) col</h3>
</div>
<div class="col">
<h3>5) col</h3>
</div>
<div class="col">
<h3>6) col</h3>
</div>
</div>
flex wrap
row wrap*
1) col
2) col
3) col
4) col
5) col
6) col
<div class="row wrap">
<div class="col">
<h3>1) col</h3>
</div>
<div class="col">
<h3>2) col</h3>
</div>
<div class="col">
<h3>3) col</h3>
</div>
<div class="col">
<h3>4) col</h3>
</div>
<div class="col">
<h3>5) col</h3>
</div>
<div class="col">
<h3>6) col</h3>
</div>
</div>
row nowrap*
1) col
2) col
3) col
4) col
5) col
6) col
<div class="row nowrap">
<div class="col">
<h3>1) col</h3>
</div>
<div class="col">
<h3>2) col</h3>
</div>
<div class="col">
<h3>3) col</h3>
</div>
<div class="col">
<h3>4) col</h3>
</div>
<div class="col">
<h3>5) col</h3>
</div>
<div class="col">
<h3>6) col</h3>
</div>
</div>
row wrap-reverse*
1) col
2) col
3) col
4) col
5) col
6) col
<div class="row wrap-reverse">
<div class="col">
<h3>1) col</h3>
</div>
<div class="col">
<h3>2) col</h3>
</div>
<div class="col">
<h3>3) col</h3>
</div>
<div class="col">
<h3>4) col</h3>
</div>
<div class="col">
<h3>5) col</h3>
</div>
<div class="col">
<h3>6) col</h3>
</div>
</div>
flex grid with custom sizes
row
1) col col-3
2) col col-6
some text ...
some text ...
3) col
<div class="row">
<div class="col col-3">
<h3>1) col col-3</h3>
</div>
<div class="col col-6">
<h3>2) col col-6</h3>
<p>some text ... </p>
<p>some text ... </p>
</div>
<div class="col">
<h3>3) col</h3>
</div>
</div>
flex align items
row items-start*
1) col col-3
2) col col-6
some text ...
some text ...
3) col
<div class="row items-start">
<div class="col col-3">
<h3>1) col col-3</h3>
</div>
<div class="col col-6">
<h3>2) col col-6</h3>
<p>some text ... </p>
<p>some text ... </p>
</div>
<div class="col">
<h3>3) col</h3>
</div>
</div>
row items-end*
1) col col-3
2) col col-6
some text ...
some text ...
3) col
<div class="row items-end">
<div class="col col-3">
<h3>1) col col-3</h3>
</div>
<div class="col col-6">
<h3>2) col col-6</h3>
<p>some text ... </p>
<p>some text ... </p>
</div>
<div class="col">
<h3>3) col</h3>
</div>
</div>
row items-center*
1) col col-3
2) col col-6
some text ...
some text ...
3) col
<div class="row items-center">
<div class="col col-3">
<h3>1) col col-3</h3>
</div>
<div class="col col-6">
<h3>2) col col-6</h3>
<p>texte en dessous</p>
<p>texte en dessous</p>
</div>
<div class="col">
<h3>3) col</h3>
</div>
</div>
row items-baseline*
1) col col-3
2) col col-6
some text ...
some text ...
3) col
<div class="row items-baseline">
<div class="col col-3" style="padding-top: 50px">
<h3>1) col col-3</h3>
</div>
<div class="col col-6">
<h3>2) col col-6</h3>
<p>some text ... </p>
<p>some text ... </p>
</div>
<div class="col" style="padding-top: 15px">
<h3>3) col</h3>
</div>
</div>
row items-stretch(by default)*
1) col col-3
2) col col-6
some text ...
some text ...
3) col
<div class="row items-stretch">
<div class="col col-3">
<h3>1) col col-3</h3>
</div>
<div class="col col-6">
<h3>2) col col-6</h3>
<p>some text ... </p>
<p>some text ... </p>
</div>
<div class="col">
<h3>3) col</h3>
</div>
</div>
flex align content
row content-start*
1) col col-3
2) col col-6
some text ...
some text ...
3) col col-3
2) col col-6
some text ...
some text ...
1) col col-3
3) col
<div class="row content-start">
<div class="col col-3">
<h3>1) col col-3</h3>
</div>
<div class="col col-6">
<h3>2) col col-6</h3>
<p>some text ... </p>
<p>some text ... </p>
</div>
<div class="col col-3">
<h3>3) col col-3</h3>
</div>
<div class="col col-6">
<h3>2) col col-6</h3>
<p>some text ... </p>
<p>some text ... </p>
</div>
<div class="col col-3">
<h3>1) col col-3</h3>
</div>
<div class="col">
<h3>3) col</h3>
</div>
</div>
row content-end*
1) col col-3
2) col col-6
some text ...
some text ...
3) col col-3
2) col col-6
some text ...
some text ...
1) col col-3
3) col
<div class="row content-end">
<div class="col col-3">
<h3>1) col col-3</h3>
</div>
<div class="col col-6">
<h3>2) col col-6</h3>
<p>some text ... </p>
<p>some text ... </p>
</div>
<div class="col col-3">
<h3>3) col col-3</h3>
</div>
<div class="col col-6">
<h3>2) col col-6</h3>
<p>some text ... </p>
<p>some text ... </p>
</div>
<div class="col col-3">
<h3>1) col col-3</h3>
</div>
<div class="col">
<h3>3) col</h3>
</div>
</div>
row content-center*
1) col col-3
2) col col-6
some text ...
some text ...
3) col col-3
2) col col-6
some text ...
some text ...
1) col col-3
3) col
<div class="row content-center">
<div class="col col-3">
<h3>1) col col-3</h3>
</div>
<div class="col col-6">
<h3>2) col col-6</h3>
<p>some text ... </p>
<p>some text ... </p>
</div>
<div class="col col-3">
<h3>3) col col-3</h3>
</div>
<div class="col col-6">
<h3>2) col col-6</h3>
<p>some text ... </p>
<p>some text ... </p>
</div>
<div class="col col-3">
<h3>1) col col-3</h3>
</div>
<div class="col">
<h3>3) col</h3>
</div>
</div>
row content-stretch*
1) col col-3
2) col col-6
some text ...
some text ...
3) col col-3
2) col col-6
some text ...
some text ...
1) col col-3
3) col
<div class="row content-stretch">
<div class="col col-3">
<h3>1) col col-3</h3>
</div>
<div class="col col-6">
<h3>2) col col-6</h3>
<p>some text ... </p>
<p>some text ... </p>
</div>
<div class="col col-3">
<h3>3) col col-3</h3>
</div>
<div class="col col-6">
<h3>2) col col-6</h3>
<p>some text ... </p>
<p>some text ... </p>
</div>
<div class="col col-3">
<h3>1) col col-3</h3>
</div>
<div class="col">
<h3>3) col</h3>
</div>
</div>
row content-between*
1) col col-3
2) col col-6
some text ...
some text ...
3) col col-3
2) col col-6
some text ...
some text ...
1) col col-3
3) col
<div class="row content-between">
<div class="col col-3">
<h3>1) col col-3</h3>
</div>
<div class="col col-6">
<h3>2) col col-6</h3>
<p>some text ... </p>
<p>some text ... </p>
</div>
<div class="col col-3">
<h3>3) col col-3</h3>
</div>
<div class="col col-6">
<h3>2) col col-6</h3>
<p>some text ... </p>
<p>some text ... </p>
</div>
<div class="col col-3">
<h3>1) col col-3</h3>
</div>
<div class="col">
<h3>3) col</h3>
</div>
</div>
row content-around*
1) col col-3
2) col col-6
some text ...
some text ...
3) col col-3
2) col col-6
some text ...
some text ...
1) col col-3
3) col
<div class="row content-around">
<div class="col col-3">
<h3>1) col col-3</h3>
</div>
<div class="col col-6">
<h3>2) col col-6</h3>
<p>some text ... </p>
<p>some text ... </p>
</div>
<div class="col col-3">
<h3>3) col col-3</h3>
</div>
<div class="col col-6">
<h3>2) col col-6</h3>
<p>some text ... </p>
<p>some text ... </p>
</div>
<div class="col col-3">
<h3>1) col col-3</h3>
</div>
<div class="col">
<h3>3) col</h3>
</div>
</div>
justify-content
row justify-start*
1) col col-2
2) col col-6
some text ...
some text ...
3) col col-2
2) col col-4
some text ...
some text ...
1) col col-4
3) col col-1
<div class="row justify-start">
<div class="col col-2">
<h3>1) col col-2</h3>
</div>
<div class="col col-6">
<h3>2) col col-6</h3>
<p>some text ... </p>
<p>some text ... </p>
</div>
<div class="col col-2">
<h3>3) col col-2</h3>
</div>
<div class="col col-4">
<h3>2) col col-4</h3>
<p>some text ... </p>
<p>some text ... </p>
</div>
<div class="col col-4">
<h3>1) col col-4</h3>
</div>
<div class="col col-1">
<h3>3) col col-1</h3>
</div>
</div>
row justify-end*
1) col col-2
2) col col-6
some text ...
some text ...
3) col col-2
2) col col-4
some text ...
some text ...
1) col col-4
3) col col-1
<div class="row justify-end">
<div class="col col-2">
<h3>1) col col-2</h3>
</div>
<div class="col col-6">
<h3>2) col col-6</h3>
<p>some text ... </p>
<p>some text ... </p>
</div>
<div class="col col-2">
<h3>3) col col-2</h3>
</div>
<div class="col col-4">
<h3>2) col col-4</h3>
<p>some text ... </p>
<p>some text ... </p>
</div>
<div class="col col-4">
<h3>1) col col-4</h3>
</div>
<div class="col col-1">
<h3>3) col col-1</h3>
</div>
</div>
row justify-center*
1) col col-2
2) col col-6
some text ...
some text ...
3) col col-2
2) col col-4
some text ...
some text ...
1) col col-4
3) col col-1
<div class="row justify-center">
<div class="col col-2">
<h3>1) col col-2</h3>
</div>
<div class="col col-6">
<h3>2) col col-6</h3>
<p>some text ... </p>
<p>some text ... </p>
</div>
<div class="col col-2">
<h3>3) col col-2</h3>
</div>
<div class="col col-4">
<h3>2) col col-4</h3>
<p>some text ... </p>
<p>some text ... </p>
</div>
<div class="col col-4">
<h3>1) col col-4</h3>
</div>
<div class="col col-1">
<h3>3) col col-1</h3>
</div>
</div>
row justify-between*
1) col col-2
2) col col-6
some text ...
some text ...
3) col col-2
2) col col-4
some text ...
some text ...
1) col col-4
3) col col-1
<div class="row justify-between">
<div class="col col-2">
<h3>1) col col-2</h3>
</div>
<div class="col col-6">
<h3>2) col col-6</h3>
<p>some text ... </p>
<p>some text ... </p>
</div>
<div class="col col-2">
<h3>3) col col-2</h3>
</div>
<div class="col col-4">
<h3>2) col col-4</h3>
<p>some text ... </p>
<p>some text ... </p>
</div>
<div class="col col-4">
<h3>1) col col-4</h3>
</div>
<div class="col col-1">
<h3>3) col col-1</h3>
</div>
</div>
row justify-around*
1) col col-2
2) col col-6
some text ...
some text ...
3) col col-2
2) col col-4
some text ...
some text ...
1) col col-4
3) col col-1
<div class="row justify-around">
<div class="col col-2">
<h3>1) col col-2</h3>
</div>
<div class="col col-6">
<h3>2) col col-6</h3>
<p>some text ... </p>
<p>some text ... </p>
</div>
<div class="col col-2">
<h3>3) col col-2</h3>
</div>
<div class="col col-4">
<h3>2) col col-4</h3>
<p>some text ... </p>
<p>some text ... </p>
</div>
<div class="col col-4">
<h3>1) col col-4</h3>
</div>
<div class="col col-1">
<h3>3) col col-1</h3>
</div>
</div>
row justify-evenly*
1) col col-2
2) col col-6
some text ...
some text ...
3) col col-2
2) col col-4
some text ...
some text ...
1) col col-4
3) col col-1
<div class="row justify-evenly">
<div class="col col-2">
<h3>1) col col-2</h3>
</div>
<div class="col col-6">
<h3>2) col col-6</h3>
<p>some text ... </p>
<p>some text ... </p>
</div>
<div class="col col-2">
<h3>3) col col-2</h3>
</div>
<div class="col col-4">
<h3>2) col col-4</h3>
<p>some text ... </p>
<p>some text ... </p>
</div>
<div class="col col-4">
<h3>1) col col-4</h3>
</div>
<div class="col col-1">
<h3>3) col col-1</h3>
</div>
</div>
the column system
for adaptative design
row
1) col s5 m7 l9 xl6 offset-xl4
cols are stretch by default
cols are stretch by default
cols are stretch by default
cols are stretch by default
2) col s7 m5 l3 xl1
3) col s4 m5 l3 xl7
4) col s4 m5 l3 xl5
5) col s4 m8 l10 xl12
6) col s5 offset-s7 m7 offset-m5 l9 offset-l2 xl4
<div class="row">
<div class="col s5 m7 l9 xl6 offset-xl4">
<h3>1) col s5 m7 l9 xl6 offset-xl4</h3>
<h3>cols are stretch by default</h3>
<h3>cols are stretch by default</h3>
<h3>cols are stretch by default</h3>
<h3>cols are stretch by default</h3>
</div>
<div class="col s7 m5 l3 xl1">
<h3>2) col s7 m5 l3 xl1</h3>
</div>
<div class="col s4 m5 l3 xl7">
<h3>3) col s4 m5 l3 xl7</h3>
</div>
<div class="col s4 m5 l3 xl5">
<h3>4) col s4 m5 l3 xl5</h3>
</div>
<div class="col s4 m8 l10 xl12">
<h3>5) col s4 m8 l10 xl12</h3>
</div>
<div class="col s5 offset-s7 m7 offset-m5 l9 offset-l2 xl4">
<h3>6) col s5 offset-s7 m7 offset-m5 l9 offset-l2 xl4</h3>
</div>
</div>
row with gutters
row-g
1) col s5 m7 l9 xl6 offset-xl4
2) col s7 m5 l3 xl1
3) col s4 m5 l3 xl7
4) col s4 m5 l3 xl5
5) col s4 m8 l10 xl12
6) col s5 offset-s7 m7 offset-m5 l9 offset-l2 xl4
<div class="row-g">
<div class="col s5 m7 l9 xl6 offset-xl4">
<h3>1) col s5 m7 l9 xl6 offset-xl4</h3>
</div>
<div class="col s7 m5 l3 xl1">
<h3>2) col s7 m5 l3 xl1</h3>
</div>
<div class="col s4 m5 l3 xl7">
<h3>3) col s4 m5 l3 xl7</h3>
</div>
<div class="col s4 m5 l3 xl5">
<h3>4) col s4 m5 l3 xl5</h3>
</div>
<div class="col s4 m8 l10 xl12">
<h3>5) col s4 m8 l10 xl12</h3>
</div>
<div class="col s5 offset-s7 m7 offset-m5 l9 offset-l2 xl4">
<h3>6) col s5 offset-s7 m7 offset-m5 l9 offset-l2 xl4</h3>
</div>
</div>
mixed styles grid
row content-between
1) col s5 m7 l9 xl6 offset-xl4
cols are stretch by default
cols are stretch by default
2) col s7 m5 l3 xl1
3) col s4 m5 l3 xl7
4) col s4 m5 l3 xl5
5) col s4 m8 l10 xl12
6) col s5 offset-s7 m7 offset-m5 l9 offset-l2 xl4
<div class="row content-between">
<div class="col s5 m7 l9 xl6 offset-xl4">
<h3>1) col s5 m7 l9 xl6 offset-xl4</h3>
<h3>cols are stretch by default</h3>
<h3>cols are stretch by default</h3>
</div>
<div class="col s7 m5 l3 xl1">
<h3>2) col s7 m5 l3 xl1</h3>
</div>
<div class="col s4 m5 l3 xl7">
<h3>3) col s4 m5 l3 xl7</h3>
</div>
<div class="col s4 m5 l3 xl5">
<h3>4) col s4 m5 l3 xl5</h3>
</div>
<div class="col s4 m8 l10 xl12">
<h3>5) col s4 m8 l10 xl12</h3>
</div>
<div class="col s5 offset-s7 m7 offset-m5 l9 offset-l2 xl4">
<h3>6) col s5 offset-s7 m7 offset-m5 l9 offset-l2 xl4</h3>
</div>
</div>
row-g content-around column-s row-reverse-l
1) col s5 m7 l9 xl6 offset-xl4
cols are stretch by default
cols are stretch by default
2) col s7 m5 l3 xl1
3) col s4 m5 l3 xl7
4) col s4 m5 l3 xl5
5) col s4 m8 l10 xl12
6) col s5 offset-s7 m7 offset-m5 l9 offset-l2 xl4
<div class="row-g content-around column-s row-reverse-l">
<div class="col s5 m7 l9 xl6 offset-xl4">
<h3>1) col s5 m7 l9 xl6 offset-xl4</h3>
<h3>cols are stretch by default</h3>
<h3>cols are stretch by default</h3>
</div>
<div class="col s7 m5 l3 xl1">
<h3>2) col s7 m5 l3 xl1</h3>
</div>
<div class="col s4 m5 l3 xl7">
<h3>3) col s4 m5 l3 xl7</h3>
</div>
<div class="col s4 m5 l3 xl5">
<h3>4) col s4 m5 l3 xl5</h3>
</div>
<div class="col s4 m8 l10 xl12">
<h3>5) col s4 m8 l10 xl12</h3>
</div>
<div class="col s5 offset-s7 m7 offset-m5 l9 offset-l2 xl4">
<h3>6) col s5 offset-s7 m7 offset-m5 l9 offset-l2 xl4</h3>
</div>
</div>
align-self
Use it to override the align-items property of the row for a particular col item
Note that float, clear and vertical-align have no effect on a flex item.
self-end*
1) col
some text ...
some text ...
some text ...
some text ...
2) col
3) col self-end
4) col
<div class="row">
<div class="col">
<h3>1) col</h3>
<p>some text ... </p>
<p>some text ... </p>
<p>some text ... </p>
<p>some text ... </p>
</div>
<div class="col"><h3>2) col</h3></div>
<div class="col self-end"><h3>3) col self-end</h3></div>
<div class="col"><h3>4) col</h3></div>
</div>
self-start*
1) col
some text ...
some text ...
some text ...
some text ...
2) col
3) col self-start
4) col
<div class="row">
<div class="col">
<h3>1) col</h3>
<p>some text ... </p>
<p>some text ... </p>
<p>some text ... </p>
<p>some text ... </p>
</div>
<div class="col"><h3>2) col</h3></div>
<div class="col self-start"><h3>3) col self-start</h3></div>
<div class="col"><h3>4) col</h3></div>
</div>
self-center*
1) col
some text ...
some text ...
some text ...
some text ...
2) col
3) col self-center
4) col
<div class="row">
<div class="col">
<h3>1) col</h3>
<p>some text ... </p>
<p>some text ... </p>
<p>some text ... </p>
<p>some text ... </p>
</div>
<div class="col"><h3>2) col</h3></div>
<div class="col self-center"><h3>3) col self-center</h3></div>
<div class="col"><h3>4) col</h3></div>
</div>
self-baseline*
1) col
some text ...
some text ...
some text ...
some text ...
2) col
3) col self-baseline
4) col
<div class="row">
<div class="col" style="margin-top: 80px">
<h3>1) col</h3>
<p>some text ... </p>
<p>some text ... </p>
<p>some text ... </p>
<p>some text ... </p>
</div>
<div class="col" style="margin-top: 80px"><h3>2) col</h3></div>
<div class="col self-baseline"><h3>3) col self-baseline</h3></div>
<div class="col" style="margin-top: 80px"><h3>4) col</h3></div>
</div>
self-stretch*
1) col
some text ...
some text ...
some text ...
some text ...
2) col
3) col self-stretch
4) col
<div class="row items-start">
<div class="col">
<h3>1) col</h3>
<p>some text ... </p>
<p>some text ... </p>
<p>some text ... </p>
<p>some text ... </p>
</div>
<div class="col"><h3>2) col</h3></div>
<div class="col self-stretch"><h3>3) col self-stretch</h3></div>
<div class="col"><h3>4) col</h3></div>
</div>
order*
integer from 1 to 100, neg = negative
1) col order-1
2) col order-5
3) col
4) col order-neg-9
<div class="row justify-between">
<div class="col order-1"><h3>1) col order-1</h3></div>
<div class="col order-5"><h3>2) col order-5</h3></div>
<div class="col"><h3>3) col</h3></div>
<div class="col order-neg-9"><h3>4) col order-neg-9</h3></div>
</div>
grow*
1) col grow-6
2) col grow-4
3) col
<div class="row">
<div class="col grow-6"><h3>1) col grow-6</h3></div>
<div class="col grow-4"><h3>2) col grow-4</h3></div>
<div class="col"><h3>3) col</h3></div>
</div>
visibility
with suffixed classes, you can hide an item on specified screen size
col xl5 offset-xl2 visible-xl
<div class="row">
<div class="col xl5 offset-xl2 visible-xl">
<h3>col xl5 offset-xl2 visible-xl</h3>
</div>
</div>
full-page mode
like homepage header
a little demo
<div class="full-page" style="background-image: url(demo/assets/images/work.jpg);">
<h1 class="center text-red">Title of the page</h1>
</div>
expand ratio
<section class="full-page flex-layout-expand">
<header>the header is at the top</header>
<main class="expand">
the content take all the page - the header height - the footer height
</main>
<footer>the footer is at the bottom</footer>
</section>
the images classes (works with every html tag)
contour effects
rounded (same as .border-radius class)
thumbnail
circle (as you see, it needs a square image)
<img class="rounded" src="demo/assets/images/img2.jpg" alt=""/>
<img class="thumbnail" src="demo/assets/images/img2.jpg" alt=""/>
<img class="circle" src="demo/assets/images/img2.jpg" alt=""/>
avatar and avatar mini
<div class="avatar">
<img src="demo/assets/images/img2.jpg" alt=""/>
</div>
<div class="avatar-mini">
<img src="demo/assets/images/img2.jpg" alt=""/>
</div>
the hover effects
hover images
<div class="col m6">
<a href="demo/assets/images/img1.jpg">
<figure class="hover">
<img src="demo/assets/images/img1.jpg" alt=""/>
<figcaption> ... some hidden text ... </figcaption>
</figure>
</a>
</div>
<div class="col m6">
<a href="demo/assets/images/img2.jpg">
<figure class="hover">
<img src="demo/assets/images/img2.jpg" alt=""/>
<figcaption> ... some hidden text ... </figcaption>
</figure>
</a>
</div>
hover sections
<div>
<a href="css.html">
<div class="hover-div row">
<div class="hover-div-img-wrapper col m8">
<img src="demo/assets/images/img2.jpg" alt=""/>
</div>
<div class="padding col m4 theme-2">
<p>i am a link box</p>
<p>linking to another page</p>
</div>
</div>
</a>
</div>
hover image with animation
<div class="col m6">
<a href="demo/assets/images/img1.jpg">
<figure class="hover-animated no-margin">
<img src="demo/assets/images/img1.jpg" alt=""/>
<figcaption>
<p>lorem ipsum dolor sit amet</p>
</figcaption>
</figure>
</a>
</div>
<div class="col m6">
<a href="demo/assets/images/img2.jpg">
<figure class="hover-animated no-margin">
<img src="demo/assets/images/img2.jpg" alt=""/>
<figcaption>
<p>lorem ipsum dolor sit amet</p>
</figcaption>
</figure>
</a>
</div>
all the utils
rescue classes
easy to get result with pure html
| property |
classes |
| text-align |
.text-left |
.text-center |
.text-right |
| text-transform |
.capitalize |
.uppercase |
.lowercase |
| font-variant |
.small-caps |
|
|
| font-style |
.italic |
|
|
| font-weight |
.bold |
|
|
| pseudo styles |
.sup |
.sub |
|
| text-decoration |
.underline |
.overline |
|
| display |
.block |
.inline |
.inline-block |
| visibility |
.hidden |
|
|
| float |
.left |
.right |
.clear |
| position |
.relative |
.absolute |
.fixed |
| dimensions |
.full-width |
.full-height |
.full-page |
| padding 20px |
.no-padding |
.padding |
.padding-top |
| .padding-bottom |
.padding-left |
.padding-right |
| margin 20px |
.no-margin |
.margin |
.margin-top |
| .margin-bottom |
.margin-left |
.margin-right |
| cursor |
.pointer |
|
|
| border-radius 4px |
.border-radius |
|
|
| hover box-shadow |
.hoverable |
|
|
| absolute center |
.center |
|
|
| hidden for print |
.no-print |
|
|
| the power of iRoom toolkit |
