Yuno Design Kit

A Badass Design Kit inspired by Yuno Design.

Colors

  • E55E5E
  • F9886C
  • FBCC3B
  • 41AFA5
  • 40C1E1
  • 3887BE
  • 50667F
  • 223B53
  • 8A8ACB
  • ED64C4
  • 231C13
  • FFFFFF

Pick your size

Solid Treatment, All Sizes

Small

Medium

Large


Hollow Treatment, All Sizes

Small

Medium

Large


Disabled Treatment, All Fills

Solid

Hollow


Action row component

Pick your color

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.