The ‘island’ object

One thing I’ve been doing a lot of lately, since starting at Sky, is writing abstractions. OOCSS is nothing new, but its basic premise is that you can build really simple objects using a base class and then extend that object with more classes to add more styling to make a simple construct progressively more complex and specific.

One abstraction I love is by Nicole Sullivan (one of the best front-end devs in the world ever); the media object. Another I wrote is the more simple nav abstraction.

Today I’m going to share one that’s simpler still; the island object…

This super simple object is basically a single class used to box off content, leaving it closed on all sides like, well, an island.

Often you’d find yourself with markup and CSS a little like this:

<div class=content>

  <div class=promo>
      ...
  </div>

</div>

<div class=sub-content>

  <div class=twitter>
    ...
  </div>

</div>

.content{
  width:460px;
  float:left;
  padding:20px;
  margin-bottom:20px;
  background-color:#fff;
}
.sub-content{
  width:160px;
  float:left;
  padding:20px;
  margin-bottom:20px;
  background-color:#333;
  color:#fff;
}
.promo{
  padding:20px;
  margin-bottom:20px;
  border:1px solid #ff8;
  background-color:#ffc;
  color:#333;
}
.twitter{
  padding:20px;
  margin-bottom:20px;
  color:#fff;
  background-color:#00a0d1;
}

Here we see that these are all standalone blocks of boxed off content, but they all share certain things in common. These are essentially all islands of content that are individually adapted to look different.

Instead of repeating these declarations over and over we can make an abstraction to create padded, boxed off areas.

Now, we could use .box as a class but this implies square; we could have a redesign where we use rounded corners or even wacky, wavy background images which, although are boxed off, aren’t presentationally boxes. We don’t like presentational classes if we can help it.

Enter the .island class. Now our markup and CSS would be:

<div class="island content">

  <div class="island promo">
      ...
  </div>

</div>

<div class="island sub-content">

  <div class="island twitter">
    ...
  </div>

</div>

.island{
  padding:20px;
  margin-bottom:20px;
}
  .island > :last-child{
    margin-bottom:0; /* Remove the margin from the last child of a boxed off area so that we don't end up with compounded margin/padding spacings. */
  }

.content{
  width:460px;
  float:left;
  background-color:#fff;
}
.sub-content{
  width:160px;
  float:left;
  background-color:#333;
  color:#fff;
}
.promo{
  border:1px solid #ff8;
  background-color:#ffc;
  color:#333;
}
.twitter{
  color:#fff;
  background-color:#00a0d1;
}

This does make the HTML a tad larger, but the .island class is a powerful one that can quickly and rapidly create new areas of content without having to redeclare styles over and over.

Extending the island object with more specific styles means that you can have components that look vastly different but that are built upon the same basic construct. This also means that if you decide you design needs a little more white-space you can up the .island padding to, say, 24px in one go and all content blocks will inherit this new style.

Tweet Follow @csswizardry

By Harry Roberts on Sunday, October 16th, 2011 in Web Development. Tags: Abstraction, CSS, DRY, OOCSS | 6 Comments »

6 Responses to ‘The ‘island’ object’

Ben said on 16 October, 2011 at 8:13 pm

Hey man, nice post I’m really enjoying your post’s lately regarding front end performance etc.

With regards to CSS, could you clarify what you mean by an abstraction? just this is a new topic to me.
Josh said on 16 October, 2011 at 8:25 pm

Nice article! Would it make more sense to use margin-top and : first child due to browser support?
Harry Roberts said on 16 October, 2011 at 8:33 pm

@Ben: An abstraction, in my non-programmer, layman’s terms, is taking several similar constructs (in this case the content areas, twitter area and promo) and making one generic umbrella construct (the island). Island is an abstraction of the previous components. I find it quite hard to define to be honest, but if you use an example like the above, or the nav abstraction, then it may help understanding.

@Josh: You could, but I find (through pure experience, rather than fact) that margin-bottom is a lot more predictable than margin-top.

My ‘feeling’ here is that pages get rendered top down so applying margins to the bottom of elements fits the flow nicely rather than fighting margins back up the page. Again, this is just habit and experience rather than anything concrete so if you’d rather do margin-top then by all means do so :)
Ben said on 16 October, 2011 at 8:57 pm

cheers man :)
Leon Zoutewelle said on 18 October, 2011 at 12:51 pm

Nice article. I m also using this island based css in lots of projects (also big fan of Nicole).

We use it here even more to the extreme. We have made classes for only position:relative and so on. We also did this with margins. Because most designs the margins of elements are the same. So we created a class called marginTop10 which contains only margin-top:10px;

Because we used this kind of css we can create pages so fast that we are reducing our development time by a large amount.

We almost don’t need classes like .pager or .twitter anymore only if we need to declare some very uniek css like width.

Small example:

No more needing to make seperate css for each element.

When i have time i will wright you more if you want.
maxw3st said on 2 May, 2012 at 7:45 pm

Very nicely done.

6 Responses to ‘The ‘island’ object’

Leave a Reply