Layout

Layout Utilities

Utilities for layout.

HTML

<style>
.test-Box {
    background: #649632;
    height: 100px;
    width: 100px;
}
.test-Highlight {
    background: #ff0;
}
</style>

Layout Utilities - clearfix

Contains & clears floats

HTML

<div class="u-cf">
  <div class="test-Box" style="float:left"></div>
  <div class="test-Box" style="float:left; margin-left:10px"></div>
</div>

Layout Utilities - floats left

Floats left

HTML

<div class="u-cf">
  <div class="test-Box u-floatLeft"></div>
</div>

Layout Utilities - floats right

Floats right

HTML

<div class="u-cf">
  <div class="test-Box u-floatRight"></div>
</div>

Layout Utilities - New Block Context

Create s a new block formatting context. This will clip overflow.

The text should not wrap under the float.

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.

HTML

<div class="test-Highlight" style="width:300px;">
  <div class="test-Box u-floatLeft"></div>
  <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>
</div>

Layout Utilities - New Block Context

Create s a new block formatting context. Useful when overflow must not be clipped.

The text should not wrap under the float.

HTML

<div class="test-Highlight" style="width:300px;">
  <div class="test-Box u-floatLeft"></div>
  <div class="u-nbfcAlt">
    <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>
</div>