Colors
- E55E5E
- F9886C
- FBCC3B
- 41AFA5
- 40C1E1
- 3887BE
- 50667F
- 223B53
- 8A8ACB
- ED64C4
- 231C13
- FFFFFF
Margins
.m-0 {
margin: 0 0 !important;
}
.mt-0 {
margin-top: 0 !important;
}
.mr-0 {
margin-right: 0 !important;
}
.mb-0 {
margin-bottom: 0 !important;
}
.ml-0 {
margin-left: 0 !important;
}
.m-h {
margin: 0.5rem 0.5rem !important;
}
.mt-h {
margin-top: 0.5rem !important;
}
.mr-h {
margin-right: 0.5rem !important;
}
.mb-h {
margin-bottom: 0.5rem !important;
}
.ml-h {
margin-left: 0.5rem !important;
}
.m-1 {
margin: 1rem 1rem !important;
}
.mt-1 {
margin-top: 1rem !important;
}
.mr-1 {
margin-right: 1rem !important;
}
.mb-1 {
margin-bottom: 1rem !important;
}
.ml-1 {
margin-left: 1rem !important;
}
.m-2 {
margin: 1.5rem 1.5rem !important;
}
.mt-2 {
margin-top: 1.5rem !important;
}
.mr-2 {
margin-right: 1.5rem !important;
}
.mb-2 {
margin-bottom: 1.5rem !important;
}
.ml-2 {
margin-left: 1.5rem !important;
}
.m-3 {
margin: 3rem 3rem !important;
}
.mt-3 {
margin-top: 3rem !important;
}
.mr-3 {
margin-right: 3rem !important;
}
.mb-3 {
margin-bottom: 3rem !important;
}
.ml-3 {
margin-left: 3rem !important;
}
.m-4 {
margin: 4rem 4rem !important;
}
.mt-4 {
margin-top: 4rem !important;
}
.mr-4 {
margin-right: 4rem !important;
}
.mb-4 {
margin-bottom: 4rem !important;
}
.ml-4 {
margin-left: 4rem !important;
}
Padding
.p-0 {
padding: 0 0 !important;
}
.pt-0 {
padding-top: 0 !important;
}
.pr-0 {
padding-right: 0 !important;
}
.pb-0 {
padding-bottom: 0 !important;
}
.pl-0 {
padding-left: 0 !important;
}
.p-h {
padding: 0.5rem 0.5rem !important;
}
.pt-h {
padding-top: 0.5rem !important;
}
.pr-h {
padding-right: 0.5rem !important;
}
.pb-h {
padding-bottom: 0.5rem !important;
}
.pl-h {
padding-left: 0.5rem !important;
}
.p-1 {
padding: 1rem 1rem !important;
}
.pt-1 {
padding-top: 1rem !important;
}
.pr-1 {
padding-right: 1rem !important;
}
.pb-1 {
padding-bottom: 1rem !important;
}
.pl-1 {
padding-left: 1rem !important;
}
.p-2 {
padding: 1.5rem 1.5rem !important;
}
.pt-2 {
padding-top: 1.5rem !important;
}
.pr-2 {
padding-right: 1.5rem !important;
}
.pb-2 {
padding-bottom: 1.5rem !important;
}
.pl-2 {
padding-left: 1.5rem !important;
}
.p-3 {
padding: 3rem 3rem !important;
}
.pt-3 {
padding-top: 3rem !important;
}
.pr-3 {
padding-right: 3rem !important;
}
.pb-3 {
padding-bottom: 3rem !important;
}
.pl-3 {
padding-left: 3rem !important;
}
.p-4 {
padding: 4rem 4rem !important;
}
.pt-4 {
padding-top: 4rem !important;
}
.pr-4 {
padding-right: 4rem !important;
}
.pb-4 {
padding-bottom: 4rem !important;
}
.pl-4 {
padding-left: 4rem !important;
}
Typography
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Syntax
This grid system uses a 12-column grid and is fully responsive. Columns are wrapped within a grid class.
<div class="grid">
<div class="column-xs-12 column-md-12">1</div>
</div>Grid
Use column-xs-*, column-sm-*, column-md-*, or column-lg-* classes with values 1 through 12 to indicate the number of columns. By default, all columns are the same height.
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
5
7
6
6
7
5
8
4
9
3
10
2
11
1
12
<div class="grid">
<div class="column-xs-12 column-md-1">1</div>
...
<div class="column-xs-12 column-md-12">12</div>
</div>Nesting
grid within a grid.
column-md-6
column-md-4
column-md-4
column-md-4
column-md-6
column-md-4
column-md-4
column-md-4
<div class="grid">
<div class="column-xs-12 column-md-6">column-md-6
<div class="grid">
<div class="column-xs-12 column-md-4">column-md-4</div>
<div class="column-xs-12 column-md-4">column-md-4</div>
<div class="column-xs-12 column-md-4">column-md-4</div>
</div>
</div>
...
</div>Order
Reorder columns by adding first and last.
1
2
3
4
<div class="grid">
<div class="column-xs-12 column-md-3">1</div>
<div class="column-xs-12 column-md-3 first">2</div>
<div class="column-xs-12 column-md-3 last">3</div>
<div class="column-xs-12 column-md-3">4</div>
</div>Top Alignment
Vertically align columns at the top with align-top.
This column in the grid is aligned at the top.
2
3
4
<div class="grid align-top">
<div class="column-xs-12 column-md-3">This column in the grid is aligned at the top.</div>
<div class="column-xs-12 column-md-3">2</div>
<div class="column-xs-12 column-md-3">3</div>
<div class="column-xs-12 column-md-3">4</div>
</div>Center Alignment
Vertically align columns at the center with align-center.
1
This column in the grid is aligned at the center.
This column in the grid is aligned at the center.
4
<div class="grid align-center">
<div class="column-xs-12 column-md-3">1</div>
<div class="column-xs-12 column-md-3">This column in the grid is aligned at the center.</div>
<div class="column-xs-12 column-md-3">This column in the grid is aligned at the center.</div>
<div class="column-xs-12 column-md-3">4</div>
</div>Bottom Alignment
Vertically align columns at the bottom with align-bottom.
1
2
3
This column in the grid is aligned at the bottom.
<div class="grid align-bottom">
<div class="column-xs-12 column-md-3">1</div>
<div class="column-xs-12 column-md-3">2</div>
<div class="column-xs-12 column-md-3">3</div>
<div class="column-xs-12 column-md-3">This column in the grid is aligned at the bottom.</div>
</div>Modal
See the Pen Yuno Design Kit Modal by suman kunwar (@sumn2u) on CodePen.
Card Section
Example of a card with a survey.
See the Pen card by suman kunwar (@sumn2u) on CodePen.
Example of floating label input
See the Pen Yuno Input by suman kunwar (@sumn2u) on CodePen.