Open Framework - div

Category:

<p class="border-none">
<img alt="clouds" src="clouds.png" />
</p>

Border Underline

Megan Erin Miller — Fri, 02 Nov 2012 17:29:11 +0000

CSS Class:

.border-underline

How this is used:

This class adds a 4px border below an image that does not touch the image. This class is not as useful in combination with other image classes.

Because of the way Drupal works, we built this style to only be applied to wrapper tags around image tags. These classes will not work if you apply them to the image tag itself, but can work at any level of wrapper div around the image. For example at the block level you can apply the border class once, and all images in the block will get that style.

Example:

HTML Element:

Category:

<p class="border-underline">
<img alt="waterfall" src="waterfall.jpg" />
</p>

Border Bottom

Megan Erin Miller — Fri, 02 Nov 2012 17:27:11 +0000

CSS Class:

.border-bottom

How this is used:

This class adds a 1px border below the image using the border class. This class can be used in combination with other border classes, such as .border-simple, .border-simple-nowidth, and .border-shadow.

Example:

HTML Element:

Category:

<p class="border-bottom">
<img alt="clouds" src="clouds.png" />
</p>

Border Hairline

Megan Erin Miller — Fri, 02 Nov 2012 17:24:29 +0000

CSS Class:

.border-hairline

How this is used:

This class adds a 1px border around images by using the border class.

This class can be used in combination with other border classes, such as .border-simple, .border-simple-nowidth, and .border-shadow.

Example:

HTML Element:

Category:

<p class="border-hairline">
<img alt="clouds" src="clouds.png" />
</p>

Border Shadow

Megan Erin Miller — Fri, 02 Nov 2012 17:16:53 +0000

CSS Class:

.border-shadow

How this is used:

This class adds a CSS3 shadow below the image.

This class can be used in combination with other border classes, such as .border-simple, .border-hairline, .border-bottom, and .border-simple-nowidth.

Example:

HTML Element:

Category:

<p class="border-shadow">
<img alt="waterfall" src="waterfall.jpg" />
</p>

Border Simple No Width

Megan Erin Miller — Fri, 02 Nov 2012 17:03:12 +0000

CSS Class:

.border-simple-nowidth

How this is used:

This class adds a 6px border around images by using background color and padding. It does not add any width specification, so is a useful alternative when you are using this style in a postcard layout.

Because this class uses a background color to add the border, it can be used in combination with other border classes, such as .border-hairline, .border-shadow, and .border-bottom.

Example:

HTML Element:

Category:

<p class="border-simple-nowidth">
<img alt="waterfall" src="waterfall.jpg" />
</p>

Border Simple

Megan Erin Miller — Fri, 02 Nov 2012 16:55:15 +0000

CSS Class:

.border-simple

How this is used:

This class adds a 6px border around images by using background color and padding. It does add a 100% width to the image as well, and uses a clever calc() calculation with graceful degredation.

Because this class uses a background color to add the border, it can be used in combination with other border classes, such as .border-hairline, .border-shadow, and .border-bottom.

Example:

HTML Element:

Category:

<p class="border-simple">
<img alt="waterfall" src="waterfall.jpg" />
</p>

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:

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:

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: