Skip to content

Instantly share code, notes, and snippets.

@Sulcalibur
Created September 5, 2012 22:01
Show Gist options
  • Save Sulcalibur/3645814 to your computer and use it in GitHub Desktop.
Save Sulcalibur/3645814 to your computer and use it in GitHub Desktop.
SASS: Susy Grid System
@import "susy";
// @include normalize;
// @import "partials/variables";
// @import "partials/mixins";
// @import "sassy-buttons";
// @import "partials/typography";
// Includes (Make sure the order is correct)
// Font Sizes
$relative-font-sizing : true;
$base-font-size : 14px;
$base-line-height : 20px;
// Grid Setup
$total-columns : 12; // a 12-column grid
$column-width : 3.90476190476191em; // each column is 4em wide
$gutter-width : 2em; // 2em gutters between columns
$grid-padding : $gutter-width/2; // grid-padding half the gutter-width
//$break-1 : 6; //
//$break-2 : 8; // iPad (Portrait) 728
//$break-3 : 12; //
// -------------------------------------------------------------------------------------------------
// font-size : 14px; (1em)
// line-height : 20px;
// -------------------------------------------------------------------------------------------------
// Device Width | Total Columns | Column Width | Gutter Width | Grid Padding
// -------------------------------------------------------------------------------------------------
//
// 320 4 66px / 4.71428571429em 7px / 0.5em 14px / 1em
//
// 480 4 106px / 7.57142857143em 7px / 0.5em 14px / 1em
//
// 600 4 122px / 8.71428571429em 14px / 1em 28px / 2em
//
// 768 6 114px / 8.14285714286em 14px / 1em 28px / 2em
//
// 992 12 54.67px / 3.90476190476191em 14px / 1em 28px / 2em
//
// 1382 12 87.17px / 6.22619047619048em 14px / 1em 28px / 2em
//
// 1600 12 91.33px / 6.52380952380952em 21px / 1.5em 42px / 3em
// -------------------------------------------------------------------------------------------------
#container {
@include susy-grid-background;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment