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;
}
Written by Liam O'Brien
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#