Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

159 lines (141 sloc) 4.926 kB
//** Susy Grid **//
// Your basic settings for the grid.
// Override these in base.sass to customize your site.
$total-cols: 12 !default;
$col-width: 4em !default;
$gutter-width: 1em !default;
$side-gutter-width: $gutter-width !default;
// Document direction is the first direction for reading the document.
// Default is left for LTR documents.
$document-direction: left !default;
// Susy will set your outer shell based on the variables above.
$container-width: container($total-cols, $col-width, $gutter-width, $side-gutter-width);
// A BiDi document might load LTR and RTL stylesheets, which requires extra
// resets.
$bidi: false !default;
// Resets both directions of padding or margin.
@mixin bidi-reset($property: margin) {
#{$property}: {
left: 0;
right: 0;
// Set +container() on the outer grid-containing element(s).
@mixin container($align: false) {
// clear all floated columns
@include pie-clearfix;
@if $align {
@warn "the '$align' argument is deprecated because it really isn't that usefull.";
// use auto horizontal margins to center your page in the body
margin: {
left: auto;
right: auto;
// set the page width based on column settings
width: $container-width;
// never exceed 100% of the browser window (no side-scrolling)
max-width: 100%;
// Set +columns() on any column element, even nested ones.
// The first agument [required] is the number of columns to span.
// The second argument is the context (columns spanned by parent).
// - Context is required on any nested elements.
// - Context MUST NOT be declared on a top-level element.
// By default a grid-column is floated left with a right gutter.
// - Override those with +float("right"), +alpha or +omega
@mixin columns($n, $context: false, $first: $document-direction) {
@if $bidi and $context {
@include bidi-reset;
// the column is floated left
@include float($first);
// the width of the column is set as a percentage of the context
width: columns($n, $context);
// the right gutter is added as a percentage of the context
margin-#{opposite-position($first)}: gutter($context);
// Set +un-column to reset a column element to default block behavior
@mixin un-column($first: $document-direction) {
@if $bidi {
@include bidi-reset;
float: none;
display: block;
width: auto;
margin-#{opposite-position($first)}: auto;
// Set +prefix() on any element to add empty colums as padding
// before or after.
@mixin prefix($n, $context: false, $first: $document-direction) {
@if $bidi {
@include bidi-reset(padding);
padding-#{$first}: columns($n, $context) + gutter($context);
@mixin suffix($n, $context: false, $first: $document-direction) {
@if $bidi {
@include bidi-reset(padding);
padding-#{opposite-position($first)}: columns($n, $context) + gutter($context);
// Set as a shortcut for both prefix and suffix.
@mixin pad($p: false, $s: false, $c: false) {
@if $p {
@include prefix($p, $c);
@if $s {
@include suffix($s, $c);
// Set +alpha on any element spanning the first column in non-nested
// context to take side-gutters into account. Recommended that you pass
// the actual nested contexts (when nested) rather than a true/false
// argument for the sake of consistency. Effect is the same.
@mixin alpha($nested: false, $first: $document-direction) {
@if $bidi {
@include bidi-reset;
@if not $nested {
margin-#{$first}: side-gutter();
} @else {
@warn "The alpha mixin is not needed in a nested context";
// Sets the direction that +omega elements are floated
// - Override $omega_float globally or set +float locally to change
$omega-float: right !default;
// This is going away
@mixin ie-omega($dir: $omega-float, $hack: false) {
@warn "the 'ie-omega' mixin is deprecated along with the $hacks constant";
// Set +omega() on the last element of a row, in order to take side-gutters
// and the page edge into account. Set the $nested argument for nested
// columns. It is recommended that you pass the actual nested context when
// nested, rather than a true/false argument, for the sake of consistency.
// Effect is the same.
@mixin omega($nested: false, $first: $document-direction) {
@if $bidi {
@include bidi-reset;
@include float($omega-float);
@if $nested {
margin-#{opposite-position($first)}: 0;
} @else {
margin-#{opposite-position($first)}: side-gutter();
@if $omega-float != $document-direction {
#margin-#{$first}: - $gutter-width;
} @else {
#margin-#{opposite-position($first)}: - $gutter-width;
// Set +full() on an element that will span it's entire context.
// There is no need for +columns, +alpha or +omega on a +full element.
@mixin full($nested: false) {
clear: both;
@if not $nested {
margin-right: side-gutter();
margin-left: side-gutter();
Jump to Line
Something went wrong with that request. Please try again.