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
These classes will make elements be handled as if they were block, inline-block, or inline elements.
<a href="#" class="block">
Inline elements displayed
</a>
<a href="#" class="block">
as a block elements
</a>
<div class="inline-block">
Block elements displayed
</div>
<div class="inline-block">
as inline-block elements
</div>
<div class="inline">
Block elements displayed
</div>
<div class="inline">
as inline elements
</div>
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.
(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.
<span class="fa fa-smile-o fa-4x align-top"></span> Smiley face is aligned "top"
<span class="fa fa-smile-o fa-4x align-middle"></span> Smiley face is aligned "middle"
<span class="fa fa-smile-o fa-4x align-baseline"></span> Smiley face is aligned "baseline"
<span class="fa fa-smile-o fa-4x align-bottom"></span> Smiley face is aligned "bottom"
For table cells, it will vertically align the content of the cell.
<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
<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.
(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>
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.
<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>
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-.
(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>
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.
<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 buttonThis 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.
Overflow
<div class="overflow-hidden" style="width:100px;height:100px;">
<img src="../img/smiley_340x213.jpg" alt="Smiley Face" />
</div>
