Nextlevel Gridssystem - XGS by Marco Bunge of rubymatrix.de <marco.bunge@rubymatrix-de>. Based on 960gs (http://960.gs)

xgs.scss

/*-----------------------------------------------------
	Nextlevel Gridssystem - XGS 
	by Marco Bunge of rubymatrix.de <marco.bunge@rubymatrix-de>. 
	Based on 960gs (http://960.gs)
	SASS Core
-------------------------------------------------------*/


/* Grid Settings
---------------------------*/


//define max-width by cell-width
$columns: 12;     // Number of columns
$col-width: 40px; // Column width
$gutter: 60px;    // Gutter width
$cell-width: $col-width + $gutter;
$max-width: $cell-width * $columns; //grid max-width

//define cellwidth by max-width
// $columns: 12;     // Number of columns
// $gutter: 20px;    // Gutter width
// $max-width: 960px; //grid max-width
// $col-width: ($max-width / $columns) - $gutter; // Column width
// $cell-width: $col-width + $gutter;

/* `helper vars
----------------------------------------------------------------------------------------------------*/
$columns-half: $columns / 2;
$columns-quarter: $columns / 4;
$columns-three-quarters: ($columns / 4) * 3;

/* functions */

@function grid-width($i) {
	@return ($col-width * $i + $gutter * ($i - 1))/$max-width*100%;
}

@function grid-gutter($i) {
	@return ($gutter/2)/$max-width*100%;
}

@function grid-cell($i){
	@return ($cell-width * $i)/$max-width*100%;
}

/* `Containers
----------------------------------------------------------------------------------------------------*/
@mixin grid-container($width) {
	margin-left: auto;
	margin-right: auto;
	max-width: $width;
	width:100%;
}

@mixin grid-wrapper {
	margin-left: 0;
	margin-right: 0;
	width: 100%;
}

/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/
@mixin alpha {
	margin-left: 0;
}

@mixin omega {
	margin-right: 0;
}

/* `Grid >> Columns
----------------------------------------------------------------------------------------------------*/
@mixin grid($i) {
	float: left;
	margin: 0 grid-gutter($i);
	width: grid-width($i);
}

/* `Prefix Extra Space
----------------------------------------------------------------------------------------------------*/
@mixin prefix($i) {
	padding-left: grid-cell($i);
}

/* `Suffix Extra Space
----------------------------------------------------------------------------------------------------*/
@mixin suffix($i) {
	padding-right:  grid-cell($i);
}

/* `Push Space
----------------------------------------------------------------------------------------------------*/
@mixin push($i) {
	position: relative;
	left:  grid-cell($i);
}

/* `Pull Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
@mixin pull($i) {
	position: relative;
	left: 0 - grid-cell($i);
}

@mixin center-fixed-grid($i,$direction:'left'){
	margin-#{$direction}: 0 - ($col-width * $i + $gutter * ($i - 1)) / 2;
	#{$direction}: 50%;
}