public
Last active

A customized version of the 1KB CSS Grid. Now in a repo (https://github.com/heygrady/1KB-SCSS-Grid). Original article (http://heygrady.com/blog/2011/02/17/using-sass-with-the-1kb-grid-system/).

  • Download Gist
example1.scss
SCSS
1 2 3 4 5 6 7 8 9 10 11 12
#column-a {
@include grid-column; // make it a column
@include grid(6); // make it 6 columns wide
}
#column-b {
@include grid-column(6); // make it a column, 6 columns wide
}
#column-c {
@include grid-column; // make it a column
@include grid-plus(6, -10px); // make it 6 columns wide, minus padding
padding: 0 5px; // mean designer broke the grid
}
grid-layout.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
...
<div id="container">
<header>
<h1>Header</h1>
<nav></nav>
</header>
 
<div id="main">
<div id="left-column">Left Column</div>
<div id="main-column">
<section class="hero">
Hero Space
</section>
<section>
<article id="content">Actual Content</article>
<aside id="right-column">Right Column</aside>
</section>
</div>
</div>
 
<footer>
<p>&copy; Copyright 2010</p>
</footer>
</div>
...
grid.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
.grid-1 { width: 60px; }
.grid-2 { width: 140px; }
.grid-3 { width: 220px; }
.grid-4 { width: 300px; }
.grid-5 { width: 380px; }
.grid-6 { width: 460px; }
.grid-7 { width: 540px; }
.grid-8 { width: 620px; }
.grid-9 { width: 700px; }
.grid-10 { width: 780px; }
.grid-11 { width: 860px; }
.grid-12 { width: 940px; }
 
.page { width: 960px; margin: 0 auto; }
.row { width: auto; margin: 0 -10px; }
.page > .row { margin: 0; }
.column { margin: 0 10px; float: left; }
.ie6 .column { display: inline; }
.box { margin-bottom: 20px; }
grid.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
...
<div id="container" class="page">
<header class="row">
<h1>Header</h1>
<nav></nav>
</header>
 
<div id="main" class="row">
<div id="left-column" class="column grid-3">Left Column</div>
<div id="main-column" class="column grid-9">
<section class="hero row">
Hero Space
</section>
<section class="row">
<article id="content" class="column grid-6">Actual Content</article>
<aside id="right-column" class="column grid-3">Right Column</aside>
</section>
</div>
</div>
 
<footer class="row">
<p>&copy; Copyright 2010</p>
</footer>
</div>
...
grid.scss
SCSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69
// Configuration
$column-width: 60px;
$gutter-width: 20px;
$columns: 12;
 
// Column Widths
@mixin grid($i) {
width: $column-width * $i + $gutter-width * ($i - 1);
}
@mixin grid-plus($i, $plus) {
width: $column-width * $i + $gutter-width * ($i - 1) + $plus;
}
@for $i from 1 through $columns {
.grid-#{$i} { @include grid($i); }
}
 
// Page, Row, Column
@mixin grid-page($i: $columns) {
@extend .clearfix;
width: $column-width * $i + $gutter-width * $i;
margin: 0 auto;
}
@mixin grid-row($page: false) {
@extend .clearfix;
width: auto;
// rows directly inside a page don't need the negative margin
@if $page {
margin: 0 0;
} @else {
margin: 0 (-$gutter-width / 2);
}
}
@mixin grid-column($i: false) {
margin: 0 ($gutter-width / 2);
float: left;
.ie6 & { display: inline; }
@if $i {
@include grid($i);
}
}
@mixin grid-column-empty($i: 1, $position: after) {
$margin: $column-width * $i + $gutter-width * $i + ($gutter-width / 2);
@if $position == after {
margin-right: $margin;
} @else {
margin-left: $margin;
}
}
 
.page {
@include grid-page;
}
.row {
@include grid-row;
}
.page > .row {
margin: 0;
}
.column {
@include grid-column;
}
 
// Box
.box {
margin-bottom: $gutter-width;
}
layout.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
#container { width: 960px; margin: 0 auto; }
 
#container > header, #main, #container > footer { width: auto; margin: 0 0; }
 
#left-column, #right-column { margin: 0 10px; float: left; width: 220px; }
.ie6 #left-column, .ie6 #right-column { display: inline; }
 
#main-column { margin: 0 10px; float: left; width: 700px; }
.ie6 #main-column { display: inline; }
#main-column > section { width: auto; margin: 0 -10px; }
 
#content { margin: 0 10px; float: left; width: 460px; }
.ie6 #content { display: inline; }
 
.clearfix, .page, .row, #container, #container > header, #main, #container > footer, #main > section { *zoom: 1; }
.clearfix:after, .page:after, .row:after, #container:after, #container > header:after, #main:after, #container > footer:after, #main > section:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; }
layout.scss
SCSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
// establishes page width and centers
#container {
@include grid-page;
}
 
// main page sections
#container > header, #main, #container > footer {
@include grid-row(true); //true indicates a row is directly inside a page
}
 
#left-column, #right-column {
@include grid-column(3); //3 columns wide
}
#main-column {
@include grid-column(9); //9 columns wide
// sections in the main column are rows
> section {
@include grid-row;
}
}
#content {
@include grid-column(6); //6 columns wide
}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.