Content

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