Positioning

Depending on the type of element you are styling, you can apply different types of positioning to them.

Some of the examples shown below have some abstract implications. If you are unfamiliar with the more intricate points of CSS, feel free to ask your friendly resident front-end developer for advice. Just be sure to bring chocolate.

Display Modes
Alignment – Horizontal
1. Inline Content
2. Block Content
Alignment – Vertical
Floats
1. Clearing Floats
2. Containing Floats
Hiding Elements
Miscellaneous

Display Modes

These classes will make elements be handled as if they were block, inline-block, or inline elements.

Elements with non-default box types

<a href="#" class="block">
    Inline elements displayed
</a>
<a href="#" class="block">
    as a block elements
</a>

Inline elements displayed as a block elements

<div class="inline-block">
    Block elements displayed
</div>
<div class="inline-block">
    as inline-block elements
</div>

Block elements displayed

as inline-block elements

<div class="inline">
    Block elements displayed
</div>
<div class="inline">
    as inline elements
</div>

Block elements displayed

as inline elements

Alignment – Horizontal

Inline Content

These classes go on the parent container of the elements you want to align. You can align any inline content, such as text, images, block elements displayed as inline-block, etc.

Horizontally aligned elements
(Parent borders and padding added for demonstrational purposes)

<div class="border align-left">
    <span class="fa fa-smile-o fa-2x"></span>
</div>

<div class="border align-center">
    <span class="fa fa-smile-o fa-2x"></span>
</div>

<div class="border align-right">
    <span class="fa fa-smile-o fa-2x"></span>
</div>

Block Content

To center a block element within its parent container, apply the horizontal-center class to it.

Note that the element to be centered needs to have an explicit width for this to work.

Horizontally aligned elements

<div class="border">
    <div class="horizontal-center one-half demo-box-1" style="height: 2em;"></div>
</div>

Alignment – Vertical

There are two types of vertical alignment, one where two sibling elements are aligned related to each other, and one where a child is vertically aligned within its parent.

Vertically Aligned Siblings

To align two inline (or inline-block) elements, apply one the following classes to the element which should act as reference point.

Vertically aligned inline elements

<span class="fa fa-smile-o fa-4x align-top"></span>
Smiley face is aligned "top"

Smiley face is aligned "top"

<span class="fa fa-smile-o fa-4x align-middle"></span>
Smiley face is aligned "middle"

Smiley face is aligned "middle"

<span class="fa fa-smile-o fa-4x align-baseline"></span>
Smiley face is aligned "baseline"

Smiley face is aligned "baseline"

<span class="fa fa-smile-o fa-4x align-bottom"></span>
Smiley face is aligned "bottom"

Smiley face is aligned "bottom"

Vertically Aligned Children – Tables

For table cells (<th>/<td>, or any element with the display: table-cell CSS property), apply the align-top, align-middle, or align-bottom class to the cell to align its content.

Vertically aligned table content

<table>
  <tbody>
    <tr>
      <td class="one-half align-middle">
        This table cell is aligned "middle".
      </td>
      <td class="one-half">
        This is non-aligned text that is really
        just here to make one table cell larger
        than the other so you can see the
        effect on the other side.
      </td>
    </tr>
  </tbody>
</table>

This table cell is aligned "middle".

This is non-aligned text that is really just here to make one table cell larger than the other so you can see the effect on the other side.

Vertically Aligned Children – Centered Elements

If you need to center an element, you can also use the vertical-center helper. It will turn your element into an inline-block element and center it alongside a blank dummy element.

This is especially useful if you need to center an element whose height you don't know, e.g. because it is user-generated, or its content differs depending on the state of your page.

You can apply a specific height to your vertical-center-container. If no height is specified, it will be 100% of its parent height.

Please note that due to how browsers render inline elements, this will work only when the width of the centered element leaves enough space on the right for a space character.

Vertically centered content

<div class="vertical-center-container" style="height: 200px;">
    <span class="vertical-center four-fifths">
        This element will always be centered vertically
        within its parent container, no matter how many
        lines it has. You can resize the browser window
        to see it in effect.
    </span>
</div>

This element will always be centered vertically within its parent container, no matter how many lines it has. You can resize the browser window to see it in effect.

Floats

If you want to make your elements float, you can use the classes float-left and float-right

To reset an existing float state of an element, you can use the float-none class.

Floating elements

