Size Utilities

Utilities for size.

HTML

<style>
  .u-cf:after {
    clear: both;
    content:"";
    display: table;
  }
  .Test-highlight {
    background: #ff0;
    margin: 0 0 10px;
  }
  .Test-box {
    background: #649632;
    height: 25px;
    margin-bottom: 10px;
  }
  .Test-box--square {
    height: 50px;
    width: 50px;
  }
</style>

Explicit Sizes

Utilities for sizing and element to an explicit size.

1of2

1of3

2of3

1of4

2of4

3of4

1of6

2of6

3of6

4of6

5of6

1of8

2of8

3of8

4of8

5of8

6of8

7of8

1of10

2of10

3of10

4of10

5of10

6of10

7of10

8of10

9of10

1of12

2of12

3of12

4of12

5of12

6of12

7of12

8of12

9of12

10of12

11of12

HTML

<div>
  <div class="u-size1of2 Test-box">1of2</div>
</div>
<div>
  <div class="u-size1of3 Test-box">1of3</div>
  <div class="u-size2of3 Test-box">2of3</div>
</div>
<div>
  <div class="u-size1of4 Test-box">1of4</div>
  <div class="u-size2of4 Test-box">2of4</div>
  <div class="u-size3of4 Test-box">3of4</div>
</div>
<div>
  <div class="u-size1of6 Test-box">1of6</div>
  <div class="u-size2of6 Test-box">2of6</div>
  <div class="u-size3of6 Test-box">3of6</div>
  <div class="u-size4of6 Test-box">4of6</div>
  <div class="u-size5of6 Test-box">5of6</div>
</div>
<div>
  <div class="u-size1of8 Test-box">1of8</div>
  <div class="u-size2of8 Test-box">2of8</div>
  <div class="u-size3of8 Test-box">3of8</div>
  <div class="u-size4of8 Test-box">4of8</div>
  <div class="u-size5of8 Test-box">5of8</div>
  <div class="u-size6of8 Test-box">6of8</div>
  <div class="u-size7of8 Test-box">7of8</div>
</div>
<div>
  <div class="u-size1of10 Test-box">1of10</div>
  <div class="u-size2of10 Test-box">2of10</div>
  <div class="u-size3of10 Test-box">3of10</div>
  <div class="u-size4of10 Test-box">4of10</div>
  <div class="u-size5of10 Test-box">5of10</div>
  <div class="u-size6of10 Test-box">6of10</div>
  <div class="u-size7of10 Test-box">7of10</div>
  <div class="u-size8of10 Test-box">8of10</div>
  <div class="u-size9of10 Test-box">9of10</div>
</div>
<div>
  <div class="u-size1of12 Test-box">1of12</div>
  <div class="u-size2of12 Test-box">2of12</div>
  <div class="u-size3of12 Test-box">3of12</div>
  <div class="u-size4of12 Test-box">4of12</div>
  <div class="u-size5of12 Test-box">5of12</div>
  <div class="u-size6of12 Test-box">6of12</div>
  <div class="u-size7of12 Test-box">7of12</div>
  <div class="u-size8of12 Test-box">8of12</div>
  <div class="u-size9of12 Test-box">9of12</div>
  <div class="u-size10of12 Test-box">10of12</div>
  <div class="u-size11of12 Test-box">11of12</div>
</div>

Size with Media Query breakpoints.

Size utilities can be limited to specific Media Query breakpoints. Often used in combination for different sizes at breakpoints.

1of3 above lap breakpoint

1of4 above desk breakpoint

Smaller sizes at larger widths.

HTML

<div>
  <div class="u-lap-size1of3 Test-box">1of3 above lap breakpoint</div>
  <div class="u-desk-size1of4 Test-box">1of4 above desk breakpoint</div>
  <div class="u-size-1of2 u-desk-size1of3 u-desk-wide-size1of4 Test-box">Smaller sizes at larger widths.</div>
</div>

Size Fit / Size Fill

Shrink-wraps (on left) / fills remaining space.

content

HTML

<div class="u-cf">
  <div class="u-sizeFit">
    <div class="Test-box Test-box--square"></div>
  </div>
  <div class="u-sizeFill Test-highlight">
    content
  </div>
</div>

Size Fit / Size Fill (Alternate)

Shrink-wraps (on left) / fills remaining space.

content

HTML

<div class="u-cf">
  <div class="u-sizeFit">
    <div class="Test-box Test-box--square"></div>
  </div>
  <div class="u-sizeFillAlt Test-highlight">
    content
  </div>
</div>

Size Fit (Alternate) / Size Fill

Shrink-wraps (on right) / fills remaining space.

content

HTML

<div class="u-cf">
  <div class="u-sizeFitAlt">
    <div class="Test-box Test-box--square"></div>
  </div>
  <div class="u-sizeFill Test-highlight">
    content
  </div>
</div>

Size Full

Fits the full width of its container

content

HTML

<div class="u-cf">
  <div class="u-sizeFull Test-highlight">
    content
  </div>
</div>