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.
Category![]() |
Name of Style | CSS Class | HTML Elements Applied To | Example | Example Code |
---|---|---|---|---|---|
Text | Descriptor Text | .descriptor |
, , |
July 21, 2012 Location
Free Admission |
<p class="descriptor">July 21, 2012</p> <div class="descriptor"> Location<br /> Free Admission </div> |
Text | Caption | .caption |
, , |
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 |
|
This line will summarize what goes below. |
<p class="summary">This line will summarize what goes below.</p> |
Link | More Link | .more-link |
, , |
<p><a class="more-link" href="#"> |
|
Image | Border Simple | .border-simple |
, , |
|
<p class="border-simple"> <img alt="waterfall" src="waterfall.jpg" /> </p> |
Image | Border Simple No Width | .border-simple-nowidth |
, , |
|
<p class="border-simple-nowidth"> <img alt="waterfall" src="waterfall.jpg" /> </p> |
Image | Border Shadow | .border-shadow |
, , |
|
<p class="border-shadow"> <img alt="waterfall" src="waterfall.jpg" /> </p> |
Image | Border Hairline | .border-hairline |
, , |
|
<p class="border-hairline"> <img alt="clouds" src="clouds.png" /> </p> |
Image | Border Bottom | .border-bottom |
, , |
|
<p class="border-bottom"> <img alt="clouds" src="clouds.png" /> </p> |
Image | Border Underline | .border-underline |
, , |
|
<p class="border-underline"> <img alt="waterfall" src="waterfall.jpg" /> </p> |
Image | Border None | .border-none |
, , |
|
<p class="border-none"> <img alt="clouds" src="clouds.png" /> </p> |
Postcard | Postcard Right Wrap | .postcard-right-wrap |
|
![]()
|
<div class="postcard-right-wrap"> <div>image</div> <div>text</div> </div> |
Postcard | Postcard Right | .postcard-right |
|
![]()
|
<div class="postcard-right"> <div>image</div> <div>text</div> </div> |
Postcard | Postcard Left Wrap | .postcard-left-wrap |
|
![]()
|
<div class="postcard-left-wrap"> <div>image</div> <div>text</div> </div> |
Postcard | Postcard Left | .postcard-left |
|
![]()
|
<div class="postcard-left"> <div>image</div> <div>text</div> </div> |