Boxer Mixin - Simple Sass & Compass Mixin for styling flotting multicolum box snapped to a defined grind.

README.md

Boxer 1.0

Boxer is a simple mixin for create, easily, flotted multicolum item.

How to use

Include Boxer Mixin

Boxer works like a normal mixin, than you cane copy and paste it in your scss file or you cane create a new scss file and @include it in your main sass file. Remember if the first character of you scss namespace file is "_" compass not watch the file :) and watch only the main scss file.

Use Boxer Mixin in you sass file:

1. Setup the global variable:

• $colums - Number of colums

• $maxWidth - Container width

You can set this variables in the mixin file for setting they globally or you can set they inside the code before use mixin for set they locally:

• $boxes - Number of colums

• $width - Container width

2. import Boxer:

You can import:

@import "_boxerMixin.scss"

Note. the "_" in the file name tell to compass or sass to not watch this file end not compile it in css file.

Or you simple can copy and paste the mixin in your scss file.

3. Use Boxer:

Boxer is a simple Mixin, than you can use it like all the other mixin:

div.element{
 @include boxer($dim,$margin,$padding);
}

4. Boxer Attribute

• $dim - number of colums cover by elment
• $margin - margin between the "PREW" elment
• $padding - inseide rounded padding of the elment

---

##Example

Use Boxer Mixin by override default width and cols number:

$boxes : 6;
$width : 600px;


div.element{
 @include boxer($dim,$margin,$padding);
}

---

_boxerMixin.scss

/* Global variable */
$colums : 8;
$maxWidth : 960px;

/* structure */
@mixin boxer($dim,$margin,$padding){
  
  /* if local variables are not define use global vars */
  $boxes : $colums !default;
  $width : $maxWidth !default;
  
  /* calculate width */
  width : (($Width/$colums)-($margin/$colums))*$dim - $padding*2;
  
  /* style margin & padding */
  margin: 0 0 $margin $margin;
  padding:$padding;
  
  float:left;
  
  /* delete lateral margin if first or last element */
    &.first{
      margin-left:0;
    }
    &.last{
      margin-right:0;
    }
}