Contents

// ! Border-box sizing
// -----------------

* {
	@include box-sizing(border-box);
}

// ! Containers
// ------------

img {
	display: block;
	max-width: 100%;
}

.container {
	@include clearfix();
	width: $page-width + ($column-gutter * 2);
	padding: 0 $column-gutter;
	margin: 0 auto;
}

.responsive {
	.container {
		
		width: auto;	
		max-width: $page-width + ($column-gutter * 2);
		
		@include respond-to(tablet) {
			margin: 0;
			padding: 0 $tablet-padding;
		}
	
		@include respond-to(mobile) {
			margin: 0;
			padding: 0 $mobile-padding;
		}
	}
}

// ! Rows
// ------

.row {
	@include clearfix();
	margin-left: -($column-gutter / 2);
	margin-right: -($column-gutter / 2);
}


@include respond-to(mobile) {
	.responsive {
		.row {
			margin-left: 0;
			margin-right: 0;
		}
	}
}

// ! Form field rows
// -----------------

.field-row {
	@include clearfix();
	margin-left: - ($form-input-gutter / 2);
	margin-right: - ($form-input-gutter / 2);

	[class*="span"] {
		padding: 0 $form-input-gutter / 2;			
	}	
}

@include respond-to(mobile) {
	.responsive {
		.field-row{
			margin-left: 0;
			margin-right: 0;
			
			[class*="span"] {
				padding-left: 0;
				padding-right: 0;			
			}			
		}
	}
}

// ! Columns
// ---------

[class*="span"] {
	float: left;
	min-height: 1px;
	padding: 0 $column-gutter / 2;
	
	&:last-child {
		float: right;
	}
}

.responsive {
	[class*="span"] {
		@include respond-to(mobile) {
			float: none;
			width: 100%;
			padding-left: 0;
			padding-right: 0;
		}
	}
}

@for $i from 1 through $column-count {
  .span#{$i} { width: ($i / $column-count) * 100% ; }
}

Version data entries

4 entries across 4 versions & 2 rubygems

Version	Path
helium-rails-0.0.3	vendor/assets/stylesheets/helium/grid.scss
helium-rails-0.0.2	vendor/assets/stylesheets/helium/grid.scss
helium-rails-0.0.1	vendor/assets/stylesheets/helium/grid.scss
compass-helium-0.0.1	stylesheets/compass-helium/grid.scss