Skip to content

Instantly share code, notes, and snippets.

@jmblog
Created May 18, 2011 06:57
Show Gist options
  • Save jmblog/978107 to your computer and use it in GitHub Desktop.
Save jmblog/978107 to your computer and use it in GitHub Desktop.
960gs.scss
/*-----------------------------------------------------
960 Grid System ~ Core CSS.
Learn more ~ http://960.gs/
Licensed under GPL and MIT.
-------------------------------------------------------*/
/* Grid Settings
---------------------------*/
// 12-column grid
$columns: 12; // Number of columns
$col_width: 60px; // Column width
$gutter: 20px; // Gutter width
// 16-column grid
//$columns: 16;
//$col_width: 40px;
//$gutter: 20px;
// 24-column grid
//$columns: 24;
//$col_width: 30px;
//$gutter: 10px;
$cell_width: $col_width + $gutter;
body {
min-width: 960px;
}
/* `Containers
----------------------------------------------------------------------------------------------------*/
@mixin grid_container {
margin-left: auto;
margin-right: auto;
width: 960px;
}
/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/
@mixin alpha {
margin-left: 0;
}
@mixin omega {
margin-right: 0;
}
/* `Grid >> Columns
----------------------------------------------------------------------------------------------------*/
@mixin grid($i) {
display: inline;
float: left;
margin-left: $gutter / 2;
margin-right: $gutter / 2;
width: $col_width * $i + $gutter * ($i - 1);
}
/* `Prefix Extra Space
----------------------------------------------------------------------------------------------------*/
@mixin prefix($i) {
padding-left: $cell_width * $i
}
/* `Suffix Extra Space
----------------------------------------------------------------------------------------------------*/
@mixin suffix($i) {
padding-right: $cell_width * $i;
}
/* `Push Space
----------------------------------------------------------------------------------------------------*/
@mixin push($i) {
position: relative;
left: $cell_width * $i;
}
/* `Pull Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
@mixin pull($i) {
position: relative;
left: 0 - ($cell_width * $i);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment