⬅

Size

Size Utilities

The size utility classes apply various percentage based widths to elements. They can be used on almost anything, but they’re primarily used within the grid system, along side the o-grid-cell class. Keep in mind that all grid cells start out stacked, up until the first breakpoint of 360px.

The size utitlities are all based on flexbox. See this CSS-Tricks article for a deeper look at flexbox.

Available Classes

Class Name Responsive Class Description
u-sizeFit u-[sm|md|lg]-sizeFit Make an element shrink wrap its content.
u-sizeFull u-[sm|md|lg]-sizeFull Make an element span 100% width of it's parent.
u-sizeFill u-[sm|md|lg]-sizeFill Make an element fill the remaining space.
u-sizeFillAlt u-[sm|md|lg]-sizeFillAlt Distributes space based on the initial width and height of the element.
u-sizeXofY u-[sm|md|lg]-sizeXofY Specify the proportional width of 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.

Usage on grid cells

The following example applies sizing utilities to the o-grid-cell’s within the grid system.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<!-- 2 column grid -->
<div class="o-grid">
  <div class="o-grid-cell  u-size1of2">
    <p class="u-bgGrayLight">&nbsp;</p>
  </div>

  <div class="o-grid-cell  u-size1of2">
    <p class="u-bgGrayLight">&nbsp;</p>
  </div>
</div>

<!-- 3 column grid -->
<div class="o-grid">
  <div class="o-grid-cell  u-size1of3">
    <p class="u-bgGrayLight">&nbsp;</p>
  </div>

  <div class="o-grid-cell  u-size1of3">
    <p class="u-bgGrayLight">&nbsp;</p>
  </div>

  <div class="o-grid-cell  u-size1of3">
    <p class="u-bgGrayLight">&nbsp;</p>
  </div>
</div>

<!-- 4 column grid -->
<div class="o-grid">
  <div class="o-grid-cell  u-size1of4">
    <p class="u-bgGrayLight">&nbsp;</p>
  </div>

  <div class="o-grid-cell  u-size1of4">
    <p class="u-bgGrayLight">&nbsp;</p>
  </div>

  <div class="o-grid-cell  u-size1of4">
    <p class="u-bgGrayLight">&nbsp;</p>
  </div>

  <div class="o-grid-cell  u-size1of4">
    <p class="u-bgGrayLight">&nbsp;</p>
  </div>
</div>

<!-- 5 column grid -->
<div class="o-grid">
  <div class="o-grid-cell  u-size1of5">
    <p class="u-bgGrayLight">&nbsp;</p>
  </div>

  <div class="o-grid-cell  u-size1of5">
    <p class="u-bgGrayLight">&nbsp;</p>
  </div>

  <div class="o-grid-cell  u-size1of5">
    <p class="u-bgGrayLight">&nbsp;</p>
  </div>

  <div class="o-grid-cell  u-size1of5">
    <p class="u-bgGrayLight">&nbsp;</p>
  </div>

  <div class="o-grid-cell  u-size1of5">
    <p class="u-bgGrayLight">&nbsp;</p>
  </div>
</div>

<!-- 6 column grid -->
<div class="o-grid">
  <div class="o-grid-cell  u-size2of6">
    <p class="u-bgGrayLight">&nbsp;</p>
  </div>

  <div class="o-grid-cell  u-size2of6">
    <p class="u-bgGrayLight">&nbsp;</p>
  </div>

  <div class="o-grid-cell  u-size2of6">
    <p class="u-bgGrayLight">&nbsp;</p>
  </div>
</div>

<!-- 8 column grid -->
<div class="o-grid">
  <div class="o-grid-cell  u-size2of8">
    <p class="u-bgGrayLight">&nbsp;</p>
  </div>

  <div class="o-grid-cell  u-size2of8">
    <p class="u-bgGrayLight">&nbsp;</p>
  </div>

  <div class="o-grid-cell  u-size4of8">
    <p class="u-bgGrayLight">&nbsp;</p>
  </div>
</div>

<!-- 10 column grid -->
<div class="o-grid">
  <div class="o-grid-cell  u-size2of10">
    <p class="u-bgGrayLight">&nbsp;</p>
  </div>

  <div class="o-grid-cell  u-size2of10">
    <p class="u-bgGrayLight">&nbsp;</p>
  </div>

  <div class="o-grid-cell  u-size2of10">
    <p class="u-bgGrayLight">&nbsp;</p>
  </div>

  <div class="o-grid-cell  u-size2of10">
    <p class="u-bgGrayLight">&nbsp;</p>
  </div>

  <div class="o-grid-cell  u-size2of10">
    <p class="u-bgGrayLight">&nbsp;</p>
  </div>
</div>

<!-- 12 column grid -->
<div class="o-grid">
  <div class="o-grid-cell  u-size4of12">
    <p class="u-bgGrayLight">&nbsp;</p>
  </div>

  <div class="o-grid-cell  u-size4of12">
    <p class="u-bgGrayLight">&nbsp;</p>
  </div>

  <div class="o-grid-cell  u-size4of12">
    <p class="u-bgGrayLight">&nbsp;</p>
  </div>
</div>

Usage on Misc Items

Sizing utilities can also be used on other elements. The following example applies sizing utilities to o-box elemnts.

I'm a box object!
I'm a box object! 
<div class="u-clearfix">
  <div class="o-box  u-bgGrayLight  u-floatLeft  u-mr4  u-size6of12">
    I'm a box object!
  </div>
  <div class="o-box  u-bgGrayLight  u-floatLeft  u-mr4  u-size4of12">
    I'm a box object!
  </div>
</div>

Breakpoints

Size utilities can be limited to specific Media Query breakpoints.

  • u-sizeXofY - Targets all viewport sizes from 0 up.
  • u-sm-sizeXofY - Targets the small breakpoint and up.
  • u-md-sizeXofY - Targets the medium breakpoint and up.
  • u-lg-sizeXofY - Targets the large breakpoint and up.

u-sm-size2of4
u-md-size2of8
u-lg-size8of12

u-sm-size2of4
u-md-size6of8
u-lg-size4of12 

<div class="o-grid">
  <div class="o-grid-cell  u-sm-size2of4  u-md-size2of8  u-lg-size8of12">
    <p class="u-bgGrayLight  u-p4">
      u-sm-size2of4  <br>
      u-md-size2of8  <br>
      u-lg-size8of12
    </p>
  </div>
  <div class="o-grid-cell  u-sm-size2of4  u-md-size6of8  u-lg-size4of12">
    <p class="u-bgGrayLight  u-p4">
      u-sm-size2of4  <br>
      u-md-size6of8  <br>
      u-lg-size4of12
    </p>
  </div>
</div>

Gridception

Grids can also be nested in grid cells, causing gridception!

 
 
 
 
 
 
 
<div class="o-grid  o-grid--alignMiddle">
  <div class="o-grid-cell  u-size6of12  u-bgGrayLight">
    <!-- Nested Grid -->
    <div class="o-grid">
      <div class="o-grid-cell  u-size6of12"> <div class="u-bgGray  u-my3">&nbsp;</div> </div>
      <div class="o-grid-cell  u-size6of12"> <div class="u-bgGray  u-my3">&nbsp;</div> </div>
      <div class="o-grid-cell  u-size6of12"> <div class="u-bgGray  u-my3">&nbsp;</div> </div>
      <div class="o-grid-cell  u-size6of12"> <div class="u-bgGray  u-my3">&nbsp;</div> </div>
    </div>
    <!-- End: Nested Grid -->
  </div>

  <div class="o-grid-cell  u-size6of12  u-bgGrayLight">
    <!-- Nested Grid -->
    <div class="o-grid">
      <div class="o-grid-cell  u-size4of12"> <div class="u-bgGray  u-my3">&nbsp;</div> </div>
      <div class="o-grid-cell  u-size4of12"> <div class="u-bgGray  u-my3">&nbsp;</div> </div>
      <div class="o-grid-cell  u-size4of12"> <div class="u-bgGray  u-my3">&nbsp;</div> </div>
    </div>
    <!-- End: Nested Grid -->
  </div>
</div>