gisu

//  Mixing for Compass - GRID
//  Autor   : Sascha Fuchs
//  Date    : 06.12.2011
//  Version : 1
//  Email   : info@jiff-design.de
//  URL     : jiffdesign.de
//  @include grid($framesize, $colums,$gutterwidth, $prefix, $design, $layout, $border, $padding,$offset,$onecolpad,$test)
// // Framesize for the Grid in PX
// $framesize   : 1000,	
// // Number of Colums

gisu

// ============================================================
//          Positioning Mixins                                  
// ------------------------------------------------------------

//**
// Private Mixin: _set-position 
// Set the Position for the Position Mixins
//
// @mixin   	_set-position
// @param 		$position {list} One Value = top, Two Value = top left, Four Values = top right bottom left (t = zero position) can be in px or %

gisu

//**
// Mixin: size 
// Shorthand for insert Dimensions. Default in PX, opt in Percent
// Entering only one Value the Dimension Squared, with two Values
// the width and height are written.
//
// @mixin     size
// @param     $size {number} Width and or Height
// @usage     +size($size, $value)
// @eg        +size(200 100)

gisu

.box {
  height: 200px;
  width: 300px;
  background: blue;
  padding: 10px;
  margin: 0 0 10px 0;
  color: white;
  position: relative;
}

gisu

.box-small {
  height: 200px;
  width: 300px;
  background: #f7f7f7;
  padding: 10px;
  margin: 0 0 10px 0;
  color: black;
  position: relative;
}

gisu

.box {
  background: #f7f7f7;
  padding: 10px;
  margin: 0 0 10px 0;
  color: black;
  position: relative;
}

.box_small {
  height: 200px;

gisu

<div class="box box_small">…</div>

<div class="box box_wide">…</div>

gisu

.relative {
  position: relative;
}
.padding--10 {
  padding: 10px;
}
.margin-bottom--10 {
  margin-bottom: 10px;
}
.box {

gisu

<div class="box box_small padding--10">…</div>
<div class="box box_wide padding--10 margin-bottom--10">
  <h2 class="box--heading padding--10">Headline</h2>
</div>

gisu

%relative
  postion: relative
  
%padding--10
  padding: 10px

%margin-bottom--10 
  margin-bottom: 10px

%box