SASS Universal GRID System. Multifunctional, suitable for responsive Layouts

grid.scss

//  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
// $colums      : 16,    	
// // The Width of the Gutter in PX
// $gutterwidth : 20,  	
// // Own Class Prefix (none for no Prefix)
// $prefix      : none,	

// // Options

// // Griddesign:
// // Opt: array  = Margin left and right no last Class needed
// // Opt: line   = Margin (Gutter) on the left or the right Side
// $design      : center, 

// // Gridlayout:
// // Opt: static = Static Grid fixed width
// // Opt: fluid  = Grid based on %
// // Opt: onecolum = All Colums get 100%, Float is breaked up
// $layout      : onecolum,	

// // Orientation
// // Opt: left = Grid float left
// // Opt: right= Grid float right
// $orient    : left,

// // Bordersize in PX
// $border		 : 0,
// // Padding inside the Colum when needed in PX (onesite padding)
// $padding 	 : 0,	

// // When needed an offset enter yes
// $offset 	 : no,

// // Side Padding or Margin for Onecolum Layout 

// // OBSOLETE! BETTER WAY GIVE THE OUTSIDE FRAME THE DESIRED PADDING
// $onecolpad	 : 0,
// // Only for Mockup Test
// $test        : yes

@mixin grid ($fontsize,$framesize, $colums,$gutterwidth, $prefix, $design, $layout,$orient, $border, $padding,$offset,$onecolpad,$test)
{
	// Defaults
	$pr-r : '' !default;

	// Prefix Definition Row
	@if $prefix != none {
		$pr-r : #{$prefix}-row;
	} @else {
		$pr-r : row;
	}	
	
	// Recalculate from PX to EM
	$font-base : $fontsize;

	// Recalculate the Variables to EM 
	$gutter-em    : $gutterwidth / $font-base;
	$border-em    : $border / $font-base;
	$padding-em   : $padding / $font-base;
	$framesize-em : $framesize / $font-base;
	
	$boxfill      : $gutterwidth + ($border * 2) + ($padding * 2);
	$boxfill-em   : $gutter-em + ($border-em * 2) + ($padding-em * 2);


	// Calculate PX to Percent
	$pixelpercent : 100 / $framesize;

	// Gutter in %
	$gutter-p : $pixelpercent * $gutterwidth;
	
	// Border in %
	$border-p : $pixelpercent * $border;

	// Padding in Percent
	$padding-p: $pixelpercent * $padding;


	// Static Grid Layout
	@if $layout == static {

		// Row Container
		.#{$pr-r} {
			overflow : hidden;
			@if $test == yes {
				background		  : #ccc;
			}

			// Base Colum Class
			.colum {
				// Float Switch
				@if $orient == right {
					float:right;
				} @else {
					float:left;
				}

				@if $test == yes {
					background		  : #aaa;
				}

				@if $design == array {
					// When Padding is higher than 0 implement the Padding
					@if $padding > 0 {
						padding-left  :#{$padding-em}em;
						padding-right :#{$padding-em}em;
					} 

					// Implement the Margin on the Left and Right
					margin-left   : #{$gutter-em / 2}em;
					margin-right  : #{$gutter-em / 2}em;
				}
				
				@if $design == line {
					// When Padding is higher than 0 implement the Padding
					@if $padding > 0 {
						padding-left  :#{$padding-em}em;
						padding-right :#{$padding-em}em;
					}

					@if $orient == right {
						// Implement the Margin on the Left Side (First Child has no Margin)
						margin-right: #{$gutter-em}em;

						// Delete the Margin on the First Child
						&:first-child {
							margin-right:0;
						}
					} @else {
						// Implement the Margin on the Left Side (First Child has no Margin)
						margin-left: #{$gutter-em}em;

						// Delete the Margin on the First Child
						&:first-child {
							margin-left:0;
						}
					}
				}
			}

			@if $design == array {

				// Smallest Colum Effective width excl. Border, Margin, Padding
				$csb : ($framesize-em - ($colums * $boxfill-em)) / $colums;

				// Generate Static Colums
				@for $i from 1 through $colums {
					.colum-#{$i} {		
						width:#{$csb * $i + (($boxfill-em * ($i - 1)))}em;
					}
				}

				// Generate Offset
				@if $offset == yes {
					// Smallest Colum Size incl. Border, Margin,Padding
					$csc : $framesize-em / $colums;
					
					@for $n from 1 through $colums {
						.o-l-#{$n} {
							margin-left:#{$csc * $n + ($gutter-em * 0.5)}em;
						}
						.o-r-#{$n} {
							margin-right:#{$csc * $n + ($gutter-em * 0.5)}em;
						}
					}
				}
			}

			@if $design == line {

				$boxfill-em : (($border * 2) + ($padding * 2)) / $font-base;

				// Smallest Colum
				$csb : ($framesize-em - (($colums) * $boxfill-em) - ($gutter-em * ($colums - 1))) / $colums;

				// Generate Static Colums
				@for $i from 1 through $colums {
					.colum-#{$i} {
						width :#{($csb * $i) + ($gutter-em * ($i - 1)) + ($boxfill-em * ($i - 1))}em;
					}
				}
				// Generate Offset
				@if $offset == yes {
					@for $n from 1 through $colums {
						@if $orient == right {
							.o-l-#{$n} {
								margin-left  :#{($csb * $n) + ($gutter-em * $n) + ($boxfill-em * $n)}em; 
								}
							.o-r-#{$n} {
								margin-right :#{($csb * $n) + ($gutter-em * ($n + 1)) + ($boxfill-em * $n)}em;
							}
						} @else {
							.o-l-#{$n} {
								margin-left  :#{($csb * $n) + ($gutter-em * ($n + 1)) + ($boxfill-em * $n)}em;
								}
							.o-r-#{$n} {
								margin-right :#{($csb * $n) + ($gutter-em * $n) + ($boxfill-em * $n)}em; 
							}
						}
					}
				}
			}
		}
	}

	// Submixing for Fluid Layout % Based
	@if $layout == fluid {
		// Definition of a Row
		.#{$pr-r} {
			overflow : hidden;
			@if $test == yes {
				background		   : #ccc;
			}

			// Boxfill in Percent
			$boxfill : $gutterwidth + ($border * 2) + ($padding * 2);
			$boxfill-p: $pixelpercent * $boxfill;
		
			// Base Colum Class
			.colum {
				// Float Switch
				@if $orient == right {
					float:right;
				} @else {
					float:left;
				}

				@if $design == array {
					// When Padding is higher than 0 implement the Padding
					@if $padding > 0 {
						padding-left  : ($padding-p)#{unquote('%')};
						padding-right : ($padding-p)#{unquote('%')};
					}
					// Implement the Margin on the Left and Right
					margin-left   : ($gutter-p / 2)#{unquote('%')};
					margin-right  : ($gutter-p / 2)#{unquote('%')};

				} @elseif $design == line {
					// When Padding is higher than 0 implement the Padding 
					@if $padding > 0 {
						padding-left  : ($padding-p)#{unquote('%')};
						padding-right : ($padding-p)#{unquote('%')};
					}
					@if $orient == right {
						// Implement the Margin on the Left Side (First Child has no Margin)
						margin-right:$gutter-p#{unquote('%')};

						// Delete the Margin on the First Child
						&:first-child {
							margin-right:0;
						}
					} @else {
						// Implement the Margin on the Left Side (First Child has no Margin)
						margin-left:$gutter-p#{unquote('%')};

						// Delete the Margin on the First Child
						&:first-child {
							margin-left:0;
						}
					}
				}
				@if $test == yes {
					background		   : #aaa;
				}
			}
			@if $design == array {
				// Smallest Colum Effective width excl. Border, Margin, Padding
				$csb : (100 - ($colums * $boxfill-p)) / $colums;

				// Generate Fluid Colums
				@for $i from 1 through $colums {
					.colum-#{$i} {		
						width:#{($csb * $i + (($boxfill-p * ($i - 1))))}#{unquote('%')};
					}
				}
				// Generate Offset
				@if $offset == yes {
					// Smallest Colum Size incl. Border, Margin,Padding
					$csc : 100 / $colums;
					@for $n from 1 through $colums {
						.o-l-#{$n} {
							margin-left:#{($csb * $n + (($boxfill-p * ($n - 1)))) + $gutter-p * 2.5}#{unquote('%')};
						}
						.o-r-#{$n} {
							margin-right:#{($csb * $n + (($boxfill-p * ($n - 1)))) + $gutter-p * 2.5}#{unquote('%')}; 
						}
					}
				}
			}
			
			@if $design == line {
				$boxfill-p : $pixelpercent * (($border * 2) + ($padding * 2));

				// Smallest Colum Effective width excl. Border, Margin, Padding
				$csb : (100 - (($colums) * $boxfill-p) - ($gutter-p * ($colums - 1))) / $colums; 

				// Generate Fluid Colums
				@for $i from 1 through $colums {
					.colum-#{$i} {
						width :#{(($csb * $i) + ($gutter-p * ($i - 1)) + ($boxfill-p * ($i - 1)) + 0.0)}#{unquote('%')};
					}
				}
				// Generate Offset
				@if $offset == yes {
					@for $n from 1 through $colums {
						@if $orient == right {
							.o-l-#{$n} {
								margin-left :#{($csb * $n) + ($gutter-p * $n) + ($boxfill-p * $n)}#{unquote('%')};
							}
							.o-r-#{$n} {
								margin-right  :#{($csb * $n) + ($gutter-p * ($n + 1)) + ($boxfill-p * $n)}#{unquote('%')};
							}
						
						} @else {
							.o-l-#{$n} {
								margin-left  :#{($csb * $n) + ($gutter-p * ($n + 1)) + ($boxfill-p * $n)}#{unquote('%')};
							}
							.o-r-#{$n} {
								margin-right :#{($csb * $n) + ($gutter-p * $n) + ($boxfill-p * $n)}#{unquote('%')};  
							}
						}
					}
				}
			}
		}
	}
	// Submixing for the OneColum Layout (Break all Floats)
	@if $layout == onecolum {
		// Definition of a Row
		.#{$pr-r} {
			overflow : hidden;
			@if $test == yes {
				background		   : #ccc;
			}
			// Base Colum Class
			.colum {
				float:none;
				width:unquote(100 - (($onecolpad * 2) + ($border-p * 2) + ($padding-p * 2)) + "%");
				@if $padding > 0 {
					padding-left  : ($padding-p)#{unquote('%')};
					padding-right : ($padding-p)#{unquote('%')};
				}
				margin-left:0 !important;
				margin-right:0 !important;

				@if $test == yes {
					background		   : #aaa;
				}
			}
		}
	}
}