<div class="float-left">
    <span class="fa fa-smile-o fa-4x align-bottom"></span>
</div>
<p>
    Some text that should start next to the
    floating element and wrap around it,
    rather than start on the next line as it
    would normally.
</p>

Some text that should start next to the floating element and wrap around it, rather than start on the next line as it would normally.

Clearing Floats

You can clear floating elements on either side using the classes clear-left, clear-right or clear-both.

Cleared floating elements

<div class="float-left one-third demo-box-1">
    This element floats,
</div>
<div class="float-left one-third demo-box-2">
    as does this element,
</div>
<div class="float-left clear-left one-third demo-box-3">
    and this, except this one is cleared toward
    the left.
</div>

This element floats,

as does this element,

and this, except this one is cleared toward the left.

Containing Floats

Since floating elements are outside of the normal element flow, they may sometimes not be properly contained by their parent element.

To force an element to contain all of its floating descendants, use the clearfix class.

Containing floating elements

<div class="demo-box-1 padding">
    <div class="float-left margin-horizontal one-third demo-box-2">
        Improperly contained
    </div>
    <div class="float-left margin-horizontal one-third demo-box-3">
        floating elements
    </div>
</div>

Improperly contained

floating elements

<div class="demo-box-1 padding clearfix">
    <div class="float-left margin-horizontal one-third demo-box-2">
        Properly contained
    </div>
    <div class="float-left margin-horizontal one-third demo-box-3">
        floating elements
    </div>
</div>

Properly contained

floating elements

Note: You can also clear elements toward the top by applying the clearfix-before class.

Hiding Elements

You can hide elements from the document to hide content that is currently unavailable or unimportant, to spare the user content that is not meant for human readers, to adjust your layout, etc.

The hide class will (visually) remove the element from the document and make the rest of the document flow as it if weren't there.

Hidden elements

<div>
    <span class="fa fa-smile-o fa-4x"></span>
    You can see me
</div>
<div class="hide">
    <span class="fa fa-smile-o fa-4x"></span>
    But not me
</div>
<div>
    <span class="fa fa-smile-o fa-4x"></span>
    And you can see me
</div>

You can see me

And you can see me

Hiding Elements from Specific States

Since this is a very useful tool to improve the user experience for different devices, you can also hide elements based on the state that the user is in.

To make an element disappear from specific states, add one or more of the usual state prefixes palm-, lap- or desk-.

Partially hidden elements
(Resize browser window to see them in action.)

<div class="palm-hide">
    <span class="fa fa-smile-o fa-4x"></span>
    You can see me anywhere but on palm-sized
    devices
</div>
<div class="desk-hide">
    <span class="fa fa-smile-o fa-4x"></span>
    You can see me anywhere but on desk-top
    devices
</div>
<div class="lap-hide desk-hide">
    <span class="fa fa-smile-o fa-4x"></span>
    You can see me only on palm-sized devices
</div>

You can see me anywhere but on palm-sized devices

You can see me anywhere but on desk-top devices

You can see me only on palm-sized devices

Sometimes, you may want to hide elements only when the page is being printed, such as images or interactive elements.

To make an element disappear only while printing, use the print-hide class.

Element hidden from printers (Check the browser's print preview to see how it works.)

<div class="form print-hide">
    This whole block will be excluded from a printed page.
    <input class="input-text three-fifths" value="Fancy interactive" />
    <button class="button one-fifth">Stuff</button>
</div>

This whole block will be excluded from a printed page.

Temporarily Invisible Elements

Sometimes, you may want to temporarily hide an inactive part of the interface, but keep a blank area in its place to maintain the page layout. For such cases, you can use the invisible class.

Invisible elements

<p>
    There is some text here asking you to do
    something to show the following button.
</p>
<a href="#" class="button-primary invisible">
    Temporarily invisible button
</a>
<p>
    This is some more text that should not
    move around no matter if the previous
    element is shown or not.
</p>

There is some text here asking you to do something to show the following button.

Temporarily invisible button

This is some more text that should not move around no matter if the previous element is shown or not.

Miscellaneous

This section covers styling methods that are either self-explanatory, or so specific that explaining them in detail should not be part of this documentation.

Examples in this section will offer no further explanation – please refer to your colleagues in front-end development should you have any questions.

Basics

Building Blocks

Page Frame

Modules and Components

Additional Information

Styleguide