CSS Stylesheet structure

This section outlines the common stylesheet properties used by the I-Metrics CMS. The Stylesheet structure starting from version 1.10 uses common tag names for the following reasons:

• To reduce duplication of CSS properties
• To improve portability of Stylesheet sections into new templates
• To speed up template integration
• To standardize a great number of CSS tags for reuse.

All DIVs by default are using the position:relative property instead of the CSS default which is static.

The template default is the first section in the Stylesheet to setup the necessary defaults instead of a traditional CSS reset tag
Some examples:
h1,h2,h3 {margin:0; padding:0; overflow: hidden; }
img { border: 0; padding: 0; margin: 0}

Common names to combine is another important section in the Stylesheet, some examples here:
.totalsize {width: 900px;}
.leftsize {width: 634px;}
.floater { float:left; }
.floatend { float:right; }
.cleaner { clear:both; }
.balancer {margin: 0px auto 0px auto;}
So if we wanted to use a starting div to specify the width of the template we don't need to use the traditional wrapper id alone that makes no sense in terms of CSS properties but:
<div class="totalsize balancer lalign" id="wrapper">
......
</div>
So some of the positioning properties are placed as a class combinations while the id itself stays as is to allow insertion of the remaining properties

Its also easier to remember classes with properties meaning instead of using names that bind to the framework or to the template/theme specifics. Plus its easier for developers from different backgrounds to grasp this concept and utilize the CSS classes.
<div class="page-listing-heading"> vs <div class="leftsize floater lalign">

Here is a short description for each CSS entity typically used in the common rules for the administration and main template stylesheet of the I-Metrics CMS.

floater
Floats content left, suitable for block elements like DIV the underlying CSS is float:left

floatend
Float content right, suitable for block elements like DIV the underlying CSS is float:right. Use the floatend once for a section with floated DIV elements. The section with the floatend property is aligned to the right.

cleaner
Ensures the element does not float the underlying CSS is clear:both

hider
Hides the element without taking up space, the CSS behind it is display:none

halfer, quarter, quarter3,
Takes up a percentage wide-wise - space from a given total width as specified by a parent element. Useful for inline elements and creating columns.
<div class="floater halfer">text-left</div>
<div class="floatend halfer">text-right</div>

scroller
Forces the element to have a scroll property and maximum width. Useful when the content needs should have a specific height. Helps with ergonomy of layout sections where not all content needs to be in plain view at once.

lalign,calign,ralign
Horizontal alignment classes for inline elements. lalign aligns text left, ralign aligns text right, calign aligns text to the middle of a given container. Can be used for inline elements like SPAN. Do not use them for DIV block alignment use the floater and floatend classes instead.

spacer
Uses margin to generate spacing horizontally and vertically. Template default value is 4px.

hspacer, bspacer, lspacer, rspacer, tspacer, vspacer
Similar to the spacer class, these allocate space from one or two sides in the container using the margin CSS property. hspacer takes up space horizontally, bspacer allocates space from the bottom, lspacer from the left, rspacer from the right, tspacer from the top and vspacer from both top/bottom. As these classes specify pixels you should not use them in the same element with the percentage allocation rules like halfer as the total margin allocation cannot be determined.
Bad:
<div class="hspacer halfer">text</div>
Good:
<div class="halfer">
  <div class="hspacer">text</div>
</div>

bounder
This is a greedy rulw which allocates the maximum width and height. Any content that does not fit in the container specified by the bounder is hidden. Used to open main container and drive HTML sections with DIVs.

heavy
Applies the bold property to inline elements.

wider
This is a greedy rule and takes up the maximum width available, the equivalent CSS is width: 100%.

balancer
Can align block elements horizontally using the margin auto property. Useful for the opening sections of the template.

extend
Applies maximum vertical allocation of space but still follows its parent container. Used for template layout where the main sections in columns need to take up the same height. Can simplify the HTML/CSS and theme maintenance instead of using repeated backgrounds for the entire page.