Last Updated: February 25, 2016
·
988
· finderman2

A LESS Class for the Island OOCSS Module

A very simple and basic Less class for column modules that are infinitely extendable and without any superfluous styles.

.island (@width: 50%, @margin: 0 1.5em 0 0, @float: left) {
     width: @width;
     margin: @margin; 
     float: @float; 
}

Floats can be cleared using the Dan Cederholm original ".group" class, with Nicolas Gallagher's micro-clearfix:

.group:before, .group:after{content:""; display:table;}
.group:after {clear:both;}
// For IE 6/7 (trigger hasLayout)
.group {zoom:1;}

Editors note: This snippet could be extended with a rounded class, which would include mixins for border-radius and background color, like so:

.island.round (@round: 5px, @bg: #bada55) {
     border-radius: @round;
     background: @bg;
 }