Grid

ey-row Classes

        
            
  .ey-row  // Define and element as a ey-row
  .reverse  // Reverse the order of the ey-row's children
  .natural-height  // ey-row children heights match their contents
  .flex-column  // Arrange ey-row children vertically
  .start  // Align ey-row children to the beginning of the ey-row
  .center  // Align ey-row children to the center of the ey-row
  .end  // Align ey-row children to the end of the ey-row
  .top  // Align ey-row children to the top of the ey-row
  .middle  // Align ey-row children to the middle of the ey-row
  .bottom  // Align ey-row children to the bottom of the ey-row
  .around  // Apply equal space around each ey-row child
  .between  // Apply equal space between each ey-row child

Column Classes

        
            
  .ey-column  // Define a column with auto-sizing
  .ey-column-xs  // Define a column with auto-sizing on XS and up
  .ey-column-sm  // Define a column with auto-sizing on SM and up
  .ey-column-md  // Define a column with auto-sizing on MD and up
  .ey-column-lg  // Define a column with auto-sizing on LG and up
  .ey-column-xl  // Define a column with auto-sizing on XL and up
  .ey-column-xs-<column number>  // Define a column's number width on XS and up
  .ey-column-sm-<column number>  // Define a column's number width on SM and up
  .ey-column-md-<column number>  // Define a column's number width on MD and up
  .ey-column-lg-<column number>  // Define a column's number width on LG and up
  .ey-column-xl-<column number>  // Define a column's number width on XL and up
  .ey-column-xs-offset-<column number>  // Offset by a number width on XS and up
  .ey-column-sm-offset-<column number>  // Offset by a number width on SM and up
  .ey-column-md-offset-<column number>  // Offset by a number width on MD and up
  .ey-column-lg-offset-<column number>  // Offset by a number width on LG and up
  .ey-column-xl-offset-<column number>  // Offset by a number width on XL and up
  .first  // Make a column first in order within a ey-row
  .first-xs  // Make a column first in order on XS and up
  .first-sm  // Make a column first in order on SM and up
  .first-md  // Make a column first in order on MD and up
  .first-lg  // Make a column first in order on LG and up
  .first-xl  // Make a column first in order on XL and up
  .last  // Make a column last in order on XS and up
  .last-xs  // Make a column last in order on XS and up
  .last-sm  // Make a column last in order on SM and up
  .last-md  // Make a column last in order on MD and up
  .last-lg  // Make a column last in order on LG and up
  .last-xl  // Make a column last in order on XL and up

Visibility Classes

        
            
  .show  // Show an element
  .show-xs  // Show an element on XS and up
  .show-xs-only  // Show an element on XS only
  .show-sm  // Show an element on SM and up
  .show-sm-only  // Show an element on SM only
  .show-md  // Show an element on MD and up
  .show-md-only  // Show an element on MD only
  .show-lg  // Show an element on LG and up
  .show-lg-only  // Show an element on LG only
  .show-xl  // Show an element on XL screens
  .hide  // Hide an element
  .hide-xs  // Hide an element on XS and up
  .hide-xs-only  // Hide an element on XS only
  .hide-sm  // Hide an element on SM and up
  .hide-sm-only  // Hide an element on SM only
  .hide-md  // Hide an element on MD and up
  .hide-md-only  // Hide an element on MD only
  .hide-lg  // Hide an element on LG and up
  .hide-lg-only  // Hide an element on LG only
  .hide-xl  // Hide an element on XL screens
ey-column
ey-column
ey-column
ey-column
ey-column
ey-column
ey-column

        <div class="ey-row">
        
 <div class="ey-column-xs-12 ey-column-sm-3 ey-column-md-2 ey-column-lg-1">ey-column></div>
            <div class="ey-column-xs-6 ey-column-sm-6 ey-column-md-8 ey-column-lg-10">ey-column></div>
            <div class="ey-column-xs-6 ey-column-sm-3 ey-column-md-2 ey-column-lg-1">ey-column></div>
            <div class="ey-column-xs-12 ey-column-sm-3 ey-column-md-2 ey-column-lg-1">ey-column></div>
            <div class="ey-column-xs-12 ey-column-sm-9 ey-column-md-10 ey-column-lg-11">ey-column></div>
            <div class="ey-column-xs-10 ey-column-sm-6 ey-column-md-8 ey-column-lg-10">ey-column></div>
            <div class="ey-column-xs-2 ey-column-sm-6 ey-column-md-4 ey-column-lg-2">ey-column></div>
            </div>

Offsets

Auto width

Alignment

.start-xs
.center-xs
.end-xs
.center-xs, .end-sm, .start-md
.top-xs
.middle-xs
.bottom-xs

Distribution

.around-xs

.between-xs

Reordering

1

2

3 (.first-xs)

4

5

6

1

2

3 (.last-xs)

4

5

6

Reversing

1

2

3

Column Height Equalizer

They never said winning was easy.

Another one. It’s on you how you want to live your life. Everyone has a choice. I pick my choice, squeaky clean. They don’t want us to eat. The first of the month is coming, we have to get money, we have no choice. Some people can’t handle success, I can.

The key to more success is to get a massage once a week, very important, major key, cloth talk.

Nested Grids

Visibility

.hide-md

.hide-xs, .show-md

.hide-sm-only