⬅

Push

Push (offset) Utilities

The push utility classes apply various percentage based offsets to elements. They can be used on almost anything, but they’re primarily used within the grid system, along side the o-grid-cell and u-sizeXofY classes.

.u-size4of12

.u-push4of12 .u-size4of12

<div class="o-grid">
  <div class="o-grid-cell  u-size4of12">
    <p class="u-bgGrayLight">.u-size4of12</p>
  </div>
  <div class="o-grid-cell  u-push4of12  u-size4of12">
    <p class="u-bgGrayLight">.u-push4of12 .u-size4of12</p>
  </div>
</div>

Available Classes

Class Name Responsive Class Description
u-pushXofY u-[sm|md|lg]-pushXofY Specify the proportional offset before an object.
X must be an integer less than Y.
Y can be any of the following numbers: 2, 3, 4, 5, 6, 8, 10, 12.

Breakpoints

Size utilities can be limited to specific Media Query breakpoints.

u-pushXofY - Targets all viewport sizes from 0 up. u-sm-pushXofY - To use at the small Media Query breakpoint and up. u-md-pushXofY - To use at the medium Media Query breakpoint and up. u-lg-pushXofY - To use at the large Media Query breakpoint and up.

u-size2of8

u-size2of8
u-sm-push1of8
u-md-push2of8
u-lg-push4of8 

<div class="o-grid">
  <div class="o-grid-cell  u-size2of8">
    <p class="u-bgGrayLight  u-p4">
      u-size2of8
    </p>
  </div>
  <div class="o-grid-cell  u-size2of8  u-sm-push1of8  u-md-push2of8  u-lg-push4of8">
    <p class="u-bgGrayLight  u-p4">
      u-size2of8  <br>
      u-sm-push1of8  <br>
      u-md-push2of8  <br>
      u-lg-push4of8
    </p>
  </div>
</div>