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
Alignment – Vertical
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

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="align-left">
    <span class="fa fa-smile-o fa-2x"></span>
</div>

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

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

Alignment – Vertical

You can vertically align elements with these classes. Usage will differ depending on the element you use them on.

For inline elements (including inline-block), it will vertically align the element with its sibling inline elements.

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"

For table cells, it will vertically align the content of the cell.

Vertically aligned table content

<table>
  <tbody>
    <tr>
      <th class="one-half align-middle">
        This table cell is aligned "middle".
      </th>
      <th 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.
      </th>
    </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.

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
(Background colors added for demonstrational purposes)

<div class="one-third float-left">
    This element floats,
</div>
<div class="one-third float-left">
    as does this element,
</div>
<div class="one-third float-left clear-left">
    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.

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

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-orange 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.