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
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.
(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.
<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.
<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"
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.
<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.
<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>
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.
<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
.
<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>
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.
<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>
<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>
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.
<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>
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.
<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>
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-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 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>
![Smiley Face](../img/smiley_340x213.jpg)