@moodxd/utility-layout v1.0.3

MoO Utility Layout

Alignment

Align: Baseline

The alignment classes set the alignment elements. There are four alignment options: baseline, bottom, middle and top. The alignment classes will only work on inline-block or on a table row element.

Hello <span class="u-alignBaseline u-bgRedLighter u-inlineBlock" style="height:20px;width: 20px"></span>

Align: Bottom

<div>
  Hello <span class="u-alignBottom u-bgRedLighter u-inlineBlock" style="height:20px;width: 20px"></span>
</div>

Align: Middle

<div>
  Hello <span class="u-alignMiddle u-bgRedLighter u-inlineBlock" style="height:20px;width: 20px"></span>
</div>

Align: Top

<div>
  Hello <span class="u-alignTop u-bgRedLighter u-inlineBlock" style="height:20px;width: 20px"></span>
</div>

Display

There seven different display properties: block, hidden, visually hidden, inline, inline block, table and table cell. The name of the classes corresponds with the CSS display property. For example, u-block sets an element display: block.

The difference between hidden and visually hidden is subtle but important.

• u-hidden sets it’s assigned element to display: none
• u-hiddenVisually hides the element visually but still allows it to be read by screen readers

Multiple display classes can be applied to a single container element, which can change the element’s display at different breakpoints. There are three different classes that can be set to represent a width-specific breakpoint: -sm, -md and –lg. For example, if an element had u-hidden u-md-inline u-lg-block classes, the element would be display: hidden at the small breakpoint. It would become display: inlineat the medium breakpoint, and then display: block at the large breakpoint.

Display: Block

<span class="u-block">
  I should be block
</span>

Display: Hidden

<span class="u-hidden">
  I should be hidden
</span>

Display: Visually Hidden

Available to screen readers

<span class="u-hiddenVisually">
  I should be visible only to screenreaders
</span>

Display: Inline

<span class="u-inline">
  I should be inline
</span>

Display: Inline Block

<span class="u-inlineBlock">
  I should be inline block
</span>

Display: Table and Table Cell

<span class="u-table">
  <span class="u-tableCell">I shoud be table cell</span>
</span>

Display: Responsive

There are three standard breakpoint prefixes to account for smartphone, tablet and desktop size devices. The sizes include:

• Small (-sm), which has a min-width of 535px
• Medium (-md), which has a min-width of 767px
• Large (-lg), which has a min-width of 981px

These prefixes can be used with Block, Size, Order, Float, Push, Pull, Margin, Padding and Text Align classes.

<span class="u-hidden u-md-block">I should be hidden until the 'medium' breakpont</span>
<span class="u-lg-hiddenVisually">I should be visible only to screenreaders at the 'large' breakpoint</span>

Misc.

Clearfix

u-cf forces content after floated elements or a container containing floated elements to render below it. The float property allows side-by-side block-level elements but they do not take the shape of the container. Using u-cf will make the content or the container “wrap” around the floated elements

<div class="u-cf u-bgYellowLighter">
  <div class="u-bgRedLighter" style="float:left;height:20px;width:20px;"></div>
  <div class="u-bgRedLighter" style="float:left; margin-left:10px; height:20px; width:20px;"></div>
</div>

New Block Formatting Context

u-nbfc fixes the wrapping issue that occurs when a none floated element follows a floated element. Inside of wrapping around the floated element the u-nbfc clears the none floated element and inherits a fluid width based on the width set on the floated element.

<span class="u-floatLeft">Floating</span>
<div class="u-nbfc">
  <p>The text should not wrap under the float.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut tincidunt nulla. Suspendisse semper, nisl vitae ultricies vulputate, metus tortor tincidunt neque, sed feugiat lacus ipsum eu neque. Mauris pharetra facilisis turpis, ac lacinia justo fermentum vel. Maecenas sed semper nisi. Integer sed erat nec sem mattis dignissim.</p>
</div>

Floats

The floats classes set the float property to left (u-floatLeft) or right (u-floatRight).

<span class="u-floatLeft">Float Left</span>
<span class="u-floatRight">Float Right</span>

Positioning

The position classes set the position property to be:

• u-posAbsolute: Absolutely position an element.
• u-posAbsoluteCenter: Absolutely position and center an element (requires explicit height).
• u-posFixed: Fixed position an element.
• u-posRelative: Relatively position an element.
• u-posStatic: Static position an element.

Rounded

The u-rounded classes add a 3px rounded (the design guide standard for rounded corners) border style to an element.

<div class="u-bgRedLighter u-rounded" style="height:100px;width:100px;"></div>

Opacity

Using u-opacity[0-9] changes the opacity of the element to which the class is assigned. Opacity can be changed in 10% increments where u-opacity0 has 0% opacity and is invisible to the eye.

<p class="u-opacity0 u-bgYellowLighter">0%</p>
<p class="u-opacity1 u-bgYellowLighter">10%</p>
<p class="u-opacity2 u-bgYellowLighter">20%</p>
<p class="u-opacity3 u-bgYellowLighter">30%</p>
<p class="u-opacity4 u-bgYellowLighter">40%</p>
<p class="u-opacity5 u-bgYellowLighter">50%</p>
<p class="u-opacity6 u-bgYellowLighter">60%</p>
<p class="u-opacity7 u-bgYellowLighter">70%</p>
<p class="u-opacity8 u-bgYellowLighter">80%</p>
<p class="u-opacity9 u-bgYellowLighter">90%</p>