Open Framework - Postcard

Postcard Right

Megan Erin Miller — Fri, 02 Nov 2012 16:40:43 +0000

CSS Class:

.postcard-right

How this is used:

Postcard layouts are micro-layouts where you want thumbnail images, or other elements side-by-side next to a block of text. To implement a postcard layout, you need to structure your code in a very specific way, as shown in the example (add the postcard class to a div wrapper, with two divs inside it). The .postcard-right class does not allow for wrapping.

Example:

.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.

HTML Element:

div

Category:

Postcard

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

Postcard Right Wrap

Megan Erin Miller — Fri, 02 Nov 2012 16:39:26 +0000

CSS Class:

.postcard-right-wrap

How this is used:

Example:

.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.

HTML Element:

div

Category:

Postcard

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

Postcard Left

Megan Erin Miller — Fri, 02 Nov 2012 16:36:37 +0000

CSS Class:

.postcard-left

How this is used:

Example:

.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.

HTML Element:

div

Category:

Postcard

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

Postcard Left Wrap

Megan Erin Miller — Thu, 01 Nov 2012 23:15:43 +0000

CSS Class:

.postcard-left-wrap

How this is used:

Example:

.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.

HTML Element:

div

Category:

Postcard

<div class="postcard-left-wrap">
   <div>image</div>
   <div>text</div>
</div>