Skip to content
This repository

Some parts of content are ready for alpha testing, however, it isn’t ready to be used in production projects.

Media Object

The media object allows you to have an image/flash or other fixed width media to the left or right with some content that describes it in the center.

  • Status: ready for alpha testing

Base Classes

Property Description
media Wrapper for the media object
img Child node of the media object. Generally a link, image, or flash wrapper. Will appear to the left of the .bd. Optional region.
bd Main content area for the media object, can contain any other objects. Protected. Required region.
imgExt Child node of the media object. Generally a link, image, or flash wrapper. Will appear to the right of the .bd. Optional region.

HTML

<div class="media">
	<a href="http://twitter.com/stubbornella" class="img">
		<img src="http://a3.twimg.com/profile_images/72157651/tattoo_pink_bkg_square_mini.jpg" alt="Stubbornella" />
	</a>
	<div class="bd">
		<a href="http://twitter.com/stubbornella">@Stubbornella</a> <span class="detail">14 miniutes ago</span>
	</div>
</div>

Data Table

It can sometimes be convenient to be able to format a data table to align correctly for particular kinds of data (e.g. currency aligns right). Creating new classes for each kind of data can quickly bloat a file because ideally you want to be able to align the data with a class on the table, tr, td, or th, and have the class closest to the data win in case of conflict. This can be done, but it isn’t how CSS automatically works, so to keep file size down, generic classes that support alignment can be used in conjunction with more semantic classes or microformats.

  • Status: ready for alpha testing

Base Classes

Property Description
data Div wrapper for the data table
txtL Aligns left, default alignment, can be applied to table, tr, td, or th.
txtR Aligns right, can be applied to table, tr, td, or th.
txtC Aligns center (horizontally), can be applied to table, tr, td, or th.
txtT Aligns top, can be applied to table, tr, td, or th.
txtB Aligns bottom, can be applied to table, tr, td, or th.
txtM Aligns middle (vertically), can be applied to table, tr, td, or th.

HTML

<div class="data">
  <table class="txtC"><!--table alignment set to center -->
    <tr class="odd txtL">
      <th scope="row" class="txtR">Right aligned</th>
      <td>Left aligned</td>
    </tr>
    <tr class="even">
      <th scope="row">center aligned</th>
      <td>center aligned</td>
    </tr>
  </table>
</div>

Files

  • /css/content.css
Something went wrong with that request. Please try again.