Skip to content

Instantly share code, notes, and snippets.

@lexer
Created May 5, 2011 13:05
Show Gist options
  • Save lexer/956988 to your computer and use it in GitHub Desktop.
Save lexer/956988 to your computer and use it in GitHub Desktop.
Really simple modular grid using Saas
$baseline: 20px;
$gutter: 20px;
$module-width: 60px;
$module-height: $baseline * 3;
@function width($n) {
@return $n * $gutter;
}
@function height($n) {
@return $n * $baseline;
}
@function region-width($n) {
@return $n * $module-width + ($n - 1) * $gutter;
}
@function region-height($n) {
@return $n * $module-height + ($n - 1) * $baseline;
}
.page {
width: region-width(12);
margin-left:auto;
margin-right:auto;
}
.header {
height: region-height(1);
margin-bottom: height(1);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment