Modular CSS – Flexible Web Design

I really don’t know the official term to describe this method. It’s not new, by all means. However, it’s a powerful method of using CSS code & classes effectively and efficiently.

Multiple CSS Classes

First, you may not be aware that you can use multiple css classes on elements. Example:
<p class="classone classtwo"></p>
Here’s where the power comes in. We can use these multiple classes to separate the structure from the “skin.”

Separation of structure from “Skinning”

Let’s start with a very simplistic example.

CSS
 
.box{
width:50px;
height:50px;
border:solid 1px #000;
}
 
.red{
background:red;
}
 
.yellow{
background:yellow;
}
 
HTML
 
<div class="box">Just Box</div>
<div class="box red">Box & Red</div>
<div class="box yellow">Box & Yellow</div>


The code above produces three boxes; the first with no fill, the second with a red fill, and the third with a yellow fill.

As you can see, you can create multiple instances of boxes across your site, but with an additional class, give them a completely different look.

A More Advanced Example

Ok, we’re now comfortable with how this works. Now, let;s take a look at a more common web design element that might benefit from this treatment.

We’re going to create a side-by-side two box widget that contains a heading, image and text. First, let’s create the structure of our two side-by-side boxes. I’m going to use a different method of marking this up, following the lead of many WordPress theme developers. Instead of <div>s, I’ll use an unordered list.

CSS
.col2{
width:600px;
overflow:auto;
list-style:none;
}
 
.col2 .colleft{
width:290px;
float:left;
}
 
.col2 .colright{
width:290px;
float:right;
}
HTML
<ul class="col2">
     <li class="colleft"><h3>Alaska Cruise Sale </h3><img src="/wp-content/uploads/2010/02/alaska-cruise.jpg" /><p><strong>Save $500</strong> on select 7-day Alaska sailings. More…</p></li>
     <li class="colright"><h3>Sail the Caribbean </h3><img src="/wp-content/uploads/2010/02/carib-cruise.jpg" /><p><strong>Save 30%</strong> on cruises to the Western Caribbean. More…</p></li>
</ul>


That gives use the following skeleton (borders implemented so you can see the boxes):

• Alaska Cruise Sale

  

  Save $500 on select 7-day Alaska sailings. More…

• Sail the Caribbean

  

  Save 30% on cruises to the Western Caribbean. More…

So let’s say we want to create a set of promo boxes, styling the heading, placing a colored border, and using a gradient background for each box.


CSS
.promoblue{
background:url(/wp-content/uploads/2010/02/grad-blue.jpg) bottom left repeat-x;
border:solid 1px #8fabcc;
}
 
.promoblue h3{
background:#8fabcc;
color:#fff;
padding:5px 10px;
}

By adding the promoblue class to the list item (<li>) tags, we get a different look.

• Alaska Cruise Sale

  

  Save $500 on select 7-day Alaska sailings. More…

• Sail the Caribbean

  

  Save 30% on cruises to the Western Caribbean. More…

That’s exactly what we want … except that blue really doesn’t work for the Caribbean. Let’s use a warmer color for the Caribbean.


CSS
.promoorgange{
background:url(/wp-content/uploads/2010/02/grad-orange.jpg) bottom left repeat-x;
border:solid 1px #eec019;
}
 
.promoorgange h3{
background:#eec019;
color:#fff;
padding:5px 10px;
}

Applying this style to the second box results in this.

• Alaska Cruise Sale

  

  Save $500 on select 7-day Alaska sailings. More…

• Sail the Caribbean

  

  Save 30% on cruises to the Western Caribbean. More…

So far, good stuff. Now, let’s go from good to great. On another page, we have another two box, side-by-side widget. However, this widget looks completely different. Yet, the only difference is the additional classes used.

• Price Includes

  • All accommodations aboard ships or in hotels per itinerary or similar.
  • All meals and nonalcoholic beverages aboard ship, meals on land as indicated.
  • Shore excursions, sightseeing and entrance fees, special access permits

• Price Does Not Include

  • Air transportation (except where shown as included)
  • Extensions, passport, visa, immigration fees
  • Items of a personal nature, such as alcoholic beverages, e-mail, and laundry

Same boxes from before, just different styling thanks to our additional classes.

CSS
.plainjane h3{
border-bottom:solid 2px #000;
}
 
HTML
<ul class="col2">
     <li class="colleft plainjane"><h3>Price Includes </h3> ... </li>
     <li class="colright plainjane"><h3>Price Does Not Include </h3> ... </li>
</ul>


Hope this makes sense and was fairly easy to follow. Holler if something is not clear.