A CSS3 only column framework

elastico.scss

/* 
	Elastico SCSS
	==============
	Grid framework for CSS3 capabe browsers/devices like the iPad.
	
	Author: Armando Sosa
	
---------------------------------------- */

@mixin column-system($columns: 8, $width:100%, $gap : 20px){

	.container_#{$columns}{

		$fraction : $width / $columns;

		width:$width;
		display:inline-block;

		.column{
			-webkit-box-sizing:border-box;
			float:left;
			padding:0 $gap;	
		}

		@for $i from 1 through $columns {
			.grid_#{$i} { 
				width: $fraction * $i;
				@extend .column;
			}
			.pre_#{$i} {
				margin-left:$fraction * $i;
			}
			.post_#{$i} {
				margin-right:$fraction * $i;
			}
		}

		.break{
			clear:right;
		}
		.clear{
			clear:both;
		}


	}

	
}

@include column-system();
@include column-system(10);
@include column-system(4,768px,10px);