The island object

A common need when building most sites is the ability to quickly and easily box off content. A common solution is the .box class but I proposed and use something slightly different; the .island object.

The use of the word island is because I feel it is a little more abstract than ‘box’. To me box implies square, which isn’t necessarily always what we’re after. ‘Island’ basically means something surrounded on all sides; it doesn’t carry any visual or presentational connotations.

The island object is a very very simple abstraction which actually does very little. It needs to pad its content and be clearfixed, and possibly carry rounds on the corners. That’s about it.

We also have an .islet object which is just like an island but, predictably, a little smaller:

/* Clearfix */
.island:before,.islet:before,
.island:after,.islet:after,
.cf:before,
.cf:after{
    content:"";
    display:table;
}
.island:after,.islet:after,
.cf:after{
    clear:both;
}
.island,.islet,
.cf{
    zoom:1;
}

/* Island object */
.island,
.islet{
    display:block;
    -webkit-border-radius:4px;
     -moz-border-radius:4px;
          border-radius:4px;
}

.island{
    padding:1em;
}
.islet{
    padding:0.5em;
}

.island > :last-child,
.islet > :last-child,{
    margin-bottom:0;
}

We can use this in our HTML with extension classes, for example:

<div class="island promo">
    <h2>Special offer!</h2>
    <p>Sign up now and recieve <strong>10% off</strong> your first order.</p>
</div>

and some more specific CSS:

.promo{
    color:#fff;
    background-color:#09f;
}