Skip to content Skip to navigation

Style Guide

Use this style guide to learn how to implement all the classes available through Open Framework. Click on the name of a style to learn more about how to implement that style and what it is used for.

Categorysort descending Name of Style CSS Class HTML Elements Applied To Example Example Code
Text Caption .caption <div>, <p>, <span>

This is a caption.

This is another caption.

 
<p class="caption">This is a caption.</p>
<div class="caption">
   <p>This is another caption.</p>
</div>
Text Summary .summary <p>

This line will summarize what goes below.

 
<p class="summary">This line will 
summarize what goes below.</p>
Text Descriptor Text .descriptor <div>, <p>, <span>

July 21, 2012

Location
Free Admission
 
<p class="descriptor">July 21, 2012</p>
<div class="descriptor">
   Location<br />
   Free Admission
</div>
Link More Link .more-link <a>, <div>, <span>

Read More

More Information
 
<p><a class="more-link" href="#">
Read More</a></p>
<div class="more-link">
   <a href="#">More Information</a>
</div>
Image Border Simple .border-simple <div>, <p>, <span>

waterfall

 
<p class="border-simple">
<img alt="waterfall" src="waterfall.jpg" />
</p>
Image Border Simple No Width .border-simple-nowidth <div>, <p>, <span>

waterfall

 
<p class="border-simple-nowidth">
<img alt="waterfall" src="waterfall.jpg" />
</p>
Image Border Shadow .border-shadow <div>, <p>, <span>

waterfall

 
<p class="border-shadow">
<img alt="waterfall" src="waterfall.jpg" />
</p>
Image Border Hairline .border-hairline <div>, <p>, <span>

clouds

 
<p class="border-hairline">
<img alt="clouds" src="clouds.png" />
</p>
Image Border Bottom .border-bottom <div>, <p>, <span>

clouds

 
<p class="border-bottom">
<img alt="clouds" src="clouds.png" />
</p>
Image Border Underline .border-underline <div>, <p>, <span>

waterfall

 
<p class="border-underline">
<img alt="waterfall" src="waterfall.jpg" />
</p>
Image Border None .border-none <div>, <p>, <span>

clouds

 
<p class="border-none">
<img alt="clouds" src="clouds.png" />
</p>
Postcard Postcard Left Wrap .postcard-left-wrap <div>
waterfall

.postcard-left-wrap floats two divs side-by-side, and allows for wrapping. You can use this to do "image on the left, text on the right" layouts. Postcard layouts are micro-layouts where you want thumbnail images, or other elements next to a block of text. We have built support for micro-layouts into the Open Framework theme through this postcard implementation strategy.

 
<div class="postcard-left-wrap">
   <div>image</div>
   <div>text</div>
</div>
Postcard Postcard Left .postcard-left <div>
waterfall

.postcard-left floats two divs side-by-side, does not allow wrapping. You can use this to do "image on the left, text on the right" layouts. Postcard layouts are micro-layouts where you want thumbnail images, or other elements next to a block of text. We have built support for micro-layouts into the Open Framework theme through this postcard implementation strategy.

 
<div class="postcard-left">
   <div>image</div>
   <div>text</div>
</div>
Postcard Postcard Right Wrap .postcard-right-wrap <div>
waterfall

.postcard-right-wrap floats two divs side-by-side, and allows for wrapping. You can use this to do "image on the right, text on the left" layouts. Postcard layouts are micro-layouts where you want thumbnail images, or other elements next to a block of text. We have built support for micro-layouts into the Open Framework theme through this postcard implementation strategy.

 
<div class="postcard-right-wrap">
   <div>image</div>
   <div>text</div>
</div>
Postcard Postcard Right .postcard-right <div>
waterfall

.postcard-right floats two divs side-by-side, and does not allow wrapping. You can use this to do "image on the right, text on the left" layouts. Postcard layouts are micro-layouts where you want thumbnail images, or other elements next to a block of text. We have built support for micro-layouts into the Open Framework theme through this postcard implementation strategy.

 
<div class="postcard-right">
   <div>image</div>
   <div>text</div>
</div>