Module

Modules – Container Objects

Modules are based on the Standard Module Format. They provide a simple, predictable way to skin container objects while maintaining accessibility and performance. Contour skins are separate from background skins, headers, and footers. I suggest you name skins in a way that indicates how that skin should be used (semantically). The module skin should not change the display of objects within its open editable zones. Features include:

• Less than 2K! (structures)
• Simple to skin
• One image per module
• Height and width agnostic
• Accessibility and performance baked-in
• Separates semantic markup from presentational fluff

Base Classes

Property	Description
mod	Base class for all container modules. Use mod unless you specifically need one of the other structure objects. Mod is transparent on the inside, corners overlay content, it can therefore be used with any content. Allows infinite height and width as borders are generated via skin objects that define borders on mod and inner.
complex	Extends mod. Allows full image borders for cases where the desired look and feel cannot be generated via borders on mod and inner. complex is transparent on the inside, corners overlay content, thus it can be used with any content.
pop	Extends mod. Allows transparent outside, such as drop shadows. Use in cases where the module overlays an image, text, or other variable background. pop is transparent on the outside, content overlays background, thus it cannot be used with any content
top	A presentational element which wraps the top corners. It is used by complex to display the upper edge of the block. In other block structures it has no height. This empty, non-semantic element should be inserted via a serverside script or JavaScript, the former is preferable.
bottom	A presentational element which wraps the bottom corners. It is used by complex to display the lower edge of the block. In other block structures it has no height. This empty, non-semantic element should be inserted via a serverside script or JavaScript, the former is preferable.
tl	A presentational element used to display the top left corner of a block, and in complex the left edge of the block. This empty, non-semantic element should be inserted via a serverside script or JavaScript, the former is preferable.
tr	A presentational element used to display the top right corner of a block, and in complex the right edge of the block. This empty, non-semantic element should be inserted via a serverside script or JavaScript, the former is preferable.
bl	A presentational element used to display the bottom left corner of a block. This empty, non-semantic element should be inserted via a serverside script or JavaScript, the former is preferable.
br	A presentational element used to display the bottom left corner of a block. This empty, non-semantic element should be inserted via a serverside script or JavaScript, the former is preferable.

The Markup

Module

<div class="mod"> 
	<div class="inner">
		<div class="bd">
			<p>Lorem ipsum.</p>
		</div>
	</div>
	<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b> 
</div>

Complex

<div class="mod complex"> 
	<div class="inner">
		<div class="bd">
			<p>Lorem ipsum.</p>
		</div>
	</div>
	<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b> 
</div>

Popup

<div class="mod pop"> 
	<div class="inner">
		<div class="bd">
			<p>Lorem ipsum.</p>
		</div>
	</div>
	<b class="top"><b class="tl"></b><b class="tr"></b></b><b class="bottom"><b class="bl"></b><b class="br"></b></b> 
</div>

Skinning suggestions

The contour and the background can be used to define the intersection of two parameters. For example you cross product status with product type. E.g. sale, normal, and featured backgrounds with motorcycle, helmet, and clothing contours. In so far as possible, keep your classes as abstract as they can reasonably be. For example choose motorcycle over ducati, ducatiMonster, or NicolesDucatiMonster620dark — unless you really mean to exclude all other uses!

Be careful not to choose classes linked to the display of the object (e.g. big blue borders). The client will change their mind, you’ll have classes which no longer correlate to actual display.