@moodxd/utility-size v1.0.3

MoO Utility Size

sizeFit & sizeFill

Container-type elements can be set to change size depending on their contents. This can also affect other container widths as they will flex in response. In order to set this up, apply the .u-sizeFit class to the container that will have the set width. This width will be determined by the .u-sizeFit element’s children, which should have set widths (such as images or icons). Apply .u-sizeFill to the other element which will flex its width accordingly. Please note that .u-sizeFit will float its content to the left side of the layout.

<div class="u-cf">
  <div class="u-sizeFit">
    <div class="u-bgRedLighter" style="height:50px;width:50px;"></div>
  </div>
  <div class="u-sizeFill u-bgYellowLighter">
    Content
  </div>
</div>

sizeFit & sizeFill Alt

The alternative version of sizeFit works the same, with the exception that the element will instead float to the right side of the layout. Please note that the class name changes to .u-sizeFitAlt as well.

<div class="u-cf">
  <div class="u-sizeFitAlt">
    <div class="u-bgRedLighter" style="height:50px;width:50px;"></div>
  </div>
  <div class="u-sizeFill u-bgYellowLighter">
    Content
  </div>
</div>

sizeFull

Elements that utilize the .u-sizeFull class will span across the entire available width allowed by its parent element, and will not be affected by any other sibling layout element.

<div class="u-cf">
  <div class="u-sizeFull u-bgYellowLighter">
    Full
  </div>
</div>

sizeFullHeight

The class .u-sizeFullHeight works similarly to sizeFull, with the added effect of the element spanning vertically across the entire available layout as well.

<div class="u-cf" style="height: 300px;">
  <div class="u-sizeFull u-sizeFullHeight u-bgYellowLighter">
    Full Height
  </div>
</div>

sizeXof2

Utilizing the class .u-size[X]of2, where X is replaced by an integer less than or equal to two (typically, 1 is the only utilized value in this case), will size the element amongst a two-column layout accordingly. For example, a class of .u-size1of2 will size the element as if it were one column out of a two-column layout (i.e. 50% width).

<div class="u-cf">
  <div class="u-size1of2 u-bgYellowLighter">
    1of2
  </div>
</div>

sizeXof3

Utilizing the class .u-size[X]of3, where X is replaced by an integer less than or equal to three, will size the element amongst a three-column layout accordingly. For example, a class of .u-size2of3 will size the element as if it were two columns-wide out of a three-column layout (i.e. ~66% width).

<div class="u-cf">
  <div class="u-size1of3 u-bgYellowLighter">1of3</div>
  <div class="u-size2of3 u-bgYellowLighter">2of3</div>
</div>

sizeXof4

Utilizing the class .u-size[X]of4, where X is replaced by an integer less than or equal to four, will size the element amongst a four-column layout accordingly. For example, a class of .u-size3of4 will size the element as if it were three columns-wide out of a four-column layout (i.e. 75% width).

<div class="u-cf">
  <div class="u-size1of4 u-bgYellowLighter">1of4</div>
  <div class="u-size2of4 u-bgYellowLighter">2of4</div>
  <div class="u-size3of4 u-bgYellowLighter">3of4</div>
</div>

sizeXof6

Utilizing the class .u-size[X]of6, where X is replaced by an integer less than or equal to six, will size the element amongst a six-column layout accordingly. For example, a class of .u-size4of6 will size the element as if it were four columns-wide out of a six-column layout (i.e. ~66% width).

<div class="u-cf">
  <div class="u-size1of6 u-bgYellowLighter">1of6</div>
  <div class="u-size2of6 u-bgYellowLighter">2of6</div>
  <div class="u-size3of6 u-bgYellowLighter">3of6</div>
  <div class="u-size4of6 u-bgYellowLighter">4of6</div>
  <div class="u-size5of6 u-bgYellowLighter">5of6</div>
</div>

sizeXof8

Utilizing the class .u-size[X]of8, where X is replaced by an integer less than or equal to eight, will size the element amongst a eight-column layout accordingly. For example, a class of .u-size3of8 will size the element as if it were three columns-wide out of an eight-column layout (i.e. 38.5% width).

<div class="u-cf">  
  <div class="u-size1of8 u-bgYellowLighter">1of8</div>
  <div class="u-size2of8 u-bgYellowLighter">2of8</div>
  <div class="u-size3of8 u-bgYellowLighter">3of8</div>
  <div class="u-size4of8 u-bgYellowLighter">4of8</div>
  <div class="u-size5of8 u-bgYellowLighter">5of8</div>
  <div class="u-size6of8 u-bgYellowLighter">6of8</div>
  <div class="u-size7of8 u-bgYellowLighter">7of8</div>
</div>

sizeXof10

Utilizing the class .u-size[X]of10, where X is replaced by an integer less than or equal to ten, will size the element amongst a ten-column layout accordingly. For example, a class of .u-size4of10 will size the element as if it were four columns-wide out of a ten-column layout (i.e. 40% width).

<div class="u-cf">
  <div class="u-size1of10 u-bgYellowLighter">1of10</div>
  <div class="u-size2of10 u-bgYellowLighter">2of10</div>
  <div class="u-size3of10 u-bgYellowLighter">3of10</div>
  <div class="u-size4of10 u-bgYellowLighter">4of10</div>
  <div class="u-size5of10 u-bgYellowLighter">5of10</div>
  <div class="u-size6of10 u-bgYellowLighter">6of10</div>
  <div class="u-size7of10 u-bgYellowLighter">7of10</div>
  <div class="u-size8of10 u-bgYellowLighter">8of10</div>
  <div class="u-size9of10 u-bgYellowLighter">9of10</div>
</div>

sizeXof12

Utilizing the class .u-size[X]of12, where X is replaced by an integer less than or equal to twelve, will size the element amongst a twelve-column layout accordingly. For example, a class of .u-size3of12 will size the element as if it were three columns-wide out of a twelve-column layout (i.e. 25% width).

<div class="u-cf">
  <div class="u-size1of12 u-bgYellowLighter">1of12</div>
  <div class="u-size2of12 u-bgYellowLighter">2of12</div>
  <div class="u-size3of12 u-bgYellowLighter">3of12</div>
  <div class="u-size4of12 u-bgYellowLighter">4of12</div>
  <div class="u-size5of12 u-bgYellowLighter">5of12</div>
  <div class="u-size6of12 u-bgYellowLighter">6of12</div>
  <div class="u-size7of12 u-bgYellowLighter">7of12</div>
  <div class="u-size8of12 u-bgYellowLighter">8of12</div>
  <div class="u-size9of12 u-bgYellowLighter">9of12</div>
  <div class="u-size10of12 u-bgYellowLighter">10of12</div>
  <div class="u-size11of12 u-bgYellowLighter">11of12</div>
</div>

Responsive

Multiple classes can be applied to a single container element which will mandate how it appears in a responsive layout. There are three different classes that can be set which represent a width-specific breakpoint: .u-sm-size[X]of[Y] for small layouts, .u-md-size[X]of[Y] for medium layouts, and .u-lg-size[X]of[Y] for large layouts. These classes follow the same construct as the other Size classes, where X is a number of columns within a Y-column layout.

<div class="u-size12of12 u-sm-size9of12 u-md-size6of12 u-lg-size3of12 u-bgYellowLighter">12of12 -&gt; 9of12 -&gt; 6of12 -&gt; 3of12</div>