CSS Objects
Type Objects
Pigeon exposes a number of objects to help with laying out type. These objects are all extended by the default type styles to offer a more consistent way of laying out type.
Space
The space object is used to add typographic margins to
an element. This allows you to make non-type elements to sit nicely
in the flow of the page.
<div class="space">
This text is spaced as if it were inside a paragraph.
</div>
The space-above object works in the same way, except
that it adds spacing above rather than below. This gives you more
control over typographic spacing.
<p class="space-above">
This text has space above it as well as below.
</p>
Both the space and space-above objects can
be suffixed with -more or -less to double
or halve the spacing added.
<p class="space-more space-above-more">
This text has double spacing above and below.
</p>
<p class="space-less space-above-less">
This text has half spacing above and below.
</p>This object is automatically applied to key typographic elements such as paragraphs – you only need to add it to elements which do not normally sit in the flow of type. See the source code for core typography for the elements this applies to.
Cramp
The cramp object is used to remove typographic spacing
from an element. This allows you to easily override default type
margins for paragraphs, for example.
<p class="cramp">
This text has no space around it.
</p>Typearea
The typearea object is used to pad a container,
optimizing typographic spacing for the elements it contains. This
allows you to avoid using the space-above object when
working with large blocks of text.
<div class="typearea">
<p>The containing div is padded…</p>
<p>…which means type inside flows nicely.</p>
</div>Indent
The indent object is used to indent an element in a way
which scales appropriately as text is resized.
<p class="indent">
This text is indented.
</p>
The indent object can be suffixed with -more
to double the indentation.
<p class="indent-more">
This text is double-indented.
</p>This object is automatically applied to quotes and lists, so you'll only need to add it manually to elements which are not normally indented.
H1–H6
The h1–h6 objects are used to apply heading styles to
non-heading elements, or to disguise different heading levels to
CSS-enabled browsers.
<h3 class="h1">
This h3 looks like a h1.
</h3>Smallprint
The smallprint object is used to decrease the font-size
of an element in order to indicate that it is of less immediate
importance to the user than the surrounding text.
<p class="smallprint">
This text is smaller than normal.
</p>
This object is automatically applied to the figcaption,
small, sub and sup elements
so you'll only need to add it manually to elements which are not
normally smaller.
Fig
The fig object is used to position elements to the left
side of a block of text by floating them. This object also applies
margins which make floated elements sit nicely with Pigeon's type
styles.
<img class="fig" src="…" alt="This image is floated left">
The fig-alt object is the same as alt
except that it positions elements on the right side of text.
<img class="fig-alt" src="…" alt="This image is floated right">
Note: fig and fig-alt classes are
named as such (without left/right suffixes) to allow Pigeon to be
used more comfortably with right-to-left languages.
Quote
The quote object, along with the
quote-body and quote-attrib sub-objects,
is used to style quotations. These objects can be applied to any
element, which allows you to use your own preferred markup.
<blockquote class="quote">
<p class="quote-body">Hello World!</p>
<p class="quote-attrib">Someone in <cite>Work</cite></p>
</blockquote>
The quote object is automatically applied to the
blockquote element, although you'll still need to
manually apply the quote-body and
quote-attrib objects.
List Objects
Stack
The stack object is used to remove standard list
styling and display a list as a simple stack of block-level
elements.
<ul class="stack">
<li>This list looks just like…</li>
<li>…a stack of divs.</li>
</ul>Any anchors which are direct descendants of the stack's list items are also displayed as blocks.
<ul class="stack">
<li>
<a href="#">This is a block too!</a>
</li>
</ul>
The stack object can be used with non-lists by replacing
li elements with elements that have an
item class.
<div class="stack">
<div class="item">…</div>
<div class="item">…</div>
</div>Lineup
The lineup object is used to remove standard list styling
and display list items as inline blocks side by side.
<ul class="lineup">
<li>This list looks just like…</li>
<li>…spans side by side.</li>
</ul>Any anchors which are direct descendants of the lineup's list items are also displayed as inline blocks.
<ul class="lineup">
<li>
<a href="#">This is an inline block too!</a>
</li>
</ul>
The lineup object can be used with non-lists by replacing
li elements with elements that have an
item class.
<div class="lineup">
<div class="item">…</div>
<div class="item">…</div>
</div>
The lineup-is-delimited modifier is used alongside
lineup to add commas after each list item. This allows you
to easily create comma-delimited lists with semantic meaning.
<ul class="lineup lineup-is-delimited">
<li>These list items</li>
<li>will be</li>
<li>comma delimited</li>
</ul>Blocklineup
The blocklineup object is used to remove standard list
styling and display list items as blocks floated side by side.
Floats are automatically cleared.
<ul class="blocklineup">
<li>This is a list…</li>
<li>…of floated blocks.</li>
</ul>
The blocklineup object can be used with non-lists by replacing
li elements with elements that have an
item class.
<div class="blocklineup">
<div class="item">…</div>
<div class="item">…</div>
</div>Data Objects
Table
The table object is used to present tabular data
nicely. It is indended for use with table elements and
is not particularly useful on anything else.
<table class="table">
<tr>
<td>This table is styled…</td>
<td>…for optimal presentation…</td>
<td>…of tabular data.</td>
</tr>
</table>
The table-is-wide modifier is used alongside
table to make the table span the full width of its
container.
<table class="table table-is-wide">
<tr>
<td>This table spans the…</td>
<td>…full width of its container.</td>
</tr>
</table>
The table-is-striped modifier is used alongside
table to style alternating rows differently. This makes
large tables more readable.
<table class="table table-is-striped">
<tr>
<td>This table has…</td>
<td>…striped rows.</td>
</tr>
</table>Utility Objects
Clearfix
The clearfix object is used to clear all floats inside
a container.
<div class="clearfix">
<div style="float: left;">These floats</div>
<div style="float: left;">are cleared.</div>
</div>Hide
The hide object is used to hide elements in a way
that's accessible to both screen readers and search engines.
<p class="hide">
This paragraph is hidden.
</p>Shh
The shh-a object is used to disguise links to look
like their surrounding text. It can be used directly on an
a element or another element to target all child
links.
<a class="shh-a" href="…">
This link looks like regular text.
</a>
<p class="shh-a">
All links in this paragraph will look like regular text.
</p>