Skip to content

Instantly share code, notes, and snippets.

@ykhs
Created April 18, 2011 15:01
Show Gist options
  • Save ykhs/925516 to your computer and use it in GitHub Desktop.
Save ykhs/925516 to your computer and use it in GitHub Desktop.
960 Grid System Using Sass.
/*!
Variable Grid System.
Learn more ~ http://www.spry-soft.com/grids/
Based on 960 Grid System - http://960.gs/
Licensed under GPL and MIT.
*/
// Containers
//----------------------------------------------------------------------------------------------------
@mixin grid-container($contentWidth, $gutterWidth) {
margin-left: auto;
margin-right: auto;
width: $contentWidth + $gutterWidth;
}
// Grid >> Global
//----------------------------------------------------------------------------------------------------
@mixin grid-base($gutterWidth) {
display:inline;
float: left;
position: relative;
margin-left: $gutterWidth / 2;
margin-right: $gutterWidth / 2;
}
// Grid >> Children (Alpha ~ First, Omega ~ Last)
//----------------------------------------------------------------------------------------------------
@mixin grid-alpha {
margin-left: 0;
}
@mixin grid-omega {
margin-right: 0;
}
// Grid >> Columns
//----------------------------------------------------------------------------------------------------
@mixin grid($span, $contentWidth, $numberOfColumns, $gutterWidth) {
@include grid-base($gutterWidth);
width: ($contentWidth + $gutterWidth - $gutterWidth * $numberOfColumns) / $numberOfColumns * $span + ($span - 1) * $gutterWidth ;
}
/*!
Variable Grid System.
Learn more ~ http://www.spry-soft.com/grids/
Based on 960 Grid System - http://960.gs/
Licensed under GPL and MIT.
*/
.wrap {
margin-left: auto;
margin-right: auto;
width: 960px;
}
.box1 {
display: inline;
float: left;
position: relative;
margin-left: 10px;
margin-right: 10px;
width: 60px;
}
.box2 {
display: inline;
float: left;
position: relative;
margin-left: 10px;
margin-right: 10px;
width: 140px;
}
.box3 {
display: inline;
float: left;
position: relative;
margin-left: 10px;
margin-right: 10px;
width: 220px;
}
.box4 {
display: inline;
float: left;
position: relative;
margin-left: 10px;
margin-right: 10px;
width: 300px;
}
.box5 {
display: inline;
float: left;
position: relative;
margin-left: 10px;
margin-right: 10px;
width: 380px;
}
.box6 {
display: inline;
float: left;
position: relative;
margin-left: 10px;
margin-right: 10px;
width: 460px;
}
.box7 {
display: inline;
float: left;
position: relative;
margin-left: 10px;
margin-right: 10px;
width: 540px;
}
.box8 {
display: inline;
float: left;
position: relative;
margin-left: 10px;
margin-right: 10px;
width: 620px;
}
.box9 {
display: inline;
float: left;
position: relative;
margin-left: 10px;
margin-right: 10px;
width: 700px;
}
.box10 {
display: inline;
float: left;
position: relative;
margin-left: 10px;
margin-right: 10px;
width: 780px;
}
.box11 {
display: inline;
float: left;
position: relative;
margin-left: 10px;
margin-right: 10px;
width: 860px;
}
.box12 {
display: inline;
float: left;
position: relative;
margin-left: 10px;
margin-right: 10px;
width: 940px;
}
@import "grid";
$contentWidth: 940px;
$numberOfColumns: 12;
$gutterWidth: 20px;
.wrap {
@include grid-container($contentWidth, $gutterWidth);
}
.box1 {
@include grid(1, $contentWidth, $numberOfColumns, $gutterWidth);
}
.box2 {
@include grid(2, $contentWidth, $numberOfColumns, $gutterWidth);
}
.box3 {
@include grid(3, $contentWidth, $numberOfColumns, $gutterWidth);
}
.box4 {
@include grid(4, $contentWidth, $numberOfColumns, $gutterWidth);
}
.box5 {
@include grid(5, $contentWidth, $numberOfColumns, $gutterWidth);
}
.box6 {
@include grid(6, $contentWidth, $numberOfColumns, $gutterWidth);
}
.box7 {
@include grid(7, $contentWidth, $numberOfColumns, $gutterWidth);
}
.box8 {
@include grid(8, $contentWidth, $numberOfColumns, $gutterWidth);
}
.box9 {
@include grid(9, $contentWidth, $numberOfColumns, $gutterWidth);
}
.box10 {
@include grid(10, $contentWidth, $numberOfColumns, $gutterWidth);
}
.box11 {
@include grid(11, $contentWidth, $numberOfColumns, $gutterWidth);
}
.box12 {
@include grid(12, $contentWidth, $numberOfColumns, $gutterWidth);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment