v1.0.9~dfsg/0000755000000000000000000000000012160425301011443 5ustar rootrootv1.0.9~dfsg/sass/0000755000000000000000000000000012160425301012414 5ustar rootrootv1.0.9~dfsg/sass/_susy.scss0000644000000000000000000000054712160425301014461 0ustar rootroot// --------------------------------------------------------------------------- // Partials // temporary @import "susy/support"; @import "susy/units"; // permanent @import "susy/settings"; @import "susy/functions"; @import "susy/grid"; @import "susy/isolation"; @import "susy/padding"; @import "susy/margin"; @import "susy/media"; @import "susy/background"; v1.0.9~dfsg/sass/susy/0000755000000000000000000000000012160425301013417 5ustar rootrootv1.0.9~dfsg/sass/susy/_functions.scss0000644000000000000000000002604212160425301016467 0ustar rootroot// --------------------------------------------------------------------------- // Imports // We need access to some basic font settings for handling media-queries. @import "compass/typography/vertical_rhythm"; // For now, we also need this... $browser-default-font-size-px : 16px; $browser-default-font-size-percent : 100%; $browser-default-font-size-pt : 12pt; $rem-with-px-fallback : true !default; // --------------------------------------------------------------------------- // Sass list Functions // Return a list with specific items removed // // filter($list, $target) // - $list : The list to filter. // - $target : An item to be removed from the list. @function filter($list, $target) { $clean: compact(); @if index($list, $target) { @each $item in $list { $clean: if($item == $target, $clean, append($clean, $item)); } } @else { $clean: $list; } @return $clean; } // --------------------------------------------------------------------------- // Don't use static output when it will break things // Switch element-level output to fluid, when container-width is wrong for static // // fix-static-misalignment([$style, $width]) // - $style: $container-style. // - $width: $container-width. @function fix-static-misalignment( $style: $container-style, $width: $container-width ) { @if $container-width and $container-width != container-outer-width($width: false) { $style: fluid; } @return $style; } // --------------------------------------------------------------------------- // Grid Functions // Returns the full width of a grid based on your grid settings. // // $columns : The number of columns to get width for. @function columns-width( $columns : $total-columns ) { @if round($columns) != $columns { @warn "Susy works best with integer column-spans. For partial-columns, you may need to finesse the math by hand using functions directly."; } @return ($columns * $column-width) + (if($columns >= 1, ceil($columns - 1), 0) * $gutter-width); } // Return the grid width after adding or subtracting grid padding // // $width : the width of the grid without padding; // $operation : ( add | subtract ) if padding should be added or subtracted; @function handle-grid-padding( $width, $operation : subtract ) { $pad: $grid-padding*2; @if comparable($width, $grid-padding) { $width: if($operation == subtract, $width - $pad, $width + $pad); } @else { @warn "$grid-padding must be set in units comparable to the container width."; } @return $width; } // Return the full outer width of a Container element. // // $columns : The number of columns in the Grid Layout. @function container-outer-width( $columns : $total-columns, $width : $container-width ) { $outerwidth: if($width, $width, columns-width($columns)); @if $width { @if not $border-box-sizing { $outerwidth: handle-grid-padding($outerwidth, subtract); } } @else { @if $border-box-sizing { $outerwidth: handle-grid-padding($outerwidth, add); } } @return $outerwidth; } // Return the percentage width of a single column in a given 'context'. // // $context : The grid context in columns, if nested. // $style : The container style to use. @function column( $context : $total-columns, $style : fix-static-misalignment() ) { @return if($style == static, $column-width, relative-width($column-width, $context)); } // Return the percentage width of multiple 'columns' in a given 'context'. // // $columns : The number of columns to get relative width for. // $context : The grid context in columns, if nested. // $style : The container style to use. @function columns( $columns, $context : $total-columns, $style : fix-static-misalignment() ) { @return if($style == static, columns-width($columns), relative-width(columns-width($columns), $context)); } // Return the percentage width of a single gutter in a given 'context'. // // $context : The grid context in columns, if nested. // $style : The container style to use. @function gutter( $context : $total-columns, $style : fix-static-misalignment() ) { @return if($style == static, $gutter-width, relative-width($gutter-width, $context)); } // Return the percentage width of a given value in a given 'context'. // // $width : Any given width value. // $context : The grid context in columns, if nested. @function relative-width( $width, $context : $total-columns ) { @return percentage($width / columns-width($context)); } // Return the total space occupied by multiple columns and associated gutters. // Useful for adding padding or margins (prefix, suffix, push, pull, etc.) // // $columns : The number of columns to get relative space for. // $context : The grid context in columns, if nested. // $style : The container style to use. @function space( $columns, $context : $total-columns, $style : fix-static-misalignment() ) { @return columns($columns, $context, $style) + if($columns >= 1, gutter($context, $style), 0); } // Accept a list including column-count and (optional) position. // Return either the column count or the position alone. // // $columns : the list to split and interprate. // $request : The value to return, either 'columns' or 'position'. @function split-columns-value( $columns, $request : columns ) { $pos : false; $cols : false; @each $var in $columns { @if (type-of($var) == 'string') { $pos: $var; } @else { @if (type-of($var) == 'number') and (unitless($var)) { $cols: $var; } @else { @warn '"#{$var}" is not a valid part of "$columns: #{$columns}" in the columns() mixin.'; } } } @if $request == 'columns' { @return $cols; } @else { @if $request == 'position' { @return $pos; } @else { @warn '"#{$request}"" is not a valid value for $request'; } } } // Accept nth-selector variables, and format them as a valid CSS3 selector. // // $n : [first | only | last | ] // $selector : [child | last-child | of-type | last-of-type ] @function format-nth( $n : last, $selector : child ) { @if ($n == 'last') or ($n =='first') or ($n =='only') { $selector: '#{$n}-#{$selector}'; } @else { $selector: 'nth-#{$selector}(#{$n})'; } @return $selector; } // --------------------------------------------------------------------------- // Media Functions // Return an em value adjusted to match the browser default font size. // Note: This only works if actual sizes are set relative to browser defaults. // // $ems : The initial value to be converted. // $font-size : The current font-size in. @function base-ems( $ems, $font-size: $base-font-size ){ $font-size : if(unit($ems) == 'rem', $base-font-size, $font-size); $unit : unit($font-size); $mult : $ems / ($ems * 0 + 1); @if $unit == 'px' { @return $font-size / $browser-default-font-size-px * $mult * 1em; } @else if $unit == '%' { @return $font-size / $browser-default-font-size-percent * $mult * 1em; } @else if $unit == 'em' { @return $font-size / 1em * $mult * 1em; } @else if $unit == 'pt' { @return $font-size / $browser-default-font-size-pt * $mult * 1em; } @else { @warn 'Variable $base-font-size does not have a valid font unit. Valid units for fonts in CSS are px, pt, em, and %.'; } } // This name will be deprecated... @function absolute-ems($ems, $font-size: $base-font-size){ @return base-ems($ems, $font-size); } // Return a length, after any em-values have been sent through absolute-ems(). // // $length : The length value to be checked and adjusted if necessary. // $font-size : The current font-size in px. @function fix-ems( $length, $font-size: $base-font-size ){ @if $length { @if (unit($length) == 'em') or (unit($length) == 'rem') { $length: absolute-ems($length,$font-size); } } @return $length; } // Sort a list of arguments into "$min $layout $max $ie" order, and return the list. // // $media-layout : a list of values [$min $layout $max $ie] including... // : - one unitless number (columns in a layout) // : - two optional lengths (min and max-width media-query breakpoints). // : - one optional boolean or string to trigger fallback support for IE. // $font-size : [optional] The base font-size of your layout, if you are using ems. // : - defaults to $base-font-size @function medialayout( $media-layout, $font-size: $base-font-size ) { $media : false; $min : false; $layout : false; $max : false; $ie : false; $has-layout : false; @each $val in $media-layout { @if (type-of($val) == "number") { @if unitless($val) { $layout : $val; $has-layout : true; } @else { @if ($has-layout) and (not $media) { $max: $val; } @else { @if $media { $media: join($media,$val); } @else { $media: $val; } } } } @else { $ie: $val; } } @if (length($media) > 0) { @if (length($media) == 1) { $min: nth($media,1); } @else { $min: nth($media,1); $max: nth($media,2); @if comparable($min, $max) { @if ($min > $max) { $max: nth($media,1); $min: nth($media,2); } } @else { @warn "Can't compare incompatible units. Using #{$min} for min-width, and #{$max} for max-width"; } @if (length($media) > 2) { @warn "You can only send two lengths: a min-width and an (optional) max-width. You sent #{length($media)}: #{$media}"; } } } // media-queries must be set in ems relative to the browser default // rather than the font-size set in CSS. $min: fix-ems($min,$font-size); $max: fix-ems($max,$font-size); @return $min $layout $max $ie; } // Return the nearest layout (column-count) above a given breakpoint. // // $min : The min-width media-query breakpoint above which to establish a new layout. @function get-layout ( $min ) { $columns : 1; $layout-width : container-outer-width($columns); $return : false; $min : fix-ems($min); @if comparable($min, $layout-width) { @while $min >= $layout-width { $columns : $columns + 1; $layout-width : container-outer-width($columns); } $return : $columns; } @return $return; } // Check to see if a given $media-layout list is simply the default. // // $media-layout : a list of values including - // : One unitless number (columns in a layout) // : Two optional lengths (min and max-width media-query breakpoints). // : One optional boolean or string to trigger fallback support for IE. @function is-default-layout( $media-layout ) { $media-layout : medialayout($media-layout); $min : nth($media-layout,1); $layout-cols : nth($media-layout,2); $max : nth($media-layout,3); @if $min or $max { @return false; } @else { @return if($layout-cols == $total-columns,true,false); } } v1.0.9~dfsg/sass/susy/_units.scss0000644000000000000000000001330312160425301015615 0ustar rootroot// @private Default font-size for all browsers $browser-default-font-size: 16px; // Base font size in pixels, if not already defined. // Should be the same as the font-size of the html element. $base-font-size: 16px !default; // Whether to output fallback values in px when outputting rems. $rem-with-px-fallback: true !default; // Convert any CSS or value to any another. // // @param $length // A css or value // // @param $to-unit // String matching a css unit keyword, e.g. 'em', '%', etc. // // @param $from-context // When converting from relative units, the absolute length (in px) to // which $length refers (e.g. for $lengths in em units, would normally be the // font-size of the current element). // // @param $to-context // For converting to relative units, the absolute length in px to which the // output value will refer. Defaults to the same as $from-context, since it is // rarely needed. @function convert-length( $length, $to-unit, $from-context: $base-font-size, $to-context: $from-context ) { $from-unit: unit($length); // Optimize for cases where `from` and `to` units are accidentally the same. @if $from-unit == $to-unit { @return $length; } // Context values must be in px so we can determine a conversion ratio for // relative units. @if unit($from-context) != 'px' { @warn "Paremeter $from-context must resolve to a value in pixel units."; } @if unit($to-context) != 'px' { @warn "Parameter $to-context must resolve to a value in pixel units."; } // Convert input length to pixels $px-length: $length; @if $from-unit != 'px' { // Convert relative units using the from-context parameter. @if $from-unit == 'em' { $px-length: $length * $from-context / 1em } @else if $from-unit == 'rem' { $px-length: $length * $base-font-size / 1rem } @else if $from-unit == '%' { $px-length: $length * $from-context / 100% } @else if $from-unit == 'ex' { $px-length: $length * $from-context / 2ex } // Convert absolute units using Sass' conversion table. @else if $from-unit == 'in' or $from-unit == 'mm' or $from-unit == 'cm' or $from-unit == 'pt' or $from-unit == 'pc' { $px-length: 0px + $length } // Certain units can't be converted. @else if $from-unit == 'ch' or $from-unit == 'vw' or $from-unit == 'vh' or $from-unit == 'vmin' { @warn "#{$from-unit} units can't be reliably converted; Returning original value."; @return $length; } @else { @warn "#{$from-unit} is an unknown length unit. Returning original value."; @return $length; } } // Convert length in pixels to the output unit $output-length: $px-length; @if $to-unit != 'px' { // Relative units @if $to-unit == 'em' { $output-length: $px-length * 1em / $to-context } @else if $to-unit == 'rem' { $output-length: $px-length * 1rem / $base-font-size } @else if $to-unit == '%' { $output-length: $px-length * 100% / $to-context } @else if $to-unit == 'ex' { $output-length: $px-length * 2ex / $to-context } // Absolute units @else if $to-unit == 'in' { $output-length: 0in + $px-length } @else if $to-unit == 'mm' { $output-length: 0mm + $px-length } @else if $to-unit == 'cm' { $output-length: 0cm + $px-length } @else if $to-unit == 'pt' { $output-length: 0pt + $px-length } @else if $to-unit == 'pc' { $output-length: 0pc + $px-length } // Non-convertible units @else if $to-unit == 'ch' or $to-unit == 'vw' or $to-unit == 'vh' or $to-unit == 'vmin' { @warn "#{$to-unit} units can't be reliably converted; Returning original value."; @return $length; } @else { @warn "#{$to-unit} is an unknown length unit. Returning original value."; @return $length; } } @return $output-length; } // Output a given style rule containing rem values along with an (optional) // fallback rule for older browsers (with rem values converted to px). // // @param $property // The css property name. // // @param $values // The value (or space-separated list of values) for the property. // // @param $use-px-fallback // [ true | false ] // @mixin rem($property, $values, $use-px-fallback: $rem-with-px-fallback) { // Create a couple of empty lists as output buffers. $px-values: (); $rem-values: (); // Loop through the $values list @each $value in $values { // For each property value, if it's in rem or px, derive both rem and // px values for it and add those to the end of the appropriate buffer. // Ensure all pixel values are rounded to the nearest pixel. @if type-of($value) == number and not unitless($value) and (unit($value) == px or unit($value) == rem) { @if unit($value) == px { $px-values: join($px-values, round($value)); $rem-values: join($rem-values, convert-length($value, rem)); } @else { $px-values: join($px-values, round(convert-length($value, px))); $rem-values: join($rem-values, $value); } } @else { $px-values: join($px-values, $value); $rem-values: join($rem-values, $value); } } // Use pixel fallback for browsers that don't understand rem units. @if $use-px-fallback { #{$property}: $px-values; } // Use rem values for everyone else (overrides pixel values). #{$property}: $rem-values; } @mixin if-rem($property, $values, $use-px-fallback: $rem-with-px-fallback) { $has-rem: false; @each $value in $values { $has-rem: if(unit($value) == 'rem', true, $has-rem); } @if $has-rem { @include rem($property, $values, $use-px-fallback); } @else { #{$property}: $values; } } v1.0.9~dfsg/sass/susy/_settings.scss0000644000000000000000000000427112160425301016317 0ustar rootroot// --------------------------------------------------------------------------- // Susy Settings // The total number of columns in the grid $total-columns : 12 !default; // The width of columns and gutters. // These must all be set with the comparable units. $column-width : 4em !default; $gutter-width : 1em !default; // Padding on the left and right of a Grid Container. $grid-padding : $gutter-width !default; // --------------------------------------------------------------------------- // Advanced Settings // From Direction: // Controls for right-to-left or bi-directional sites. $from-direction : left !default; // Omega Float Direction: // The direction that +omega elements are floated by deafult. $omega-float : opposite-position($from-direction) !default; // Container Width: // Override the total width of your grid, using any length (50em, 75%, etc.) $container-width : false !default; // Container Style: // 'magic' - Static (fixed or elastic) when there's enough space, // fluid when there isn't. This is the SUSY MAGIC SAUCE(TM). // 'static' - Forces the grid container to remain static at all times. // 'fluid' - Forces the grid to remain fluid at all times. // (this will overrule any static $container-width settings) $container-style : magic !default; // Border-Box Sizing // Adjust the grid math appropriately for box-sizing: border-box; // Warning: This does not actually apply the new box model! // In most cases you can ignore this setting, // and simply apply the border-box-sizing mixin. $border-box-sizing : false !default; // --------------------------------------------------------------------------- // IE Settings // When you are using a seperate IE stylesheet, // you can use these settings to control the output of at-breakpoint. // By default, at-breakpoint will output media-queries as well as // any defined ie-fallback classes. $breakpoint-media-output : true !default; $breakpoint-ie-output : true !default; // Danger Zone! Only set as 'true' in IE-specific style sheets. $breakpoint-raw-output : false !default; v1.0.9~dfsg/sass/susy/_margin.scss0000644000000000000000000000612412160425301015733 0ustar rootroot// --------------------------------------------------------------------------- // Margin Mixins // Apply 'columns' margin before an element to push it along the grid. // // $columns : The number of columns to span. // $context : [optional] The context (columns spanned by parent). // : Context is required on any nested elements. // : Context MUST NOT be declared on a root element. // $from : The start direction of your layout (e.g. 'left' for ltr languages) // $style : The container style to use. @mixin pre( $columns, $context : $total-columns, $from : $from-direction, $style : fix-static-misalignment() ) { $from : unquote($from); margin-#{$from}: space($columns, $context, $style); } // 'push' is a synonymn for 'pre' @mixin push( $columns, $context : $total-columns, $from : $from-direction, $style : fix-static-misalignment() ) { $from : unquote($from); @include pre($columns, $context, $from, $style); } // Apply negative 'columns' margin before an element to pull it along the grid. // // $columns : The number of columns to span. // $context : [optional] The context (columns spanned by parent). // : Context is required on any nested elements. // : Context MUST NOT be declared on a root element. // $from : The start direction of your layout (e.g. 'left' for ltr languages) // $style : The container style to use. @mixin pull( $columns, $context : $total-columns, $from : $from-direction, $style : fix-static-misalignment() ) { $from : unquote($from); margin-#{$from}: 0 - space($columns, $context, $style); } // Apply 'columns' margin after an element to contain it in a grid. // // $columns : The number of columns to span. // $context : [optional] The context (columns spanned by parent). // : Context is required on any nested elements. // : Context MUST NOT be declared on a root element. // $from : The start direction of your layout (e.g. 'left' for ltr languages) // $style : The container style to use. @mixin post( $columns, $context : $total-columns, $from : $from-direction, $style : fix-static-misalignment() ) { $from : unquote($from); $to : opposite-position($from); margin-#{$to}: space($columns, $context, $style); } // Apply 'columns' before and/or after an element to contain it on a grid. // // $pre : The number of columns to add as margin before. // $post : The number of columns to add as margin after. // $context : [optional] The context (columns spanned by parent). // : Context is required on any nested elements. // : Context MUST NOT be declared on a root element. // $from : The start direction of your layout (e.g. 'left' for ltr languages) // $style : The container style to use. @mixin squish( $pre : false, $post : false, $context : $total-columns, $from : $from-direction, $style : fix-static-misalignment() ) { $from : unquote($from); @if $pre { @include pre($pre, $context, $from, $style) } @if $post { @include post($post, $context, $from, $style) } } v1.0.9~dfsg/sass/susy/_media.scss0000644000000000000000000000740712160425301015542 0ustar rootroot// --------------------------------------------------------------------------- // Media Mixins // Create a new layout context for (@content) descendants. // // $layout-cols : a (unitless) number of columns to use for this layout. @mixin layout( $layout-cols ) { // store default $total-columns setting for later, then change it. $default-layout : $total-columns; $total-columns : $layout-cols; // apply children in this new layout context. @content; // return to default $total-columns setting. $total-columns : $default-layout; } // Nest a block of code inside a new media-query and layout context. // // $media-layout : a list of values [$min $layout $max $ie] including... // : - one unitless number (columns in a layout) // : - two optional lengths (min and max-width media-query breakpoints). // : - one optional boolean or string to trigger fallback support for IE. // $font-size : [optional] The base font-size of your layout, if you are using ems. // : - defaults to $base-font-size @mixin at-breakpoint( $media-layout, $font-size: $base-font-size ) { $media-layout : medialayout($media-layout,$font-size); $min : nth($media-layout,1); $layout : nth($media-layout,2); $max : nth($media-layout,3); $ie : nth($media-layout,4); @if (not $breakpoint-media-output) and (not $breakpoint-ie-output) and (not $breakpoint-raw-output) { @warn "Either $breakpoint-media-output, $breakpoint-ie-output, or $breakpoint-raw-output must be true for at-breakpoint to work."; } // We need to have either a min-width breakpoint or a layout in order to proceed. @if $min or $layout or $max { // If we don't have a layout, we create one based on the min-width. @if not $layout { $layout: get-layout($min); } // If we still don't have a layout, we have a problem. @if $layout { // Set our new layout context. @include layout($layout) { @if $breakpoint-media-output { // Capture current state of ie support and set new $atbreak-legacy-ie-matrix: capture-legacy-ie-matrix(); @include set-legacy-ie-support; @if $min and $max { // Both $min and $max @media (min-width: $min) and (max-width: $max) { @content; } } @else { @if (not $min) and (not $max) { // Neither $min nor $max: // We can create a breakpoint based on the number of columns in the layout. $min: fix-ems(container-outer-width($width: false)); } @if $min { // Min only: @media (min-width: $min) { @content; } } @else { // Max only: @media (max-width: $max) { @content; } } } // Return legacy-ie support to original @include set-legacy-ie-support($atbreak-legacy-ie-matrix...); } // Set an IE fallback @if $ie and $breakpoint-ie-output { @if (type-of($ie) == 'bool') { $ie: 'lt-ie9'; } .#{$ie} & { $atbreak-experimental-matrix: capture-experimental-matrix(); @include set-experimental-support($ms: true); @content; @include set-experimental-support($atbreak-experimental-matrix...); } } @if $breakpoint-raw-output { @content; } } } @else { @warn "Something went horribly wrong here. Try adjusting your variables."; } } @else { @warn "You need to provide either a valid layout (number of columns) or a valid media-query min-width breakpoint (length)."; } } v1.0.9~dfsg/sass/susy/_support.scss0000644000000000000000000001337312160425301016176 0ustar rootroot// @@@ These helpers only live here until they land in Compass. // --------------------------------------------------------------------------- // Imports @import "compass/support"; // --------------------------------------------------------------------------- // Helpers // A debug tool for checking browser support @mixin debug-support-matrix($experimental: true, $ie: true) { @debug #{'$moz-'}$experimental-support-for-mozilla #{'$webkit-'}$experimental-support-for-webkit #{'$microsoft-'}$experimental-support-for-microsoft #{'$opera-'}$experimental-support-for-opera #{'$khtml-'}$experimental-support-for-khtml; @debug #{'$ie6-'}$legacy-support-for-ie6 #{'$ie7-'}$legacy-support-for-ie7 #{'$ie8-'}$legacy-support-for-ie8; } // Capture the current exerimental support settings @function capture-experimental-matrix() { @return $experimental-support-for-mozilla $experimental-support-for-webkit $experimental-support-for-microsoft $experimental-support-for-opera $experimental-support-for-khtml; } // Capture the current legacy-ie support settings @function capture-legacy-ie-matrix() { @return $legacy-support-for-ie6 $legacy-support-for-ie7 $legacy-support-for-ie8; } // Capture and store support $experimental-matrix: capture-experimental-matrix(); $legacy-ie-matrix: capture-legacy-ie-matrix(); @mixin capture-experimental-matrix { $experimental-matrix: capture-experimental-matrix(); } @mixin capture-legacy-ie-matrix { $legacy-ie-matrix: capture-legacy-ie-matrix(); } @mixin capture-support-matrix { @include capture-experimental-matrix; @include capture-legacy-ie-matrix; } // Change the experimental-support settings in specific contexts. @mixin set-experimental-support( $moz : false, $webkit : false, $ms : false, $o : false, $khtml : false ) { $experimental-support-for-mozilla : $moz; $experimental-support-for-webkit : $webkit; $experimental-support-for-microsoft : $ms; $experimental-support-for-opera : $o; $experimental-support-for-khtml : $khtml; } @mixin capture-and-set-experimental( $moz : false, $webkit : false, $ms : false, $o : false, $khtml : false ) { @include capture-experimental-matrix; @include set-experimental-support($moz, $webkit, $ms, $o, $khtml); } @mixin capture-and-adjust-experimental( $moz : $experimental-support-for-mozilla, $webkit : $experimental-support-for-webkit, $ms : $experimental-support-for-microsoft, $o : $experimental-support-for-opera, $khtml : $experimental-support-for-khtml ) { @include capture-experimental-matrix; @include set-experimental-support($moz, $webkit, $ms, $o, $khtml); } // Change the legacy-support-for-ie* settings in specific contexts. @mixin set-legacy-ie-support( $ie6: false, $ie7: false, $ie8: false ) { $legacy-support-for-ie6: $ie6; $legacy-support-for-ie7: $ie7; $legacy-support-for-ie8: $ie8; } @mixin capture-and-set-legacy-ie( $ie6: false, $ie7: false, $ie8: false ) { @include capture-legacy-ie-matrix; @include set-legacy-ie-support($ie6, $ie7, $ie8); } @mixin capture-and-adjust-legacy-ie( $ie6: $legacy-support-for-ie6, $ie7: $legacy-support-for-ie7, $ie8: $legacy-support-for-ie8 ) { @include capture-and-set-legacy-ie($ie6, $ie7, $ie8); } // Capture current browser support matrix, and set a new matrix of support. @mixin capture-and-set-support( $moz : false, $webkit : false, $ms : false, $o : false, $khtml : false, $ie6 : false, $ie7 : false, $ie8 : false ) { // Capture the current state @include capture-support-matrix; // Change support settings @include set-experimental-support($moz, $webkit, $ms, $o, $khtml); @include set-legacy-ie-support($ie6, $ie7, $ie8); } // Capture current browser support matrix, and set a new matrix of support. @mixin capture-and-adjust-support( $moz : $experimental-support-for-mozilla, $webkit : $experimental-support-for-webkit, $ms : $experimental-support-for-microsoft, $o : $experimental-support-for-opera, $khtml : $experimental-support-for-khtml, $ie6 : $legacy-support-for-ie6, $ie7 : $legacy-support-for-ie7, $ie8 : $legacy-support-for-ie8 ) { @include capture-and-set-support($moz, $webkit, $ms, $o, $khtml, $ie6, $ie7, $ie8); } // This mixin allows you to change the experimental support settings for // child (@content) styles. @mixin with-only-support-for( $moz : false, $webkit : false, $ms : false, $o : false, $khtml : false, $ie6 : false, $ie7 : false, $ie8 : false ) { // Capture current state $wo-experimental-matrix : capture-experimental-matrix(); $wo-legacy-ie-matrix : capture-legacy-ie-matrix(); // Set new states @include set-experimental-support($moz, $webkit, $ms, $o, $khtml); @include set-legacy-ie-support($ie6, $ie7, $ie8); // Apply styles @content; // Return to original support settings @include set-experimental-support($wo-experimental-matrix...); @include set-legacy-ie-support($wo-legacy-ie-matrix...); } // This mixin is a shortcut for making slight adjustments to browser support // for child (@content) styles @mixin adjust-support-for( $moz : $experimental-support-for-mozilla, $webkit : $experimental-support-for-webkit, $ms : $experimental-support-for-microsoft, $o : $experimental-support-for-opera, $khtml : $experimental-support-for-khtml, $ie6 : $legacy-support-for-ie6, $ie7 : $legacy-support-for-ie7, $ie8 : $legacy-support-for-ie8 ) { @include with-only-support-for($moz, $webkit, $ms, $o, $khtml, $ie6, $ie7, $ie8) { @content; } }v1.0.9~dfsg/sass/susy/_grid.scss0000644000000000000000000002104412160425301015401 0ustar rootroot// --------------------------------------------------------------------------- // Imports @import "compass/utilities/general/clearfix"; @import "compass/css3/box-sizing"; // --------------------------------------------------------------------------- // Border-Box Sizing // Apply the border-box sizing model to all elements // and adjust the grid math appropriately. @mixin border-box-sizing { $border-box-sizing: true; * { @include box-sizing(border-box); } } // --------------------------------------------------------------------------- // Container // Set the width of a container // // $columns : The number of columns in the Grid Layout. @mixin set-container-width( $columns : $total-columns, $style : $container-style ){ $width: container-outer-width($columns); @if $style == 'static' { @include if-rem(width, $width); } @else { @if $style == 'fluid' { @if unit($width) == '%' { @include if-rem(width, $width); } } @else { @include if-rem(max-width, $width); @if $legacy-support-for-ie6 { @if unit($width) == 'rem' { _width: round(convert-length($width, px)); } @else { _width: $width; } } } } } // Set the outer grid-containing element(s). // // $columns : The number of columns in the container. @mixin apply-container( $columns : $total-columns ){ @include pie-clearfix; @include set-container-width($columns); @include if-rem(padding-left, $grid-padding); @include if-rem(padding-right, $grid-padding); margin: { left: auto; right: auto; } } // Set one or more layouts on a grid-containing element at any number of media-query breakpoints. // // $media-layout-1 : [default:$total-columns] A list of values including - // : One unitless number (representing columns in a layout) // : Two optional lengths (representing min and max-width media-query breakpoints). // $media-layout-2 ...-10 : [optional] Same as $media-layout-1 @mixin container( $media-layout-1 : $total-columns, $media-layout-2 : false, $media-layout-3 : false, $media-layout-4 : false, $media-layout-5 : false, $media-layout-6 : false, $media-layout-7 : false, $media-layout-8 : false, $media-layout-9 : false, $media-layout-10 : false ){ $media-layouts : compact($media-layout-2,$media-layout-3,$media-layout-4,$media-layout-5,$media-layout-6,$media-layout-7,$media-layout-8,$media-layout-9,$media-layout-10); @if is-default-layout($media-layout-1) { @include apply-container(); } @else { @include at-breakpoint($media-layout-1) { @include apply-container(); } } @each $ml in $media-layouts { @if $ml { @include at-breakpoint($ml) { @include set-container-width; } } } } // --------------------------------------------------------------------------- // Columns // Create a grid element spanning any number of 'columns' in a grid 'context'. // $columns : The number of columns to span. // $context : [optional] The context (columns spanned by parent). // : Context is required on any nested elements. // : Context MUST NOT be declared on a root element. // $padding : [optional] Padding applied to the inside of individual grid columns. // : Padding is only output if one or two values are specified (e.g. 1em or 10px 20px) // : Padding values are applied only on the horizontal axis in from-to order // $from : The start direction of your layout (e.g. 'left' for ltr languages) // $style : The container style to use. @mixin span-columns( $columns, $context : $total-columns, $padding : false, $from : $from-direction, $style : fix-static-misalignment() ) { $from : unquote($from); $to : opposite-position($from); $pos : split-columns-value($columns,position); $cols : split-columns-value($columns,columns); $pad-from : if($style == static, 0 * $gutter-width, relative-width(0 * $gutter-width, $context)); $pad-to : if($style == static, 0 * $gutter-width, relative-width(0 * $gutter-width, $context)); @if $padding != false { $pad-from : nth($padding, 1); @if length($padding) > 1 { $pad-to: nth($padding, 2); } @else { $pad-to: $pad-from; } $pad-from : if($style == static, $pad-from, relative-width($pad-from, $context)); $pad-to : if($style == static, $pad-to, relative-width($pad-to, $context)); padding-#{$from}: $pad-from; padding-#{$to}: $pad-to; } width: columns($cols, $context, $style) - if($border-box-sizing, 0, $pad-to + $pad-from); @if ($pos == 'omega') { @include omega($from); } @else { float: $from; margin-#{$to}: gutter($context, $style); @if $legacy-support-for-ie6 { display: inline; } } } // Apply to elements spanning the last column, to account for the page edge. // Only needed as an override. Normally 'omega' can just be called by `columns`. // // $from : The start-direction for your document. @mixin omega( $from : $from-direction ) { $from : unquote($from); $to : opposite-position($from); $hack : opposite-position($omega-float); float: $omega-float; margin-#{$to}: 0; @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { *margin-#{$hack}: - $gutter-width; @if $legacy-support-for-ie6 { display: inline; } } } // Shortcut to apply omega to a specific subset of elements. // // $n : [first | only | last | ] // $selector : [child | last-child | of-type | last-of-type ] // $from : The start-direction for your document. @mixin nth-omega( $n : last, $selector : child, $from : $from-direction ) { $from : unquote($from); $ie: if($n == "first", true, false); @include adjust-support-for($ie6: $ie, $ie7: $ie, $ie8: $ie) { &:#{format-nth($n,$selector)} { @include omega($from); } } } // --------------------------------------------------------------------------- // Resets // Reset a '+columns' grid element to default block behavior // // $from : The start direction of your layout (e.g. 'left' for ltr languages) @mixin reset-columns( $from: $from-direction ) { $from : unquote($from); $to : opposite-position($from); $hack : opposite-position($omega-float); float: none; width: auto; margin-#{$to}: auto; @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { *margin-#{$hack}: auto; @if $legacy-support-for-ie6 { display: block; } } } // Apply to elements previously set as omega. // This will return floats and margins back to non-omega settigns. // // $context : [optional] The context (columns spanned by parent). // $from : The start-direction for your document. // $style : The container style to use. @mixin remove-omega( $context : $total-columns, $from : $from-direction, $style : fix-static-misalignment() ) { $from : unquote($from); $to : opposite-position($from); $hack : opposite-position($omega-float); float: $from; margin-#{$to}: gutter($context, $style); @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { *margin-#{$hack}: auto; } } // Shortcut to apply remove-omega to a specific subset of elements. // // $n : [first | only | last | ] // $selector : [child | last-child | of-type | last-of-type ] // $context : [optional] The context (columns spanned by parent). // $from : The start-direction for your document. // $style : The container style to use. @mixin remove-nth-omega( $n : last, $selector : child, $context : $total-columns, $from : $from-direction, $style : fix-static-misalignment() ) { $from : unquote($from); $ie: if($n == "first", true, false); @include adjust-support-for($ie6: $ie, $ie7: $ie, $ie8: $ie) { &:#{format-nth($n,$selector)} { @include remove-omega($context, $from, $style); } } } // --------------------------------------------------------------------------- // Change Settings @mixin with-grid-settings( $columns: $total-columns, $width: $column-width, $gutter: $gutter-width, $padding: $grid-padding ) { // keep the defaults around $default-columns: $total-columns; $default-width: $column-width; $default-gutter: $gutter-width; $default-padding: $grid-padding; // use the new settings $total-columns: $columns; $column-width: $width; $gutter-width: $gutter; $grid-padding: $padding; // apply to contents @content; // re-instate the defaults $total-columns: $default-columns; $column-width: $default-width; $gutter-width: $default-gutter; $grid-padding: $default-padding; } v1.0.9~dfsg/sass/susy/_padding.scss0000644000000000000000000000607612160425301016072 0ustar rootroot// --------------------------------------------------------------------------- // Padding Mixins // add empty colums as padding before an element. // $columns : The number of columns to prefix. // $context : [optional] The context (columns spanned by parent). // : Context is required on any nested elements. // : Context MUST NOT be declared on a root element. // $from : The start direction of your layout (e.g. 'left' for ltr languages) // $style : The container style to use. @mixin prefix( $columns, $context : $total-columns, $from : $from-direction, $style : fix-static-misalignment() ) { $from : unquote($from); padding-#{$from}: space($columns, $context, $style); } // add empty colums as padding after an element. // $columns : The number of columns to suffix. // $context : [optional] The context (columns spanned by parent). // : Context is required on any nested elements. // : Context MUST NOT be declared on a root element. // $from : The start direction of your layout (e.g. 'left' for ltr languages) // $style : The container style to use. @mixin suffix( $columns, $context : $total-columns, $from : $from-direction, $style : fix-static-misalignment() ) { $from : unquote($from); $to : opposite-position($from); padding-#{$to}: space($columns, $context, $style); } // add empty colums as padding before and after an element. // $columns : The number of columns to pad. // $context : [optional] The context (columns spanned by parent). // : Context is required on any nested elements. // : Context MUST NOT be declared on a root element. // $from : The start direction of your layout (e.g. 'left' for ltr languages) // $style : The container style to use. @mixin pad( $prefix : false, $suffix : false, $context : $total-columns, $from : $from-direction, $style : fix-static-misalignment() ) { $from : unquote($from); @if $prefix { @include prefix($prefix, $context, $from, $style); } @if $suffix { @include suffix($suffix, $context, $from, $style); } } // Bleed into colums with margin/padding on any side of an element. // $width : The side of the bleed. // : Any unit-length will be used directly. // : Any unitless number will be used as a column-count. // : Use "2 of 6" format to represent 2 cals in a 6-col nested context. // $sides : One or more sides to bleed [ top | right | bottom | left | all ]. // $style : The container style to use. @mixin bleed( $width: $grid-padding, $sides: left right, $style: fix-static-misalignment() ) { @if $border-box-sizing { @include box-sizing(content-box) } @if type-of($width) == 'list' { $width: filter($width, of); $width: space(nth($width,1), nth($width,2), $style); } @else if unitless($width) { $width: space($width, $style: $style); } @if $sides == 'all' { margin: - $width; padding: $width; } @else { @each $side in $sides { margin-#{$side}: - $width; padding-#{$side}: $width; } } } v1.0.9~dfsg/sass/susy/_background.scss0000644000000000000000000000134212160425301016572 0ustar rootroot// --------------------------------------------------------------------------- // Imports @import "compass/layout/grid-background"; @import "compass/css3/background-origin"; @import "compass/css3/background-clip"; // --------------------------------------------------------------------------- // Susy Grid Background // // A wrapper for the compass "column-grid-background" mixin // Uses all your settings to create a grid background for a container element. // Note: Sub-pixel rounding can lead to several pixels of variation between browsers. @mixin susy-grid-background(){ @include column-grid-background($total-columns, column(), gutter(), 0); @include background-origin(content-box); @include background-clip(content-box); } v1.0.9~dfsg/sass/susy/_isolation.scss0000644000000000000000000000322712160425301016460 0ustar rootroot// --------------------------------------------------------------------------- // Isolation // Isolate the position of a grid element (use in addition to span-columns) // // $location : The grid column to isolate in, relative to the container; // $context : [optional] The context (columns spanned by parent). // $from : The start direction of your layout (e.g. 'left' for ltr languages) @mixin isolate( $location, $context: $total-columns, $from: $from-direction, $style: fix-static-misalignment() ) { $to: opposite-position($from); margin-#{$to}: -100%; margin-#{$from}: space($location - 1, $context, $style); } // Isolate a group of elements in a grid, using nth-child selectors // // $columns : The column-width of each item on the grid; // $context : [optional] The context (columns spanned by parent). // $selector : [child | of-type | last-of-type ] (default is 'child') // $from : The start direction of your layout (e.g. 'left' for ltr languages) @mixin isolate-grid( $columns, $context: $total-columns, $selector: 'child', $from: $from-direction, $style: fix-static-misalignment() ) { $to: opposite-position($from); $location: 1; $line: floor($context / $columns); @include span-columns($columns, $context, $from: $from, $style: $style); margin-#{$to}: -100%; @for $item from 1 through $line { $nth: '#{$line}n + #{$item}'; &:#{format-nth($nth,$selector)} { margin-#{$from}: space($location - 1, $context, $style); @if $location == 1 { clear: $from; } @else { clear: none; } $location: $location + $columns; @if $location > $context { $location: 1; } } } } v1.0.9~dfsg/docs/0000755000000000000000000000000012160425301012373 5ustar rootrootv1.0.9~dfsg/docs/README.md0000644000000000000000000000407112160425301013654 0ustar rootroot# Susy Documenation Susy's documentation source is written with [Middleman](https://github.com/middleman/middleman) (3.x). For the actual documentation on using Susy, visit [Susy's web site](http://susy.oddbird.net/). For help learning Middleman and to contribute to the docs, [visit the Middleman web site](https://github.com/middleman/middleman). ## Editing Susy's Docs Susy's docs are all marked up with (GitHub Flavored) [Markdown](http://daringfireball.net/projects/markdown/syntax), and templated with [HAML](http://haml-lang.com/). ### Adding Content Add all content to the `/docs/source/guides/` directory. All files will take an .html.md extension, and are written with in [Markdown](http://daringfireball.net/projects/markdown/syntax): /docs/source/guides/foobar.html.md All page titles and sidebar content are handled with [YAML](http://yaml.org/) at the top of a specific page. If `title` and/or `side_content` are not defined, defaults will be provided. **Example:** (e.g. `/docs/source/guides/example.html.md`) --- title: I'm an awesome title side_content: >

Regular ol' HTML goes here

--- # Title And some content Note that the `>` in `side_content: >` is required to render HTML. ### Doc-wide Navigation To add a page to the doc-wide navigation, add it to `/docs/source/partials/_navigation.haml`. ### Default URL for /guides/ Edit `/docs/source/config.rb` to change the default landing page for `/docs/source/guides/`. ### Indentation As all of Susy's docs use pre-processors that are whitespace-sensitive, please use 2 Soft Tabs for indentation. ### Code Highlighting Susy's docs uses [Rack::Codehighlighter](https://github.com/wbzyl/rack-codehighlighter) (and [pygments.rb](https://github.com/tmm1/pygments.rb)) to automatically highlight Markdown code blocks. You just have to indicate the type in a code block: :::scss $total-columns : 12; $column-width : 4em; $gutter-width : 1em; $grid-padding : $gutter-width;v1.0.9~dfsg/docs/source/0000755000000000000000000000000012230621455013701 5ustar rootrootv1.0.9~dfsg/docs/source/demos/0000755000000000000000000000000012160425301015002 5ustar rootrootv1.0.9~dfsg/docs/source/demos/magic.html.md0000644000000000000000000002200012160425301017341 0ustar rootroot--- title: Demos stylesheet: "magic.css" aside: >

In this demo:

Build a mobile-first layout with a combination fluid/elastic grid, responding smoothly to font and browser sizes, without doing any math.

pagenav: >

Skip to:

--- ## Mobile-First Magic Grids All Susy sites are fluid on the inside, but my favorite of the Susy options is what I call the Magic Grid. Fluid on the inside and elastic on the outside, the magic grid responds to both font and window size while keeping you in control of typographic line lengths. This demo will lay out the steps for building its own mobile-first layout based on Susy's default Magic Grid. ### Basic Settings We'll start by defining our mobile-first grid. We'll keep the default grid sizes, and just change the number of columns used: :::scss $total-columns : 7; $column-width : 4em; $gutter-width : 1em; $grid-padding : $gutter-width; In this case I decided that 7 columns was a good line-length for the main content. While that's larger than most mobile devices, the site will flex to fit them as well. We've set `$column-width: 4em`, but Susy doesn't apply that directly. That will be used to determine the outer container width (using `max-width` unless [otherwise instructed][overrides]), and then to figure out percentages internally. Think of these settings as a max-width for your initial layout. [overrides]: http://susy.oddbird.net/guides/reference/#ref-container-override ### Mobile Layout The first step in applying our Susy grid is to define our [container][container]: :::scss .page { @include container; } I wrote the source order in a way that makes sense to me even when the sidebars move inline with the main content. :::yaml - .page - .banner - .pagenav - .main - .summary - .content - .contentinfo We're going to keep the mobile layout simple and linear, but I want the footer to have a red background that encompasses the [grid-padding][grid-padding]. In order to do that, I apply negative margins equal to `$grid-padding`, and add it back in as padding to the footer: :::scss .contentinfo { margin: 0 0 - $grid-padding; padding: 0 $grid-padding; } Add in some style and typography, and we're done with the mobile layout. [container]: http://susy.oddbird.net/guides/reference/#ref-container [grid-padding]: http://susy.oddbird.net/guides/reference/#ref-grid-padding ### Breakpoints I'm only adding one layout [breakpoint][breakpoint] to this page, although you can add as many as you want. As soon as there is enough room for 12 columns, we'll jump to a 12-column grid, and bring our two sidebars into play. Let's set that breakpoint as a variable, since we'll need it several times: :::scss $break: 12; We could get more complex, switching to 12 columns at an arbitrary min-width (`$break: 40em 12`), or adding a fallback class for older versions of IE (`$break: 12 lt-ie9`), but I don't think we need either one in this case. Let's update the container to respond to our new breakpoint: :::scss .page { @include container($total-columns, $break); } We're using the shortcut here, setting multiple containers in a single command. The first argument uses the default layout (`$total-columns`) which doesn't trigger any media-queries, the second uses our 12-column breakpoint. This serves the same function as the longhand using [at-breakpoint][at-breakpoint]: :::scss .page { @include container; @include at-breakpoint($break) { @include container; } } However, the shorthand also performs some optimizations for us, using `set-container-width` instead of `container` inside the breakpoint. Since we know the other container settings are already in place, all we need to override is the container's width. you can also do that longhand too, if you like: :::scss .page { @include container; @include at-breakpoint($break) { @include set-container-width; } } The longhand can be useful if you have other operations to perform inside the breakpoint. In our case, we can move on to laying out our 12-column grid. [breakpoint]: http://susy.oddbird.net/guides/reference/#ref-media-layouts [at-breakpoint]: http://susy.oddbird.net/guides/reference/#ref-at-breakpoint ### Large-Screen Layout Let's start with the banner. It should span the full width, but have 2 of 12 columns [prefixed][prefix] as padding on the left. Since the banner didn't have any layout styles in our mobile layout, we can place the entire selector block inside a breakpoint: :::scss @include at-breakpoint($break) { .banner { @include prefix(2,$break); } } Notice that I'm using `$break` as the `context` argument. That way if I decide to change it, I won't have to worry about updating all the contexts. Next comes the pagenav, which we want to set as a sidebar [spanning][span-columns] 2 of the available 12 columns. We can add that to the same breakpoint block we already created. :::scss @include at-breakpoint($break) { .banner { @include prefix(2,$break); } .pagenav { @include span-columns(2,$break); } } The main content will fill the remaining space, spanning 10 of 12 columns, including the final right-most "[omega][omega]" column. Adding that to what we have: :::scss @include at-breakpoint($break) { .banner { @include prefix(2,$break); } .pagenav { @include span-columns(2,$break); } .main { @include span-columns(10 omega, $break); } } Inside the main content we have a summary (which becomes a second sidebar), and content that occupies the main area. The content spans 7 of the main 10, while the summary spans the remaining 3 (omega) of 10: :::scss @include at-breakpoint($break) { .banner { @include prefix(2,$break); } .pagenav { @include span-columns(2,$break); } .main { $main-columns: 10; @include span-columns($main-columns omega, $break); .content { @include span-columns(7,$main-columns) } .summary { @include span-columns(3 omega, $main-columns) } } } (Again, notice I'm using `$main-columns` for defining columns and contexts.) That works, even though the summary comes first in our source. Applying `omega` to an element automatically pushes it to the end. All we have left is the footer. With 12 columns available now, we can replace the grid-padding trick with a few columns of padding on either side. Let's create a new breakpoint block for that inside the footer block we already have. We also need to clear the floated content above, which is easy enough with plain CSS: :::scss .contentinfo { margin: 0 0 - $grid-padding; padding: 0 $grid-padding; @include at-breakpoint($break) { clear: both; margin: 0; @include pad(2,3,$break); } } And we're done. The rest is [stylish icing][styles]. [prefix]: http://susy.oddbird.net/guides/reference/#ref-prefix [span-columns]: http://susy.oddbird.net/guides/reference/#ref-span-columns [omega]: http://susy.oddbird.net/guides/reference/#ref-omega [styles]: https://github.com/ericam/susy/blob/master/docs/source/stylesheets/_demos/magic/_style.scss ### Complete Layout Styles In the end, we have an entirely responsive layout defined in just a few simple and meaningful lines, without doing any math at all: :::scss // Settings $total-columns : 7; $column-width : 4em; $gutter-width : 1em; $grid-padding : $gutter-width; $break : 12; // Container .page { @include container($total-columns, $break); } // Layout @include at-breakpoint($break) { .banner { @include prefix(2,$break); } .pagenav { @include span-columns(2,$break); } .main { $main-columns: 10; @include span-columns($main-columns omega, $break); .content { @include span-columns(7,$main-columns) } .summary { @include span-columns(3 omega, $main-columns) } } } .contentinfo { clear: both; margin: 0 0 - $grid-padding; padding: 0 $grid-padding; @include at-breakpoint($break) { margin: 0; @include pad(2,3,$break); } } **Note**: Due to a known Sass bug, if you are using an IE fallback class, you can not apply `at-breakpoint` at the document root. This should be fixed soon. In the meantime, breakpoints with fallback classes must be nested inside another selector. We're not using the fallback, so we're ok. v1.0.9~dfsg/docs/source/demos/index.html.md0000644000000000000000000000110012160425301017366 0ustar rootroot--- title: Demos --- ## Demos - [Different grid types](grid-types) - [Mobile-first "magic" grids](magic) ### Elsewhere - [Off-Canvas layout with Susy][off-canvas] - [Nettuts: Responsive Grids With Susy][nettuts] [nettuts]: http://net.tutsplus.com/tutorials/html-css-techniques/responsive-grids-with-susy/ [off-canvas]: http://oddbird.net/2012/11/27/susy-off-canvas/ Have a tutorial you'd like to see? [Contact us][twitter], or [write it yourself][github]. [twitter]: http://twitter.com/compasssusy [github]: https://github.com/ericam/susy/tree/master/docs/source/demos v1.0.9~dfsg/docs/source/demos/grid-types.html.md0000644000000000000000000001427712160425301020371 0ustar rootroot--- title: Grid Types stylesheet: "grid-types.css" pagenav: > --- ## Different Grid Types You can build grids of all kinds with Susy. Define your grid using any unit of measurement (ems, pixels, percentages, inches, etc.) and then determine how and when you want that grid to respond to the viewport. Susy converts all internal grid-widths into percentages, so that once you have a grid it is **able** to respond and flex in any way you choose. How the grid responds depends on the outer container. Here are a few examples of grids with different container styles. ### The Magic Grid The default grid in Susy is what I call "the magic grid". Fluid on the inside, with an elastic container max-width. The em-width makes it responsive to font sizes, while the max-width setting makes it responsive to window sizes. :::scss // Setting up the Magic Grid $total-columns: 12; // 12 columns $column-width: 4em; // columns are 4em wide $gutter-width: 1em; // with 1em gutters $grid-padding: 1em; // and 1em padding on the grid container .magic-container { @include container; } What we've defined is a simple elastic grid, but by default the outer container width will be set as a max-width, making this a magic grid. You can also have px-based magic grids, and so on, though I find them somewhat less magical. What makes it a magic grid is the fact that it collapses with the browser at smaller sizes, but remains set-width at larger sizes. There is a more complete [mobile-first magic grid demo](/demos/magic/) if you are interested. ### The Fluid Grid There are many ways to build a fluid grid with Susy. You could simply replace all the em-widths above with percentage widths. But that's actually the hard way, unless you know exactly what percentages you want to use. Let me show you some easier options. Say you want to build a fluid grid based on the [960gs](http://960.gs/) dimensions: :::scss // A Fluid Grid based on 960gs $total-columns: 12; $column-width: 60px; $gutter-width: 20px; $grid-padding: 10px; That's a good start. We now have a 960px magic grid. Turning that into a fluid grid is simple: :::scss // Make it fluid! $container-style: fluid; .fluid-container { @include container; } That's it. You have a fluid grid based on the dimensions of the 960gs. By default the container is set to 100% width, but you can override that as well: :::scss // Make it smaller $container-width: 60%; .fluid-60-container { @include container; } ### The Static Grid Perhaps you don't want your grid to respond to the size of the viewport at all. By telling Susy you want a "static" grid, Susy will apply your container-width directly to the "width" property. This is your more standard grid type. Most "elastic" and "fixed" grids fit this category. Unlike the magic grid, it doesn't collapse. Let's take our first grid and make it static: :::scss // Setting up the Static Grid $total-columns: 12; $column-width: 4em; $gutter-width: 1em; $grid-padding: 1em; $container-style: static; .static-container { @include container; } ### Mixing and matching Using those same 4 basic settings, and the two advanced override settings, you can create nearly any grid without doing any math. Want the 960 grid system updated to 1140px? :::scss // The 960gs in 1140px $total-columns: 12; $column-width: 60px; $gutter-width: 20px; $grid-padding: 10px; $container-style: static; $container-width: 1140px; .larger-960-container { @include container; } Why not make it elastic and magic? :::scss // The 960gs in ems $total-columns: 12; $column-width: 60px; $gutter-width: 20px; $grid-padding: 10px; $container-style: magic; $container-width: 60em; .elastic-960-container { @include container; } Or we can make a magic-elastic grid, defined in percentages: :::scss // Elastic grid as percentages $total-columns: 12; $column-width: 6%; $gutter-width: 2%; $grid-padding: 1%; $container-style: magic; $container-width: 50em; .elastic-percentage-container { @include container; } Play around. Start to add breakpoints, with different grids at different sizes, or just pick the grid best suited for your site: magic-elastic, magic-fixed, static-elastic, static-fixed, fluid, defined as one but displayed as another... The possibilities are endless. Have fun! v1.0.9~dfsg/docs/source/apple-touch-icon-144x144-precomposed.png0000644000000000000000000001066412160425301023024 0ustar rootrootPNG  IHDRFtEXtSoftwareAdobe ImageReadyqe<VIDATx pUFBc1 !رElku mbZbBU\4ntԺMQYZ! 1yd{IH}w=õls~)ĄaMvwwT)HŃ*hEۖͿlA#/*Qp,KNN&'AY$77}_@#deVZ9. R%B!@GNF'u OIkkhIυMԺd}Nw"5RQSFyrpPRRzsQROpgw~@ l Q!@<èegoIJ7סxYbp[^Qذ9Y᧙z5=o-oP|Txnz MzW@0C D\9<,j?#DG^XZJAk/)tfÏ3=cڑܦB,ְAcIun:- |cߗ孲ux[l=Hu/DT^ZƲP;}Ab50ŎB"hOv܉hhZ_Y!@|36{'j[fqßCFlͅ`60PF.fݮ;\[}wʭi1ocj]BlBêNeXk%>2mdƧ5"iaT:J}b0&SQZ.S^EZ`4cx# x)O-n8 oZ)D.|)LYԽ$ g0p,C,uN :ّk8?ա9ͧEtxjuUʈbuTRv)oRp󮮍lN|NܓtGpzI+ {C֮.Dz)zm0uᇰOFgs]4jW< ܇ WZ B8XS}RHK"pJ|)0'头e 1{wG ]tN(wxzBd6K3:T%*6WkL ckes%ddX?ei\ [8>hϲZhU)ڇ@N ֭3iz5o;EI"X u3apZ KK|¬p"@~|=^V@K ɜ۸?TۀH XQz>=&Sm0ϣ^>n}|^W1>t7kƯuW/q5SF{rʰ+E<Аu\⌃B1*H(Hնf'obAw*$I] lnKpAF=Z 6  X]1Xx:?qg2lhp% 8İh[C+ {"I*i省I3ZuQ{kir\+<<3S` " VnHz!&Dp/z0tJI`:{sU")P,>&C|"gї'33!'DًP:r45eU2ѝl;җM IVV~@VW!pvVoE3y' v1.0.9~dfsg/docs/source/apple-touch-icon-precomposed.png0000644000000000000000000000356412160425301022076 0ustar rootrootPNG  IHDR99tEXtSoftwareAdobe ImageReadyqe<IDATxܛylUn֥-J(`!DP(؀9$D @l9.Q4"!GR1@,`!DKDІ-,eݙݝٝy /y{HKG|ȯyS&M+>)$ `{&l{NC| .'$ZJ@Ky@>٥Mo"(4(:GDM&@A.1Ƞ& dBvK{*)!. ^N|Nc%Xv oy`ׇϸ,A=ѐ8U%QߨvMN\ρu›O.$jd5e+ ]yސհ N''-"hnd҆MPHMzd2&ظrY0RPݦmD8IG$FFASjzqؽ6b,iR:)["a:̕{FX$5P? cJTs^2V-. 6%;ëF}A"|x߉\bvZ5U!;K&1W IÒmD>U'p@[JcLQ7>"pM(6kHM*/ZkszdA[n8rST8XD֔ҦVAe_C۳eł]d}.ZPO2`" }WY)P |ņ跁ȩd5Eh!P/e;>YA3\8Q~}S p;~5.xKy:xUeG xTYH!uy9g_G'q yd>Fb2Ws!N4Ռڼnӕ,* M' &ЏJs/Jƨ2K$pR#~&s`W V`VY䓄.W\mmL_ [tQq<%yRi)LMIb?ZB+OBN,4| K*BJdo#y=,v' =6qd}V'׏i.YD?mGZ4>7N-O!BpxiQ3ϙwנƂ6nDc.n T MM3z"1pa0VuGvGxӮzޚ<^NtS'*՛kNjcZxKϏVFZlCl9QzW­)3^1 ̬/MUHrg  -b+78iZ0^i^,,h09y|qx2*T`^k.ݪ['i+609?ab#|3>EܘEWQKU8֯ns EW}4u%:wj ^  ؋5Wg琴ie+LyAX!>Xp Ee g<)z)UQX\;d*=\\MD.C\l UR_J3U!lIF=;͢.T ƤCčvWGhO v\ph}Qj5"a-b %X vF! <ρɜtH+Z&&)#|傖#_ y >u쬿] r b؆|b|zoX --R`6[; }W<:t΁Cߘ 5gF[E$mv ,{~Ј½d-0IENDB`v1.0.9~dfsg/docs/source/apple-touch-icon-72x72-precomposed.png0000644000000000000000000000460712160425301022664 0ustar rootrootPNG  IHDRHHUGtEXtSoftwareAdobe ImageReadyqe< )IDATx\ypU~=9L`I@4ɢb YvѬUTy@]RtCŊXbh햱(FbW1 IL&qd|o~̯$=}Fba:gPsEltX3K%UR8UuV-'p+(Dtvkkqr ws6pqpsp*K_ĦL-al4aMG`8Hw3Yee[F}3_i$53'W1v`m ́[g yiN,@JYYRP6Hs&)àE}~N6,bfRz S'X׶יnca/ε=6ׯz<X? l>,;Wo# Ul28n\`.U ր㺫9w; =TufP0pnp)1NAo5а1 bpppp 7;gפOX\ʅUKUE$I;z^;o1}Nώw&st 6î>paȩPs ufA "K"PO>P \8ARE`CYo)9 #TrjM[͟N" zB'$)r3 i ĭ dYo|cƉ%4g-U2hbB:$M נD|4gc־q'U>d,~6viˍ@zxkl?5Zhh~&=fu5|&)y6Xp HޓcW|Vz~T@AF), iT{^xY4rpD;QݬF |WoN5k]EBAJ lUV>>)ĹHšNV:?|5+&vo.ϝ֭_-Ф#Ql b hht@E+caPi!*ЗH`E2Ӂ30;Bt̩6N] ]$S6X]qE2 "Duvy$L])-CR$8OB d*68S"2 \qD<*a s%'7g<.͵t^/i?q߿d kz\91?x *[i!5';ᄏToUMov}sA)I_%z/$cM$Z#LJsiJVc67ҦE`.HP+`L$5wL !j H3iZw vD#X^swAZrML,`M J:HBˢٚy3UO/Mg'{JX_` VrO'9ҏϾP-؊,|V4b}w%hnˬCf|ܖk'vf&S G(oFV]INul3}gRݟ^TH3ܟk';R22HZ~^.tb^b'VOKNu7өljWRAgֆS -wS|m\.,ɮkJ`,r*K^xbך%.\":U|I%585 ֒wuÿenrI10&WJDe@ rlWΰdeHcLde(lUYMI7!ti5rci(]oZ^f+iel=IEk+kֳt:]/Ƅu1^}#ؒi3H [զ=yBz||XMh (x.V+$旃6h*,)iOBGJj9> `P(xbe7W}$ 2͘j :nx'"zN|4sqg16OXm-."tЙkvvc7ol!BRD7o 1ih`  )-OS7k,(B:Q~Qj-s+YnkTΜ\,%c,|\.$۸iF;nяu3z0t"eRH̚YXDF"0 1fvѰWYCm1%м Ì؆lɞ)x~ S-E7lPYf>`Ё"bm,tl01`@~TX|I#-;w' :qCYEm,#)ǵЂFEFyv@DSvB u@I03Rfz-կD{ +6o&t9^_'^M %Qp+׌F&Z5rƌGJÔ\2Z6#-3*S"1!r|kʮtDIPXiȓԎ96śB25Kx= A l&(}H^ZpqV +IM)JCYbRN4mزEvKm1[򞢹-H=N;@#w7r}Q+`H"+zOu[ppN P{)Mގv˕G?h&JQc5"LQSGvp&qq/:4\;Lj9ZSeZ(CۖM"@9[;u'XyB@JN5|M R;  hv.R`Iʎ4o}O;D+h msSg𾃖Mo|<ٳhsyu^d ċ󕯺}-R \FJXX<08 J=ɍ[aI7s̤kڶ,8iU7嬮$/oRH'M+7u R-hY%S%G^yG9Cf€i,;-N B'N!wfKOʤO5yy9/ʂ8Bg?!*, T;{eLnd;줟Y _!<0%vo/p#WZ{5+ d#OF髽 >7=]RSOF ?vqW8>1ӝ[yw @3kw7xU!`~"2ܹ{y<3h @н=f7I?50N 8$ޱ+\q?  `:ٹſcO60] ݳ+Qj+LKl;p[%~ru%~|n@0=3T]yDKˤÃ,}٫ΏTC))-*{ƍ!&w\~"!}款8VO%"8Nq<Jv{m?8Y+lLUcBr'˗]su7>G~REՑXUۓOA'1L=/ϜKWϹcDGz7IQV- rqxff=/pϜ:ջ'NZa0U ZڟzV45?VW ϠPc!GOgKvX@ѳs޻E|"UPcъކn^xcD4@ bLD+"|rTЃ/X5 ?핗do21ʏ/pϸ8 P{P_?oݧ@J%:*O[<{8< J[wCɍS~Kf fNZ _ﶳ/XUey{{_] Rlȯxc1}8k=JҁǞȯkUOOdoq jeŽ-ϙ@o6BۖO]V5~++)v>@%?\r5(RpKWN; ():MoLR97=wb(WNaI%:\ PB\CqZy]_wA"}<0{yux4ÃJEۦ}ۚ3`FQJ ⑨A ٖMM񆹡fH(YO==4e LԮxL}B#}q[@mSTgx%^ϑ I]wrΪeAKu[{m!pqx@d*U+N㿆kD[m}TL/}y3yU>V_mLiTټߍ]09-#+?!/@?ˌa${Os~8< `,p?T1LKv[{m;D8< `8XRv  yu0[rJ@clR}5o_6֫dtoe1@qʞW~|;9+4 `mWX1 d+ `CGOW笾x /]ƁRYwLJ0A vzakG!̺4@)|×FP6~jnLjfJBMgn7|鶆nV0@aHFV|?yT@%@Đ⍍VTF=F 0t7qNxA+~@SX]v>W__p=sx2a `jkadUoyc×n;+O_09%{k޶OL{x,׫A]zLʦSuW0v=+=Qg^ww^0x @tMOxocSղeEDKJM0Wy#!{hiU?? J=, o?pQ6=|*;Y?\c.¾ŔwQ]^ls;>s!qb LZDWqXG.[n W?@/@A z+ |%}`+su]:.L9#HG\hR&"|W_g>S~WS7@@hB\g^\?W}(W@u5 Y}q:Z T-ϵ\~])zjKνG?8 P?GqUG5+'u7d(MQڜKWs#D:oy!}f$Ҋݗk붣V]mݷ_0#p&~*\O_pGQ~ *dϼuCXkS~y>,g\~WO @ԫ9Xp&wN|X hi5+dg47OES x︬9v~ wm|rR!ל>ol0Kc9ɶϬi>i`'V_pfWfO&e(zv:ݭeu2ВG*g˪ &ȁG^-D:I IL֘ Qؽ8z+? }{{v@0^4lĞ?r(\KU-=v!fCJuEƴo{5Z?c=\񄇾JN;;v?ٻΩ5Ρ+~|LE@DOpC<"wjePR{C^jiK1dx?oscQhW `BeXgލEX%+PjV1WnY?3}|lV V?-_lӭWsgDK ¯[>i}䒞;4 (I;SYmP>5MfNvL;Pwp'C6&EԴLڎB>NtahFTљdlV \?{Zqrd<<^sNG6ϵwk,ZWuC{׽{<?`w|@م}͊3j<#w:>lo˦SECܲM,Tn\W7l%{jO_ƧTOo]?rs͝3^_Œţ\|gFӫʼߙWiAA$zA7|2=m~DžRv:鱻t~gT-=k*ݳ3o%th+߶sS2(`KwE~ A 7=o̬9}/2>Sݱ qzvzmɝ0w,{W?L B̽oA˞| UzaN@`ƽ 3V~+~2n_MJzϽn'V_?g=)N`%Z{f!o@0^iHuT~ʉO~93̬{׽S5BroI@05-_;"L[{ g,qǧܪ1tLL^LDy'ܽm['{{u_bwk8p'8H$ٱ31r0?6!$oW(;3b^|r@4@&ٻw3|YS49{nY߾o^|Y_VEJ$ `|=~wOxm}~s&gP kK諾Y8>V>{>͛X]vBh,ZV33(>ZI"W?S< (++}1%}ŒE?pCTj[9}_pm7Mׁ y?v|h#khT}ZESӂo-_Iz#~A<T~iCUm2h]FD^ܽw{amsuV"7: @彻Z^<3JhYU]!:6o9+&y^uYN?vyþ3⩮T맮ںm7763 xȠd϶oܘXi1 rc'V_?wgY%/@(=B{֬8 kg@EbѲW:ټG--2g?~nZ w9蘋>4+.Xu_j 14]KhR6t^-cnESShUyAA%O͛~BUKOk@y,ϟNP? ey;/ʌ [FeU$ۻ;6o޺uz;6:']?kug@PK;6+f̽Ykc_B d;vvm6W αgΥ\Rx$*"Д[Mug-ϵ^~ _gic7дLX*~][BM:ܹW^ZBԽ `|h~wxT|#ۿZ2ձyK3ǴqJ1~@D)jџ"Ȇ~:o:}R/>_:zLXeO6l+J EXxzo:t8!;7|(@R}K{۶zzFݾWEU-q${d@_7={&KX_]^/߯VAb^|㗍66s+UGb[m񓥳i(+B\~S4S#5=+D<ڶI?b ?vw⅗_U@!lH͙U[k+ YoՖלqƬ|lq_],QP-#NESfټ:}o~R/#a4hɧ:b!'ZZ_}vS(!I%’),Rj{nYo>Tᄎ4ݸ.8ѳsh_ޯܫ~@T] :@0=o5FZ5o[pFEX 4߬|S? `4Pq{\Q4='/8az(3aN^Ji@}:mN]y)N3FtM'9N? F{︻k6"7O%"}c7PFbT&0@Dw)}UFבݯ~@hul=_c{v2 JSzo@ fVUd4 ${.F>h@LƧauٜ>Ǿ4 &R?ȋ$w%P׶ * Rg% 'yp  ?(]%vO@S@|b]#"@L d튷_u"QUݙX(E e@@Ik8SzrXN}?ӶjUK(އ  t'c-kZSj(NbF0.e}ͽo QQT4-.,9H%}Zy㍍a};bhV/_^Ab 'zgg.AiK.${̋ Se1Fヌ^9g4yʕUooC@*e1Fi9ط/Z_?O8 0 rY+φwt޻Q [A  ź,:<l: :^#90wYeWMBz[{}Ai"/B޹/cO)[Q3 `2Gl{7~ 9yԭ9:/@dbUe ?Shk?\`67ϹÎ)-Q!_zd=zsч ;>GwES¯6Jбy$NAfP]?ʎ PB:m[>3QRl8ㅜ9[? 7|TҜ(%zɶR>ܚgL4oپ®ud,2@@y wm|t'Pz.AjPzvG.. X(P͙gk %;:(k} ` }G--%;jWq("m:}.O/X~@Sk`7+V-;r⪥V,Y:{|=?chjZ/ۿ`MvAƆmd,D=;w%;[˗7. `c/^xEώF"?/X5+RmӕKat4Ř& _}HP? )?,bT/_>-<Nۖ:B0 L/75y_#XwT-_^JDɶ;;6?R>,țzUO%#L{i+bssJyh$F+"j۸qzP֭-k6ۀ1^ZR}}xģ[=ȣ][N 7^ _ aŨ_r5ec^ U%vom8'+~Z.@Sh.qh-JtS4-IvѶo,b93][()0璋$-*۞ԾR.V4U@0 wY箹b5PthYe_ю͛Gx67X(-}b9yƣeUXE';ٜ1tOM`#B `Ƽˏ,Fhy7ggb2Hv Jk۶['TT|Y'>ugo9:& LFiO`ʉJPۦ=;lP⏫%_bɢH6lԟp_А6[Kg%3 7,벿/#mRpy4Y#'Lކ[dqv*a3PV__А;yLRiȓ4ޢ<">Qr9 Hx4zn> a_Աc/]]ly奎g6ޏO~q<\djyP]/]>˗Ͼ`Uc3a2:"wKfI: 4Ԓc X76fMESSOi ?6|!L@=Ks5<,;~Gܰ4x?1=@}1x<98Gxvh5tWF7K{JA4b({FP?'=Xmy*DchyM7%ZZ2m[_vxŠ bU}?m;_+\:MiRw,,iB͹oRH*';?h!?H;ɤIڝؽgCW,~C/EZ)_r/=Dʶ'M,~ܕd Hw0@aǎ0m][f9Ox+ W?/޺-L3!8b{Imn}GsvdoHr,3_YG-zc/V =ol7;̓}4Q_;8w>Vv&Ͼ5~^W˗ 7ϝ0;6#p=HfFG.Yοqmݟ=I̪婮K,\ KWDcHY4smܘ=T2J H4h|ۉOSaNHw*xcI?}D˪6=ݺ2C+: n\͊?νH,sG z>Y: n9q3r&L@$JuKhmiEY0s? o95 \Y܆; w5hII2gm~#=O7}.O:\{M#}ﰏUSɧ6^}TCLs@#CC Ԝ՗,3%Zk2oԛY?=dOq߷¯Y V0J)![zUy>>yO͐ _plgGcD=ڬHwd6ydo;O5ҿ5^ hsɅ_}[ ۰Hؗ<{z{g'uw{oR޿=0,YES*=2nS,PFҫ2s0 T*%ox;^M?bГ=rØW^Kgܻ=!b$x%#$;KgGy&>70w8/vmh>ek[sUhy9IJ4B|Rq$3}q]G>F 5d;Ց@aF0f5kNc:|{T_w6(Sҧ=ު{/B\s[kCgdqx}uQ ?$to΀gُZt?[Q0Ɓ}zQ*|}uZn|V''vK{8A!@o!Ѳ3y35:[F̽Ro|8lafǺCW0'ٻχ/{겛ZFXW,>ym=0+$s ˏlSն駇4r(T/[} ,+N91T@K68D~$yq۲_}9s[&[f=K]ɷߴfgx޸6TMIOh}!`hU˗fv'[`kA Z4-~esR宖~sGsGC 6]r)Go1S9D/R}]O /8.<"={1k96fPY[H}ݼ2ÒEgD*LJesR*@{ѿoyz$UzYH߼{xÜc/]{Gomnz˛ǼXݚg9TV+eo~?]QrqW]6=flZa!}Ƀ՟9Պx0bp"DJk*[Oc~S+ΘsG`c/h-d2"{&Րg~Qu޹=hp%2[^}vjAXWSD>XLmkO"0A,eSف+-u{Oxߖs{cJq~nus7j(L1VGL҂1O*},R_GY͔}}X{ȳ7=Tܶ.e+{Ty|+\+#n;JD*ќ}-,OzG3toNE_ejRgaÃ"'j%d˯w ܥ`3 yه &#IY9IJԟٿGE|y rB(s~,Q⭣[w'Z{׆lsϬ;2GU,>%9lI ?Q8e-ѳ~} AN*#.ejٲ.>؝/S58<̹C{}_UK?}żiW._*`ni{XalkVaRrv,}^.c2~='¯^wSC^r" C_f0t٧W4@1UrRfTX$@/ʵ+^b)٭mOtݥCet?I{YL wnȽ!Yl=ڂj̟[)ϻ~O?26̌Uxq篻~=kyOgT"LaO|fY='lQE}'< 0{)՗]%ǐWL_ 1R}#3`24T/_>15+(4А{?d%}jK>6} m~:\Ǹ5dfeݞ3m;]7&P4ٽ(P".zis.H !^os_Yz/ܼ>{>xcCꥧ?vm>sY=;Ξm㓇n5s3dVd>~[ۗr]z:@,<=`=yGO:Գh}eɶ0=gʝ2p쥫\jeN]q\S{~\<5>Us."QNR8cgҿGg=:Y7kr5q38 7g5@0ZMoؼk붐2a#} qÜT_Q%V͛{_j\"Cyª*,J/Gح!?'g:/DBe[:TlyoGBנ5m~+ 4Ҿ2X4Vh⬷奞;C%/l쯖E;,驊'ud6E˪#?3Tw~6Ig$#T?ɼG{J}Ϩ-N1_^cW_2ˇ *"cq 5i9#83h `bǡdtDGᦗ(a1H97}GfX;d',Rp_*,: hxаOvÓ) U]*;Lמ i @@  @@@  @@  @@ 0H(35@@@  @@   @@  @@@  @@  @@  G"Q(@  @@  @@  @@   @@ PTH 35@@@  @@ #Qfk @@  @@@  @@  @@  @@   DFQ@@  @@   @@  @@@  @@   @SS<`F@@  @@   @@  @@ @  @@ Px$j @ 0#fk @@  @@@  @@  @@c50X2cx]@@  @M @ @@  @@ @  @@  @@@  @@   dT`0@úIENDB`v1.0.9~dfsg/docs/source/images/splash-iphone.png0000644000000000000000000001615012160425301020423 0ustar rootrootPNG  IHDR@+^tEXtSoftwareAdobe ImageReadyqe< IDATx tf!mohOQ!k=}"֗( UJrT"ZZEVʵ-P[sOIZ% $!d7d_>,f!Ivvfgg7?;;:>6, 0@`0 @` 0 `0  @` 0 `@  @` 0 @  0@`0 @` 0 `0  @` 0 `@  @` 0 @  0@`0 @` 0@`0e2@@` 0 `0  @` 0 `*rt0LL,}S^#:.̷c-9G~ l_v9F圚@!oӺκɏeqy|q,T mie>ҙ۱>v?cHƚ}ZZC8M oݔJY1trj{\r qzln}Ho2{6AFӛk*,Z 3Ng@ x O^Wrr\S>!` UqQA+JnP{~K~`6 VF?/1^zUWYJQ-}v̊olnyT+̟V}`$Krxx;y۳T}IWboKh]v+I| =<-IΊŅO {Ou.k_|\K"ߡɀvaIі&ΰY!F]x:g-]"IvO3ô 0i[|nx_[aZ`E~6 tgx [? vd`$f"ꪸR~Rl'Sđ5XX}؍|VVJPSKg݇ #ۚ?}7cYwV4MhjBOQ<ײ5Yb V͒b5V̇I7SeY;҄Nɹ%HUQ6_'asqqcY˖X)F3\Comy"guF2&X!w}6w"W)VE pF4F? AKի!.hB;T*(:*}W |iR\k[4k0>EHldx㎻e'qФJwz|6}'%Yʍ԰&Q۶p,ee S*FMЍ4Od%T p9Ίő2LOBW2g% @$'. =|}0>E++X/!m+S7՘[ug#dxU߹0镢TȃFk{LŜ-x. SS(]h@lhևا.%9R7g~}aUt.X4?Q%ׯy˽c5[N]1Ն7nMzC ;-$@{_{}ԣd '?UC믻i7v֒үֵ1Ϸ-12{^yHZrtH&GI߰wk r|붖g~<  zׯsqq+VeÆwmtLҴf{;;Vȧ_x7߸.W|> #2zԦs3bN간j; {e8g5Kv"`&~Ct /}޿w(wOkog(/5'*($oZ)Ȟ}5C~)XDi/,PKanʌ4'#>IQU;8j<xJ8d ĩk<_6ة]j1yO"2)M.r)tRcټi'TS-X8OLGoӪ_'3Ș5Sv9q?dþH/(gX:#5+W0*%_L|DFs C 0Rm OjRE"mٺM?31Y pkzإASTΆχm۾C{`l"y =5Hz|߆Gݝ: iSakks ]HT?5``Fq1k}Dgn05HǷ`|N]HpՋ 0 W^O|갔bΔmә ݗd43}/ VA{jйxaaOwVƱhA˝l{+#&lo-cZ{oh30}H7?9Ÿ-loi+Í 0"[yj4/adӒǼFXe=>;K>"p -Y$ʵ+ ξf%#Kg UXҜR,=x5g_-oPzBJ9/nggޱf?tC>.z峚0bmkW-q0176~w\ozva _!$HNWv80ms/p^HnJK;.WVW9}un_𣃙aۜ GgoH9AtеAv>ZpPMM2lqfn**O~Io^IH/Fs3a..Ϋ^~$ZΩɤ R\|q;+*ʍ-?_?,{eKhUHoTd4ŗEZVW]eʟjCVty;wPP[2<] x8c ~щoq.^]1N0+F^Qo-ZJfYKgƻbxtV^.j[z^>o8~U!to5l{.˭ee/:.nYVݾ߼zڲod~RHq9Ȥ-O(qGt|-ܦ(ƉkX }D7eN(شYQ w̟gt:dNǻ5i˖eK[{ɵu碋c?b-;_F͞ƪ ϞgX_1fWΩ\|v=;ޗ9& :?kj֟uq^c%p#W\t{6>"{qm{޼ǂrlZt >yQynS}AoO,/'74OyU߱?̃&IR2fLW,oWM{j Nڶg+D# +W8Pw} K.}0hu2q\E0Ϙ!!CgN.xuX ֜ (Kʣ.Ӵ5mK'3 ͤ{1:ό̰LW"/Cj;7Xy3:Z}dKE yͼ!sW&cAy0-2=7⑿O Զ}29v Dd/DձKOBۮl岭Ǽ74q%jpƺ_u5 )=0*<\4_Xbנ:wdxҡ ?'|G z> Aes3òwpJy;Ec~D{7+Z( SS#S_J9+gK_4wv`?MRtcNS/jP^ fyUr%rM6 ~DۜIɹŤWxw05T:>Te鱧L<ݺ#7j4eꫯ}l#M_4hXnhC<`҉ms\NBƩQCw7TBrkH414rgd"YFoHzaAK8~8}FenjW 9aV@Ғ +x`}Z\%~]24)Pp tá_?mon=&jt:eU]OXvY^ZZ0ON>?x"vY8QȐ>~ Ww6xwNft8Y&󴼮wݓ^k)%[1sBkؼy|Sa~ <5쫖kƆfy} ׬]Xd4]L'1̌DHꞌQ2:~vy$N&q)hRֲoXfMF^S&>G\cC^!u8kv})Ç#Zx{Ty'^f˹g.e9 rV]˶Jc. Qۉd{/mȓ^ŤOێK谟'J`Kqգ}i-'9NG1@GAЈjxϓD-fm %td+A1ejw֧o~Dޣ =ΈXKx+U{xo}k] S:T pܥm%6>b5(v}ɽُ)2z+8q.tc)QGz  pϏc ) ^b @` wf0 `@  @` 0 @ \ 0@`0 @` 0H&.P` 0 7.P` 0 @  0@`0 W0 `@  @` 0 @RT`0  @` 0 `@S+T`R)@  0@` 0 @` T`0  @` 0 `@ 0.jP` 0 @  0@`dzFc0mIENDB`v1.0.9~dfsg/docs/source/images/splash-iphone4.png0000644000000000000000000003734112160425301020514 0ustar rootrootPNG  IHDR*_tEXtSoftwareAdobe ImageReadyqe<>IDATx ua'!,BHKϩPI$VBBphP yA (BAVx> Ş6olB!kvggvf3|5.?>?D^c+f@@``@@@``@@@``@@@``@@@``@@@``@@@``@@@``@@@``@@@``@@``@@``@@``@@``@@``@@``@@``@@``@@``@@``@@``@@``@@``@@``@@``@@``@@``@@``@@ F<0``@@@ 00   00LqCSsK+|ӵsWiP/kk+T>'g7]¾ǟy[ārb־_4tqks*Zs;*}gΪ'n{(~B;0%MNq禽ӛ [= 0%wj>SX};Z}%OoN8c)V[S%,tͪ]vNz~Aa 'T1l]R _s< pǟ ߩ`>{aFUG;`7q"L LSN#Czf>=/?[Oe1yJ0.Ֆ/XP66-۷Ac.C  ^PRjŋ*,эt:Tn$^=G{~Tss[0ؾ=t_;,%0L&V,yH+ꊤ3_.GbhlZ&x_oڶysh[u'G P Jw:HlZ4VFnn~L=}>H 0[ti:6ݞ\_H*N? R]dsY]e'Mg0QZ6Bl I'["ޗE˪lx7^Zښŷ̀|"K${OyKÔ(7HwggÍZ×o|i^8,%0XiLQFi"G w>k܇qQgmIܵﴷ5DR]呤:ɺј gOd}˝EtnՙF aR5K~SA @g8Œ W՞WT+Ln~^qFީ"6>/XPwG}a]k[:ps#C "6>o|PBwǴ͚CECɶl%frKͼ|uqъ܇]u  #?/tK$}#|%RiWq+2"v蝱je*>Ar:\w%-$T]-y} ji-ew{Xw찔 P4LoiH P}?YE,Ϛ9y` nRBN<50vY;ZW,ip$a7!v9(0l[sJ* 6+!^i0 G3.\Uy)#ExCc'~uC3!Dic|XU ^bں^>Xf^z1\9-d0W_{`ߣ #OjXm ƮAݺcUe%.Zhyæ&:f ч̓`,]Zηd߫#kwTTiWEx\E0dʭʆ6A3#Þ L~hU;[wf1Xo0\ sZ01VkDoQ\j6QT.9c&g ):00Xi׮}|hktg3/h}h']qUA xSY+_٣~}|pO_^nsE~g`&g}dxe~;?B[1a8a6Jg>wox'f/^*̾'N|߯Ytr?ɦ]Mk76|3n:Y>on,(r$̤λ;0an+Zl/Vb+7|d?'-IY"ڛ&LЄ+lEa*X|?{x)tT>Xb'K(b+ RcKB괫3LoX?{,l[hpAT3asE\0gnI_TG] }`ҥoblFhߜ:nMwv&0*KTMH@yG#X> WC{q,Q;>tgWy֯/ǐ8Jb]/#w:qO/-Nu5?iߣt 􎃃IZZ֬/X"QnmMw5EK_< .a=UDcUOp}O uG-0-߃8-k0n ,50!0nݼyR>G뀎o> pT$~#ZO`20G}yS_D!tw$o}{0J4jsx[tǶ :thkw}%mDR~+1f*-e5?IG TˏƢ0'n}-$;wYM~y>Vn >8aCevz+,h\8GcccOVA%o~#~`ݺ3N!4x¿s_ e4^ _身/Ii[N )\딞S-iq(8?Gx)3~C}oXN/ 48]GoDGuExoogOTH}}&y]3ϣFODpœ8Y[<*3|QlTR0-~x\8aڴ!z9qYErO=O|o||V_ƭ!`LԜ{^`?X W9󒋎 _j5 U˪/f0 m>g0yE\rExo?GѓW>t97{3Cpa\ĊCI62Xy3;!C&3/_5g+{pƴ78loH=0ъdvXfxzm/lzfvgF'5cCMw[.C)dӮBøn*:al>1Eyӏ?1a7P<NL;խ[;[[6=!PEa|5*/7ݵ}Fu*XmP_c ;TxGZ:|M|S_}` qY7o*Lg^rQ 9ciw㍍ønpX57|?8%)H0j.U_&Gb-]!pѪh$iLJ> 2y,پGS_[ a-j ʅ5|o:RVگL\6A3 ͙Ug*;wXw;00\yukKu}VFif5rɝT 7\[=/0AѪ՗䪺lF򖞾8&`uw\}aZ;I`$Vo@1/; c-pl[Tբ 5$*ﱿuX#a d>eӏC> @3``}l} m\}Me,(y Pzwr+87 ji52yH?(Hb|1qA| k}zTTm;w; Zd>NBh۲o>q뭫MNNX.[; SXٿ]Evrtx/`Duy>GmTKkq;ga`ҵSv]{wl-U7` R};9,e_ӚNzY<Tg%\n7 gY` 2?(Sɦ]=̞>9ټ<,` EbAD{$Ua)llRsQfXu%*谔 Sd:wT瞭i Ta)oME+F󎷰!@/r@-~ܴf>waiWqۏH:iYC#j砎mO]uF0<-f0ףR(74&(h00"K9TKݴoM1*MUa)'~yUEo _v/ 1o-CRh$^F}".8Y-\00K9T{6Gwt!q㍍3/cO0FrXʡIĝ []tw 3R-ٴk"N>WW~e 2R;~C(ǭ, d6> TR-̀_^|UG%sg`(D:X~N:ևq9[vâ>?mɗ}Xbsg^rQa<<`-_)h7Ԟg`(u1Ր+?P>?.z7:ӗGR,C Pm/\xZp3v;=_Ǎ+V_twx=O57ۏ76$[{9c]:ٴk׾5(g{tŲ #n~~7„8%gjkJ~!=³èosTġ>J W]sCĦK65U[S>^բO>)ؐOCh;wul{;>_Cqoܐ8C)BOsDmm9TKHFٷ^q<C%_W,}mej}zj 񆙣}Xʉhƅ>*|W& sX=۷7GygYm"gwKsk/+Y7V}ȟMP"KX"3Fdx0GbR-7{ Wf4Z5U׭[[~ H&_a$V-LܽGz(#O׼{NpLX簔D~㆚%gmod,Ju6?)x~)ޙWW.:0p6{Y϶"~1#eOojy-[]zmscR)ifcѲZ7o>ۥ+V/oRμ|.MwRx2zucV=])OH/0GNIooknGֿSW⚥K+/yLw Ƒa)cիgeJ%n߲cw׊76V,XP~ʂE+/:̻gƝ|uD"cDEcŸ;lߞjiN4lBw5|_[y 0bѲtulFbH,_O;l;t:0s(Jtjܜ63sR(```O/f   000 dw*0``@@``@@&x$j ``@@``@@'nPux1|S'oR-ɦ]GIpxcCXmMˎmW.O.}^|vxgBy P_yI|c?Ew_xj6^ߍ#X׾6kc/_]qʂom?tggG,Q{Um],K$.n8唰8=?IZ,<'Wܥ~zm?sbŊ{Oݚ5߷"\?}+/kџ][g@Txq;3/V?粺YƆ[n #P]/ܾ-lJRx9VQRQYxڜ9+VQx:\;-/?2c^0o{?4턷~/;^ F5${ɦ{,Y mً #U֯y µW-}>Ge7c}'{S0<+ɞai=VG 1[icl':bν߬P߹?tNFɝ;AM8=uƅ]}Y:|=1,aA wMoqgv>Q}CNX֭rg:o g/+𯹵ywR߄+\yRrߛhv}NOjzvWuKپu[?]h?ʮ@g^Ѿwfp;)p{a=}WzoAm47gd_pOcfj40NklϟsCz}x 䛽a{ xKH{|ewгQpm.^se/<{0-h OTyodo}:N&WϾO«bqgp5WF+栻o 3H}|v" n ׆5xXtl{e3?pM+ u_ͮ uYnڒY[ef̹ t fP<{g\e6YkE*6c5{[4SVmˑyŇ.|v xp!ߍ|7Mw%7QCMwמ{?(‹Kncݕ{rTtgˇ>amg0(^6F(l\[@5W͸pUͻ}ZX_j2bp񪷿: 7ɮ|\>-szi߸ʮpMx] c/D<7d7zo5DL<AwčϮm=bS|vv]n^5m,¹[NK/*ǗLXγC s7yP=fUwU' /%.~5ksuh' [e{xO'{Z7dוa-Uu퍡}֘a}h+뺵kr+i)̘C,aj<x㬃yiQy0~${Qn]f>>O=[VT<4ԍ%籺lfCAKWͮy yq}>aFL?77={ -r t 7]Cz5T.Ǻ2Où4! Ohxyq̅f^v"!Na[B3c Qoz=p$]>oα~x}Vͭ8O}`FSs=w~-Z^}=3/ >X>xS(Ԑ+tjo~p~φ{oֺ\rm(Ljebʅ[w|s>ѦwtK?־ek3E{zo3 kW}ZfD"om/{V*sꮾ~Ǿ W}=c.{fט!wRLC{>-s%۷gsߣ%g_#ܘ9ā۳ξ 8'n~p'{>tcX 8}wXyktwKC 0젻J0X qvVʶ-_{s{$V, I.uhg^q/~GbUI}M_szx*#=c F'+~&57]oV;^562 j!鮽abz5W?qC.YGdJ[N0D'a!wicۿ\ş5ҙws_iq ٶȞxg=Y Iv NNe?V`~%X!+1u>+5HKT6V::Rpx WT{anϩgrP#xHi Oe͡ݼoJx  ɦgҼꪻvyĵM0Z>>,3{ZNGE˙? R0y(=om=xzP>*^".r|^σj*K;Ѫر/M^Gu$7O<`5W]V\8_cEz1 0(;t&Ṗ;{;UyބY}rO ތ>R?Px[dbŊ㊸UU 0A1Ww+#I{s{.yo9^iE>Ԯ7 OedÈ3U.:={>z̓OsxyRv;G+7'^nZ;7e׭nw1^w1whɞ)c`]ͼs8g^;47Yˈ^ж>Ȟ!s-ё=]|v笍~]Cwsksܱ2f\.s`?S>onn`3z?M7z{W-ovx x6? Ad`1aR}#m$<,ޢF_}cjkg\IJs au̦㞷V6RmMW^=VlbwIsG}mտsFFw}?6} oJ3s۾?ZjCJCz'|DMW>[l~Gϫnm߆Η^Y{5Fxaq֞Y Gy7Tjf^Hxur׽au p:fL[Wy)}?5dǡ5Dzξ틹0ĭ.{OQL-.}X6}觩OFlVme^x_~g}w~&g7n-g1-}spӚY,O>!vƅڷlduה4g<ƪs~h>=|.%.gmXyƂ>NM製 ˜8ҋi "s6/i}sG96Oxo槞kXxa[0o- C.Xs=Qa?8eQ' )2 ~igXݧS=[d4KfVmC-*ڷlܾ=OhjEONwz|ش_8t:Uoy-Us%ssSI#z\4n6?gU,ZMh:z}Ξ}^=aKEA%X:Nws}5 ~kN6\C+9ⲩ# c鮽C?M=?|,oCOo~a .bnৠ};rkP{܉1>jx%t`9m栗X"FM;2khYJMª0Z9thjϱ x46=+t[$ֳC`!ލCHY:XyX MOnrW !``@@``@@``@@`` OH$j ``@@6   00   00   00   00 DF̀@```C  00    00    00 #Qf   00 #8  00   00   00   00   00 DF̀@```C  00    00    00    00 #Q3``@@  00   00   00 D   +  00   00   00   00   00x$5 `  00 ``@@```@@```@@```@@DF̀@```C  00    00    00   SK<5`  x6hsW:4A*IENDB`v1.0.9~dfsg/docs/source/images/splash-landscape.png0000644000000000000000000005023112160425301021071 0ustar rootrootPNG  IHDR)RtEXtSoftwareAdobe ImageReadyqe<P;IDATx T}/a\%k 6Q$1Q$i bi"OUƄƠIFnRi@C6䟠,+}فe'vgfg/]s~9;:?\:CBq8CvqxҐV n!CUv0q                            @@@@@@@@@@@@@@@@@@@@@@@@Ʀ!{&c^*;{nm 0D}CP:m˙;&s[y#Յ֝?e3ף-?}FNI?\cA-;7:/ WU-W>^Ţ`0e= ]SlCڙ5 kUhxh3 j^jܐg!A \| O d1 =J!@N@i&(Ƕ<׸֓*O , \UQRsϚ )>DdMGz:bĻZ6^ Of.3K/v  O0FyT=tNr]BKӶl):7@Nq5ʣ]g.;u箦m/ |ObtEv  O0GyKHnS`ښI3j?Аu/*_Ps]v  O0G9(]_|GÜg  } 50b[{T]} `$%cM }p?㿠` ;={oyKȼ=xbCI fOJ/S`P5<֝^zK/JOU] " s3HmMMk2 q`9VU{:RG.~ϙ<]dIV$@"(sO/J&B5μp4:jZǚrwu+G{L*U\a>r~ RG7nʺ` *||,TC@2*혹nV ZldFzOzm|1S'6 t 7F\&T3T>foZrNY<]ZW7*g @]Zw?S\Qv޹EE1TG yi;0d}?vUE?Tov.@%幬 q3Dk>>c]y\f2QcOdHmmۓzgS}J@KQyKY1t!HU\p иd oTh܎K2^r ee.U' E#SՅ+&%ۂ ],(02r9c 0cKdD}C|^PhY?PZ7g"]*4cuuٽSOJ7r5j -T@B:L!LE4@A8 =a Rɲ=}ժ,R`r5R;%'/`76!y cxLGkv(P yxm*iCw1w5 @(P8AȫTYCiۋyHbrKqxԑ OgX[gu и9 v3OG<4Ճ}|9ގ @^кg/E03}KƧ^Hm`E'3`3qeO3yʗ!aO[yF;wP켷F-Ӯ[y3O77bm@eSE_;՝Ć~CLY<\U:R 7" `[`U̥ *^Jw\_Ťi+2 ?PTGs*;gz! TRp \s󲺒9 jwOsD]i7Pl7= 7/)sƴV24=+ ?0u嵑%K_k=`:&/Wg}2 |?XJqeV\>c:а"4c͝| cL:Z-Ͻz ;w*;S\!^dΛހ4>uN/lFk?qʉ@2 ?ѧ^1ByK^}=aFP>VD3HƁ5w2 p*!+|׋ Sg'}Αǟ,;w5a{Ah6yh$xۿ 2؋ڙ&4v2cU?P=crCI߽ B / hdm^U/'0hާ`lxH3u_ޯ֟avrU]HmòB |utEw j3 '|q p4G wg#j̤7%VG  =(T\ڲ}`^Y;A  =0V[7:_kZm~nl D^ ,.M-۷;  OC?Ex:t[_5FAyZ'b\uu@@v 꿤TGS!;{ի>5:w T. H n;|ߑ P1Vht NK5>í;w5nrt߼UUhЏԤߜlj `@ g@+myCzKzl%:2"5eU.:lpUs\umPnZ2wάo • P Sl] C:2J̝*/tI~ˇr OE_pAv6\7o{|: ,WA^00@~31M͙qf@|'p8n4Djk𷡲w6Ւ l WU-#4 XRx:tn@@]htCN:gp PW5.(?<w҃_ogu@ix k:#CkzTbt6iݵ~SGƊË/#4@Wmgu 0 .H@w_={Ʃ׭D}>  OD YWeVysy4v6\OwR2wNyA;gٵސ̮^5ڏ  ꣾNuug<7Dlvv"eHmM IQtfv Q Oкg ݝ]?o:F(O Е7zEAh#m}-Y;#@i +37󦟩10ʝ}/^T6xYrtƠR@ @}7{OdWz[ή.m\?13@|$0@Q7͈̼gM_@}\,nR̂3QER ge-(^c@h,}Bŕ}2@j:%"Pc8kݪ>ƫ,F9D)"q KM/Tr֛{^0@Q8Zq.7ny.R; hOXe^|,nQZ7wTY#?}}af/N7^:~YW(<cZ=ދpp<]dDޚM^|?a?vJ@^׮h*DͺT@PC~tC6=W# ͱaO*h̜ r劉Ke+W_$1#O=ݸ\]OI<8nk}+ d7}2ʡPqEZV`^=kUкsne Z5:,.sm@A+-\.`MugCPu^җuAD}+>ehtƚ*EɶF`V E|􊠖ޓݚ~I59WgAE>O?5+FYcZ*?HmMi@QWݙ8͋"[5  hu+NUÓOky_[Y]S(Z2-U94o{)k 6h-d "3V@q ^ߛZwHC-=PIɸTG&ठ"QPѳiXsWtNWJ:/ n  ˂GrxR(\hm: uB M~Of1+μ~& V #S@=+N z=em?Eٓzp J=-_OO`|ޡ9_Yi]֕EqFg@m+"}3w*kZao 4rF$.M65n~q\:V <@>7͡>C}W%3#TN_1~0 ox…79˂SK xA髄Hm;T=ҒC-{~4M^ P53VEQq{ V #g@+થ.ܡQo"piQ$痍77dxH/F^TM3:/(a̲d[h哗g> AFGO?!Ĺ/'zᑫ 1Gy P$Ւ #PhPqYԠmG(\xiدkr @+N?*x0 R[}#O]L *k#O>9 r4=/O)W8 7۱@Bxw "Eы/m_z%cMPQ?w޵TGQ-R[]M$c#x6 t7M;;~{xXsԫV:'@v{\PYfW.u}"Q`)ٞJĊO/ֳ3eF!ݐ{K`lg7;u5PQ}ڐG!\ڗEjg-;#Qtm@ [-T\hN?ʾ13#Gp4/Foݍ#}_1 R|W vkk*a0AP&hޠ%T뎼/mFٳn“/X,cpFaz#]j6P2c͝]fG3UyoD9 0%ۧ\qa(*3W(薌by.@\Ţw"2sp<)Y]F@`(6 0Q= Ql>ruw|Z,w,JÏ=oۼ++ $0dY?p.=1Y)+>2v.1 @JŢw ^r1VYf~PVT.Y2z֝*k줪.hHoh\70:E G}.9uo1@%xȍ W|xomyNBGcgN09)sfzfݸ)FoH{^uc=0I%.}׮$k'J•@UfC<߳Rg1@Djed[dAj۝@U.JNY* ~XբѲo3@~T,zG. pJ-;rzrEv fEI%2iݙS(w@ȫTե~``GUTA) D}C.JIF %r] Зm/C &_<-@ȿ9gf^2W9Aeϴ׺0kfV @0\l?h,J)+WLJ%[>¥E_yA"3֬)DSQQ*  ` pɯWA?uӥG˱R˒MmM[w L[rʊ}&ۇg@ W;Wl)_RW7c]%sLOLcPqEӶ>DZ牎PEu8@@p_ځKIOI%r+P#O~qQ^wh;)>XPdorN%WT\3ٷ%3/(޸#O>9zu^|i~K@J]wp;f8Nae4.oBO Hmm廗D-+;']'  MƾˮžP!u. KM[$mIst3]73@NF(՟]yVw7KmAhݾe .~P~@J]}S[9ӟJoyYФāL @Gcc& ܟ4kVȬ KWUSDߜ5 )>ds{%qZpB.1 }e .d*(J&B:!h  c|:4<+tS]?g0Bq@Q TQ*5FZ88~†@@@@@@@@@@@@@@@@@ȣ!KƚԶgo|ޒ翭b ;ViFNaښmAFp-QZВI5]/Ѽ()?)ձ-zANU۶{O1~śXJÏ>jZƮ¥}#4N t4wWt7!Acm?p4qPwJJ>?^5nQdI7P  5NjyW?ݗYlN;t_uc'Ņ z4np׬UOEfjݱ\Yot֛{ '{@;i֬`/x?m VTU=r:=6Grvqtr :M6RNJ8jjg[׷?ZW…Aå?̺nz6o97M?SV/8/OOKk/&_v)_m`$ރS7{Ejgo@8=}髾0(JpI%uh-<~ed問}j{ jT(8ќIsE7MY񑠲Jz1gvx;\*.k|~c-F%W]?9p=GvoxC UF9\ھ>Ӷ;VU-(, ꕏ}k^4WDZo?dF2ׅ*c9'o]Cw3UFɼi``3 WU9|zǮg mME?^ﶮ+Buuun}r+޵۽3=g},'XZ6{g~h>6P8=P VMYX˃(T'?{[ rǻN#8:O$s]o%Ny<p,e-8{Y;iG6>)&/?Jիo-_>6ۿڏJۣN'|ŇSeuœ˖ k?k tby(]&3J{KMJk珿-XHK2KU^S[9霚@20>3PYx ΙY}Q4k [pa7.~wf->,OkqI/,lF,…]c=IHPiGtn%7:׺>VޅUgݵ}6GKfKޓJ|?pquy7o\]cWw䩧8+<8|$_ݦ@9#?Wka-˖NZQz0s_WWv:}7|'Xk: |eO`,h] 5Jͺt/jnua@khEWO.y˛>l/;oU7e**dio׮7{"A&/3kA2)mDPe rE[PO׬P{ߓ[!]ܵds3 Iv5o=c]酔3rɒ߃5m{<{Yr找< '.ػWhI}>3Vߖ[~ܵ`42O+TGkڙqd^*KU+* K~yBh?HO^֓/,{tc'(?Tԕׄ+v7u+ZByKu.9ڮgqg>l~ i@0gw'_~ ˋv O: Nu PZWW>x{|3Fmu+zLb@}켺5wznFf>R:ZW^sߺw/QN醮~2E|I]]ǩ539uL٭ r)+Qr2ax}#_ X}MxzK=˃Pxd8>Sy|'rk `czUZ7@z*:oOHW]$T1mhݹgψV\iˎݤ%Qpx |)==.f29мpEɉ.ؕP:ܗ5sI|X~NdҮ=hh1{2Wz< >]AdՕ'.5I5T*/#*_xH߈Wэ1q"=;5Lm(?my~W1w閞Iv'=s6|Ⴒ5DY}r+2sF00 (ӻu҅\N _gӿpmhwUA}:P}>ޑXzdFU_k] gܣr6}>#Л#&_qY׵Eǟx#?(;ϟGe]s֋/¥A&y'NYFjtZ33T[ N{Cz(;gu|s\l̟7gbLtٲY=*_G6n:p۱{utW/eN$̪KD0;'и9? ]|WDf{kw){u묡|{O?¼K$=eUqSO6M%'/БoL[^]vix)^Aԣ^8ZnӢWre&@r[IlI6N_VC%ǎe|]-eb?xoُ@FVjglƿyA]~ou[Pc+:Z^%onA xkZDuO2SV,?Gp4: gQO,;Q1o۽;֯?oOC]|+鶙L^[ZXpve8Z5Lvϲr*vj?. EZw7'?eǮ{3C~(x؁`x[0o2Uv[]2 \{_ڝ~ӟz]eǿe!@V УNիo=;ǧ\ڢy5"&/@C8=_殮gsO&.{f}8nx+>_3P`A.cpݚ1I?qğDSHys9 kC~6q=)mwtDr͎w=9)\N?u(lM~RTGSP׬JmrO) >H.۰R6^׃LmvO ˪:D\$+o/̘us:'8]Ah~Rܳw>v&py($}?5T*qrɻQ2I[y}KȧN1(xGdeYשS>+BW^zq.wAեz SSw iyJSi'O 1=,zUwĴ1o~绖vB`X:twwϔȓzOy|%XPr GUK/ʥUG?Ƹ|Š&k9'_HPݯeMv"#yyэOw_nK{/x+)-w4rDc0u|pU(@*}|4=g ~ʲ szǪoe =@躬|;[3e}& e( 뒧6\1)V D#O5{3W;\'YfOg3LݟIM*4Cٰ3':! 9|wt٥]N(,:(2-(F+z?;)Z cK|G* 2CS8d{2-];zz~= -t&ﺭe}~']\g= rNumzԕW 0/4~/6*G7d"Dɽ_Ӕ'ͮi|~+`>hJԧ|?}32{ 50cQS V m;V>m SfrGT<)å%v_Nۧx}y^Bd֬#?ݜx{[{/E?Evz/g,3Q&RCڙU]s '*skjkN'Y\9=f溵D}H⪪%LJ/uΙZNfX~77vP(" cͮuU+K9{c\PgXSv=*xod.}nc_/:~ c}gUUξ5}?m}of^ٵ}^!IU]m_n+AɬuǮ:Uc/ zSpa8t(/}_e*#g%e[_l77=iwQe?W%hU۞?hhٹ+KGX,cU?P=}; (w^'N:YA J:񙠈 w1~o_Ww/k-(0sxrʕ+}>_K[6^1'^ks o<>='Uf?շU]E:6˙M v|p6uumMj?{|ou3L*,xMo`~u%7W%Szr؆?u]P{|Kƛ[o~<[Zv _~Xsl7e+g۫.ywֽ ub^'_G+sFo;ګ? 8rs-\8e#O~i붮GPQMթDl"HU %rwG6Oԕ+K '2KzݧK9wao_/<cgz'gw;~98[w-8X1~B` WE3)[ d6k9{7lhdVmdfMZ{Jo_z'!.j'Xl?vAÔw:-q`gN.=~kM^vKG[\]K~Cz^җ{ϐ>Aw&~ˁd:' 0Tk8\YI8T\^.ޓlɠ~^KY(\=d{u9fwɦӪmH&%˒2vfz ? @“B~]v4ՒezW'"\ջZ ppi(ToÊJ' SE _юqݩߵ$OJ)A*.=y9T_NXSKRm9)5zPwW+SƞhC(<ݝ[z%==h#Q @Sz.E`ɾWk*(G{3^m TeXEwɎ{|BBnsM5.0Q*dSTuU 9 YXBrm@@@@@@@@@@@@@@@@f?`0`0 `0 `0 0 ` `0 `@0 `0 0 ` `0 `0 `00 ` `0 `0 `00 ` `0 `0 `00 ` `0 0 0Qi R׈IENDB`v1.0.9~dfsg/docs/source/partials/0000755000000000000000000000000012160425301015512 5ustar rootrootv1.0.9~dfsg/docs/source/partials/_head.haml0000644000000000000000000000236412160425301017422 0ustar rootroot%head %meta{ :charset => "utf-8" } %meta{ :content => "IE=edge,chrome=1", "http-equiv" => "X-UA-Compatible" } %title= page_title %meta{:content => "Susy: Semantic grids with a responsive touch.", :name => "description"} %meta{:content => "width=device-width", :name => "viewport"} %meta{:content => "yes", :name => "apple-mobile-web-app-capable"} %link{:rel => "apple-touch-startup-image", :media => "screen and (max-device-width: 480px) and not (-webkit-min-device-pixel-ratio: 2)", :href => "images/splash-iphone.png"} %link{:rel => "apple-touch-startup-image", :media => "screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)", :href => "images/splash-iphone4.png"} %link{:rel => "apple-touch-startup-image", :media => "screen and (min-device-width: 768px) and (orientation: portrait)", :href => "images/splash-portrait.png"} %link{:rel => "apple-touch-startup-image", :media => "screen and (min-device-width: 768px) and (orientation: landscape)", :href => "images/splash-landscape.png"} - if data.page.stylesheet = stylesheet_link_tag data.page.stylesheet - else = stylesheet_link_tag "site.css" = javascript_include_tag "modernizr-2.5.3.min.js" = javascript_include_tag "modernizr.selectors.js" v1.0.9~dfsg/docs/source/partials/_navigation.haml0000644000000000000000000000067212160425301020660 0ustar rootroot%ul %li %a{ :href => "/guides/getting-started/" } Getting Started %li %a{ :href => "/guides/reference/" } Reference %li %a{ :href => "/demos/" } Demos %li %a{ :href => "/sites-using-susy/" } Sites %li %a{ :href => "https://github.com/ericam/susy" } Source %li %a{ :href => "http://stackoverflow.com/questions/tagged/susy-compass"} Support %li %a{ :href => "http://twitter.com/compasssusy/" } Twitter v1.0.9~dfsg/docs/source/partials/_demonav.haml0000644000000000000000000000010612160425301020142 0ustar rootroot%nav{ :role => "navigation" } %a{ :href => "/demos/" } Back to Demosv1.0.9~dfsg/docs/source/partials/_contentinfo.haml0000644000000000000000000000372512160425301021051 0ustar rootroot:plain

Susy is based on Natalie Downe's CSS Systems, made possible by Sass, and made easy with Compass. You can use it anywhere, from static sites to Django, Rails, Wordpress and more.

This site was built with HTML5 and CSS3 using Middleman, Compass, Sass, Susy, HTML5 Boilerplate, Modernizr, Modular Scale, Solarized colors, Pygments syntax highlighting, IcoMoon icons, and Franklin Gothic with Century OldStyle from Fontspring.

Susy was created by Eric A. Meyer & OddBird, and is maintained with the help of Danny Palmer, and a number of wonderful contributors. Get involved!

Copyright © 2012 Eric A. Meyer
An OddBird project.

v1.0.9~dfsg/docs/source/partials/_google_analytics.haml0000644000000000000000000000044212160425301022037 0ustar rootroot:javascript var _gaq=[['_setAccount','UA-30497331-1'],['_trackPageview']]; (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js'; s.parentNode.insertBefore(g,s)}(document,'script'));v1.0.9~dfsg/docs/source/partials/_javascripts.haml0000644000000000000000000000024212160425301021043 0ustar rootroot= javascript_include_tag "jquery-1.7.1.min.js" = javascript_include_tag "jqwidont.js" = javascript_include_tag "viewport.js" = partial "partials/google_analytics"v1.0.9~dfsg/docs/source/stylesheets/0000755000000000000000000000000012160425301016247 5ustar rootrootv1.0.9~dfsg/docs/source/stylesheets/_base/0000755000000000000000000000000012160425301017320 5ustar rootrootv1.0.9~dfsg/docs/source/stylesheets/_base/_type.scss0000644000000000000000000000074412160425301021342 0ustar rootroot// --------------------------------------------------------------------------- // Type Settings $base-font-size : $normpx; $base-line-height : $medpx; $round-to-nearest-half-line : true; // --------------------------------------------------------------------------- // Type Mixins @mixin ellipsis($r:1) { overflow: hidden; max-height: rhythm($r); white-space: nowrap; word-wrap: break-word; -o-text-overflow: ellipsis; text-overflow: ellipsis; } v1.0.9~dfsg/docs/source/stylesheets/_base/_size.scss0000644000000000000000000000251012160425301021324 0ustar rootroot// --------------------------------------------------------------------------- // Imports @import "modular-scale"; // --------------------------------------------------------------------------- // Size Settings $base-size : 16px; $ratio : major-third() fifth(); $norm : 1; $xxxsmall : ms(-4,$norm); $xxsmall : ms(-3,$norm); $xsmall : ms(-2,$norm); $small : ms(-1,$norm); $small-norm : (ms(-1,$norm) + $norm)/2; $large-norm : (ms(1,$norm) + $norm)/2; $med : ms(1,$norm); $large : ms(2,$norm); $xlarge : ms(4,$norm); $xxlarge : ms(8,$norm); $xxxlarge : ms(16,$norm); $normem : 1em; $medem : ms(1,$normem); $smallem : ms(-1,$normem); $xsmallem : ms(-2,$normem); $xxsmallem : ms(-3,$normem); $xxxsmallem : ms(-4,$normem); $small-normem : (ms(-1,$normem) + $normem)/2; $large-normem : (ms(1,$normem) + $normem)/2; $largeem : ms(2,$normem); $xlargeem : ms(3,$normem); $xxlargeem : ms(6,$normem); $xxxlargeem : ms(12,$normem); $normpx : $base-size; $medpx : ms(1); $smallpx : ms(-1); $xsmallpx : ms(-2); $xxsmallpx : ms(-3); $xxxsmallpx : ms(-4); $small-normpx : (ms(-1,$normpx) + $normpx)/2; $large-normpx : ms(2); $largepx : ms(4); $xlargepx : ms(6); $xxlargepx : ms(12); $xxxlargepx : ms(16); v1.0.9~dfsg/docs/source/stylesheets/_base/_base.scss0000644000000000000000000000077712160425301021301 0ustar rootroot//----------------------------------------------------------------------------- // Imports @import "compass"; @import "compass/layout"; @import "susy"; //----------------------------------------------------------------------------- // Grid Settings $total-columns: 4; $column-width: 4em; $gutter-width: 1.5em; $grid-padding: $gutter-width; $break: 40em 10; //----------------------------------------------------------------------------- // Other Settings @import "colors"; @import "size"; @import "type"; v1.0.9~dfsg/docs/source/stylesheets/_base/_colors.scss0000644000000000000000000000252412160425301021660 0ustar rootroot// --------------------------------------------------------------------------- // Color Palette (Solarized: http://ethanschoonover.com/solarized) $base03: #002b36; $base02: #073642; $base01: #586e75; $base00: #657b83; $base0: #839496; $base1: #93a1a1; $base2: #eee8d5; $base3: #fdf6e3; $yellow: #b58900; $orange: #cb4b16; $red: #dc322f; $magenta: #d33682; $violet: #6c71c4; $blue: #268bd2; $cyan: #2aa198; $green: #859900; // --------------------------------------------------------------------------- // Color System $base : $base00; $alt : $red; $accent : $violet; $susy-background: $base3; $susy-highlight: $red; $susy-bodycopy: $base00; //5% darker $susy-background-dark-5: darken($susy-background, 5%); $susy-highlight-dark-5: darken($susy-highlight, 5%); $susy-bodycopy-dark-5: darken($susy-bodycopy, 5%); //10% darker $susy-background-dark-10: darken($susy-background, 10%); $susy-highlight-dark-10: darken($susy-highlight, 10%); $susy-bodycopy-dark-10: darken($susy-bodycopy, 10%); //20% darker $susy-background-dark-20: darken($susy-background, 20%); $susy-highlight-dark-20: darken($susy-highlight, 20%); $susy-bodycopy-dark-20: darken($susy-bodycopy, 20%); $grid-background-column-color: rgba(lighten($susy-background,5%),.5); v1.0.9~dfsg/docs/source/stylesheets/_layout.scss0000644000000000000000000000147012160425301020622 0ustar rootroot//----------------------------------------------------------------------------- // Layout .page { @include container; position: relative; :target & { @include susy-grid-background(); .off a { display: block; } .on a { display: none; } } @include at-breakpoint($break) { @include container; :target & { @include susy-grid-background(); } } } [role="main"] { @include trailer(1); @include at-breakpoint($break) { @include trailer(2); } } [role="contentinfo"] { clear: both; } //Exceptions .guides, .tutorial { [role="main"] { @extend %type; } .secondary { display: none; } @include at-breakpoint($break) { .secondary { @include span-columns(3); display: block; } [role="main"] { @include span-columns(7 omega); } } } v1.0.9~dfsg/docs/source/stylesheets/_modules/0000755000000000000000000000000012160425301020056 5ustar rootrootv1.0.9~dfsg/docs/source/stylesheets/_modules/_secondary.scss0000644000000000000000000000072212160425301023102 0ustar rootroot//----------------------------------------------------------------------------- // Secondary Content .secondary { @include sans; h2 { @extend .caps; a { color: $susy-bodycopy-dark-5; } ~ h2, ~ h3 { @include leader(1); } } h2, h3 { font-weight: bold; } } .version { @include leader(1.25); @include trailer(1.25); font-family: $caps-stack; color: $susy-bodycopy-dark-10; text-transform: lowercase; span { color: $susy-bodycopy; } } v1.0.9~dfsg/docs/source/stylesheets/_modules/_toggle.scss0000644000000000000000000000136312160425301022376 0ustar rootroot//----------------------------------------------------------------------------- // Grid Toggle .grid-toggle { display: none; position: absolute; top: .5em; right: $grid-padding; .target & { display: block; } } .on, .off { a { #{$link} { @extend %icon-replace; @extend %icon-list-2; @include transition(all 300ms); @include adjust-font-size-to($medpx); position: relative; width: rhythm(1.5,$medpx); color: $susy-background-dark-20; } #{$focus} { color: $susy-bodycopy; } &::before { @include rotate(90deg); @include stretch; text-indent: 0; } } } .off a { #{$link} { display: none; color: $susy-highlight; } } .on a { display: block; } v1.0.9~dfsg/docs/source/stylesheets/_modules/_pages.scss0000644000000000000000000000024312160425301022210 0ustar rootroot//----------------------------------------------------------------------------- // Pages .sites-using-susy { @extend %simple; } .demos_index { @extend %simple; } v1.0.9~dfsg/docs/source/stylesheets/_modules/_nav.scss0000644000000000000000000000226412160425301021702 0ustar rootroot//----------------------------------------------------------------------------- // Site Nav [role="navigation"] { @include trailer(1); background: $base2; background: rgba($base2,.5); font-style: italic; ul { @include inline-block-list; } a { #{$link} { @extend %icon; display: block; padding: rhythm(.25) rhythm(.5); color: $susy-bodycopy; &[href*='github'] { @extend %icon-github; } &[href*='twitter'] { @extend %icon-twitter; } &[href*='stackoverflow'] { @extend %icon-comment; } &[href*='getting-started'] { @extend %icon-switch; .guides_getting-started &, .tutorial & { color: $susy-bodycopy-dark-10; } } &[href*='reference'] { @extend %icon-list; .guides_reference & { color: $susy-bodycopy-dark-10; } } &[href*='sites-using-susy'] { @extend %icon-pictures; .sites-using-susy & { color: $susy-bodycopy-dark-10; } } &[href*='demos'] { @extend %icon-cog; .demos & { color: $susy-bodycopy-dark-10; } } } #{$focus} {color: $susy-highlight-dark-20; } } @include at-breakpoint($break) { @include trailer(2); } } v1.0.9~dfsg/docs/source/stylesheets/_modules/_intro.scss0000644000000000000000000000241212160425301022244 0ustar rootroot//----------------------------------------------------------------------------- // Intro %serif-type { @include adjust-font-size-to($medpx); h2 { @include adjust-font-size-to($largepx,1.5,$medpx); } p { @include trailer(1,$medpx); } strong { font-weight: bold; } em { font-style: italic; } } .download { @include adjust-font-size-to($medpx); @include rhythm-borders(1px,.5,$medpx); @include leader(-.5,$medpx); @include trailer(1,$medpx); @include box-sizing(border-box); border-color: $susy-background-dark-20; background: $susy-background-dark-10; font-weight: bold; text-align: center; text-transform: uppercase; letter-spacing: .1em; @include at-breakpoint($break) { @include span-columns(5 omega); } } .highlight { color: $susy-bodycopy-dark-20; font-weight: bold; } .intro { @extend %serif-type; @include trailer(1,$medpx); p { &:last-child { font-style: italic; } } @include at-breakpoint($break) { @include span-columns(5); } } .info { p { margin: 0; } strong { color: $susy-bodycopy-dark-10; } @include at-breakpoint($break) { @include span-columns(5 omega); } } .andmore { @extend %serif-type; p:last-child { font-style: italic; } @include at-breakpoint(50em 10) { @include span-columns(5 omega,10); } } v1.0.9~dfsg/docs/source/stylesheets/_modules/_contentinfo.scss0000644000000000000000000000150512160425301023441 0ustar rootroot//----------------------------------------------------------------------------- // Site Banner [role="contentinfo"] { @include clearfix; @include text-shadow($susy-highlight-dark-10 0 1px 0); background: $susy-highlight; color: $susy-background-dark-5; margin: 0 0 - $grid-padding; padding: rhythm(1) $grid-padding; a { #{$link} { font-family: $caps-stack; color: $susy-background-dark-20; } #{$focus} { color: $susy-background; } } @include at-breakpoint($break) { .colophon { @include span-columns(7 omega,10); } .license { @include span-columns(3,10); } } .caps { font-family: $caps-stack; } } .colophon { p { @include trailer; } } .license { font-family: $caps-stack; text-transform: lowercase; a { #{$link} { white-space: nowrap; } } }v1.0.9~dfsg/docs/source/stylesheets/_modules/_banner.scss0000644000000000000000000000253212160425301022361 0ustar rootroot//----------------------------------------------------------------------------- // Site Banner [role="banner"] { @include leading-border(3px,.5); border-color: $susy-highlight; text-align: center; h1 { @include adjust-font-size-to($xxlargepx); @include at-breakpoint($break) { @include adjust-font-size-to($xxxlargepx); } span { display: none; } a { &:before { content: "\2039"; } &:after { content: "\203A"; } &:before, &:after { font-size: .875em; position: relative; top: -.16em; letter-spacing: -.025em; } #{$focus} { b, span { letter-spacing: 0; } span { opacity: 1; } color: $susy-highlight; } } @include at-breakpoint($break) { .fontface & { b, span { @include transition(all 300ms); display: inline-block; text-transform: uppercase; letter-spacing: -.44em; } span { opacity: 0; } } } } h2 { @include adjust-font-size-to($medpx); @include leader(-1,$medpx); @include trailer(.5,$medpx); display: block; position: relative; z-index: 2; @include at-breakpoint($break) { @include adjust-font-size-to($largepx); @include leader(-1,$largepx); @include trailer(1,$largepx); } } }v1.0.9~dfsg/docs/source/stylesheets/_modules/_ag-test.scss0000644000000000000000000000311712160425301022460 0ustar rootroot//----------------------------------------------------------------------------- // AG Test .ag-test { @include cond; @include clearfix; @include trailer; clear: both; background: $susy-background-dark-5; div { @include border-radius(.25em); min-height: rhythm(4); } h2 { padding: rhythm(.5) rhythm(.25); font-size: 1em; font-weight: bold; color: $susy-bodycopy-dark-20; text-align: center; } p { @include adjust-font-size-to($smallpx); display: block; padding: rhythm(.5,$smallpx) rhythm(.25,$smallpx); color: $susy-bodycopy-dark-20; text-align: center; } strong { display: block; text-transform: uppercase; font-weight: bold; } // color blocks .ag1, .ag3 { background: lighten($cyan,25); } .ag2 { background: $susy-background-dark-10; } .ag7 { background: $susy-background-dark-20; } .ag4, .ag5, .ag8, .ag9 { background: lighten($red,25); } .ag6 { background: lighten($orange,25); } .ag10 { background: lighten($magenta,25); } .ag1, .ag3 { min-height: rhythm(18); } .ag6 { min-height: rhythm(11); } .ag1 { @include span-columns(2,10); } .ag2 { @include span-columns(6,10); } .ag3 { @include span-columns(2 omega, 10); } .ag4 { @include span-columns(3,6); } .ag5 { @include span-columns(3 omega,6); } .ag6 { @include span-columns(2,6); } .ag7 { @include span-columns(4 omega,6); } .ag8 { @include span-columns(2,4); } .ag9 { @include span-columns(2 omega,4); } .ag10 { clear: both; } + .highlight { @include at-breakpoint(50em 10) { @include span-columns(5,10); } } }v1.0.9~dfsg/docs/source/stylesheets/magic.css.scss0000644000000000000000000000026012160425301021011 0ustar rootroot//----------------------------------------------------------------------------- // Imports @import "_demos/demo"; @import "_demos/magic/layout"; @import "_demos/magic/style"; v1.0.9~dfsg/docs/source/stylesheets/_vendor/0000755000000000000000000000000012160425301017703 5ustar rootrootv1.0.9~dfsg/docs/source/stylesheets/_vendor/pygments/0000755000000000000000000000000012160425301021551 5ustar rootrootv1.0.9~dfsg/docs/source/stylesheets/_vendor/pygments/solarized.scss0000644000000000000000000000626512160425301024453 0ustar rootroot.highlight { background-color: #f4f4f4; border: solid 1px #eee; } .c { color: #93a1a1; font-style: italic } /* Comment */ .g { color: #d33682 } /* Generic */ .k { color: #859900 } /* Keyword */ .l { color: #2aa198 } /* Literal */ .n { color: #268bd2 } /* Name */ .cm { color: #93a1a1; font-style: italic } /* Comment.Multiline */ .cp { color: #93a1a1; font-style: italic } /* Comment.Preproc */ .c1 { color: #93a1a1; font-style: italic } /* Comment.Single */ .cs { color: #93a1a1; font-style: italic } /* Comment.Special */ .gd { color: #d33682 } /* Generic.Deleted */ .ge { color: #d33682 } /* Generic.Emph */ .gr { color: #d33682 } /* Generic.Error */ .gh { color: #d33682 } /* Generic.Heading */ .gi { color: #d33682 } /* Generic.Inserted */ .go { color: #d33682 } /* Generic.Output */ .gp { color: #d33682 } /* Generic.Prompt */ .gs { color: #d33682 } /* Generic.Strong */ .gu { color: #d33682 } /* Generic.Subheading */ .gt { color: #d33682 } /* Generic.Traceback */ .kc { color: #859900; font-weight: bold } /* Keyword.Constant */ .kd { color: #859900 } /* Keyword.Declaration */ .kn { color: #dc322f; font-weight: bold } /* Keyword.Namespace */ .kp { color: #859900 } /* Keyword.Pseudo */ .kr { color: #859900 } /* Keyword.Reserved */ .kt { color: #859900; font-weight: bold } /* Keyword.Type */ .ld { color: #2aa198 } /* Literal.Date */ .m { color: #2aa198; font-weight: bold } /* Literal.Number */ .s { color: #2aa198 } /* Literal.String */ .na { color: #268bd2 } /* Name.Attribute */ .nb { color: #cb4b16 } /* Name.Builtin */ .nc { color: #cb4b16 } /* Name.Class */ .no { color: #268bd2 } /* Name.Constant */ .nd { color: #268bd2 } /* Name.Decorator */ .ni { color: #268bd2 } /* Name.Entity */ .ne { color: #268bd2 } /* Name.Exception */ .nf { color: #268bd2 } /* Name.Function */ .nl { color: #268bd2 } /* Name.Label */ .nn { color: #268bd2 } /* Name.Namespace */ .nx { color: #268bd2 } /* Name.Other */ .py { color: #268bd2 } /* Name.Property */ .nt { color: #268bd2; font-weight: bold } /* Name.Tag */ .nv { color: #268bd2 } /* Name.Variable */ .ow { color: #859900 } /* Operator.Word */ .w { color: #586e75 } /* Text.Whitespace */ .mf { color: #2aa198; font-weight: bold } /* Literal.Number.Float */ .mh { color: #2aa198; font-weight: bold } /* Literal.Number.Hex */ .mi { color: #2aa198; font-weight: bold } /* Literal.Number.Integer */ .mo { color: #2aa198; font-weight: bold } /* Literal.Number.Oct */ .sb { color: #2aa198 } /* Literal.String.Backtick */ .sc { color: #2aa198 } /* Literal.String.Char */ .sd { color: #2aa198 } /* Literal.String.Doc */ .s2 { color: #2aa198 } /* Literal.String.Double */ .se { color: #2aa198 } /* Literal.String.Escape */ .sh { color: #2aa198 } /* Literal.String.Heredoc */ .si { color: #2aa198 } /* Literal.String.Interpol */ .sx { color: #2aa198 } /* Literal.String.Other */ .sr { color: #2aa198 } /* Literal.String.Regex */ .s1 { color: #2aa198 } /* Literal.String.Single */ .ss { color: #2aa198 } /* Literal.String.Symbol */ .bp { color: #cb4b16 } /* Name.Builtin.Pseudo */ .vc { color: #268bd2 } /* Name.Variable.Class */ .vg { color: #268bd2 } /* Name.Variable.Global */ .vi { color: #268bd2 } /* Name.Variable.Instance */ .il { color: #2aa198; font-weight: bold } /* Literal.Number.Integer.Long */v1.0.9~dfsg/docs/source/stylesheets/site.css.scss0000644000000000000000000000124512160425301020701 0ustar rootroot//----------------------------------------------------------------------------- // Base @import "_base/base"; //----------------------------------------------------------------------------- // General @import "_general/root"; @import "_general/type"; //----------------------------------------------------------------------------- // Layout @import "layout"; //----------------------------------------------------------------------------- // Modules @import "_modules/banner"; @import "_modules/nav"; @import "_modules/toggle"; @import "_modules/ag-test"; @import "_modules/secondary"; @import "_modules/contentinfo"; @import "_modules/intro"; @import "_modules/pages"; v1.0.9~dfsg/docs/source/stylesheets/_general/0000755000000000000000000000000012160425301020023 5ustar rootrootv1.0.9~dfsg/docs/source/stylesheets/_general/_font-license.scss0000644000000000000000000000127412160425301023451 0ustar rootroot/* * Web Fonts from fontspring.com * * All OpenType features and all extended glyphs have been removed. * Fully installable fonts can be purchased at http://www.fontspring.com * * The fonts included in this stylesheet are subject to the End User License you purchased * from Fontspring. The fonts are protected under domestic and international trademark and * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or * distributing this font software. * * (c) 2010 Fontspring * * * * * The fonts included are copyrighted by the vendor listed below. * * Vendor: FontSite Inc. * License URL: http://www.fontspring.com/fflicense/fontsite * * */ v1.0.9~dfsg/docs/source/stylesheets/_general/_fonts.scss0000644000000000000000000000135712160425301022216 0ustar rootroot// --------------------------------------------------------------------------- // Imports @import "font-license"; @import "franklin-gothic"; @import "century-oldstyle"; //----------------------------------------------------------------------------- // Settings $mono-stack : Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif; //----------------------------------------------------------------------------- // Mixins @mixin serif { font-family: $font-stack; } @mixin sans { font-family: $sans-stack; } @mixin cond { font-family: $cond-stack; } @mixin caps($serif: false) { @if $serif { font-family: $caps-stack; } text-transform: uppercase; } v1.0.9~dfsg/docs/source/stylesheets/_general/_type.scss0000644000000000000000000000455512160425301022051 0ustar rootroot// --------------------------------------------------------------------------- // Basic Typography %type { @include sans; // ------------------------------------------------------------------------- // Headings h2 { @extend .caps; @include adjust-font-size-to($largepx); @include trailing-border(3px,.125,$largepx); @include trailer(.875,$largepx); border-color: $base2; font-weight: bold; ~ h2 { @include leader(2,$largepx) } @include at-breakpoint($break) { @include adjust-font-size-to($xlargepx); @include trailing-border(3px,.125,$xlargepx); @include trailer(.875,$xlargepx); ~ h2 { @include leader(2,$xlargepx) } } } h3 { @include adjust-font-size-to($largepx); @include leader(1,$largepx); @include trailer(1,$largepx); font-weight: bold; + h4 { @include leader(0); } @include at-breakpoint($break) { @include leader(2,$largepx); } } h4 { @extend .caps; @include leader(2); } h5 { font-style: italic; } h1, h2, h3, h4, h5, h6 { a { #{$link} { @extend %icon; @extend %icon-bookmark; position: relative; display: inline-block; &::before { @include transition(all 300ms); @include opacity(0); position: absolute; display: block; right: 100%; top: 0; margin-right: $xxxsmallpx; line-height: inherit; } } #{$focus} { &::before { @include opacity(1); } } } } h1, h2, h3 { a { #{$link} { color: $susy-bodycopy-dark-20; } } } h4, h5, h6 { a { #{$link} { color: $susy-highlight-dark-20; &::before { @include opacity(.75); } } #{$focus} { &::before { @include opacity(1); } } } } // ------------------------------------------------------------------------- // Block ul, ol, p { @include trailer; } li { @include trailer(.5); } ul { list-style: circle; } ol { list-style: decimal; } // ------------------------------------------------------------------------- // Inline strong, code { font-weight: bold; color: $susy-bodycopy-dark-5; } em { font-style: italic; } a[href^="http"] { @extend %icon-after; @extend %icon-out; &::after { font-size: .75em; } } }v1.0.9~dfsg/docs/source/stylesheets/_general/_icons.scss0000644000000000000000000000256212160425301022177 0ustar rootroot@include font-face ( 'susy', font-files( 'icons/susy.svg#susy', svg, 'icons/susy.woff', woff, 'icons/susy.ttf', truetype ), 'icons/susy.eot', normal, normal ); /* Use the following CSS code if you want to have a class per icon */ %icon-content { font-family: 'susy'; font-style: normal; font-weight: normal; speak: none; } %icon:before { @extend %icon-content; margin-right: .4em; } %icon-after::after { @extend %icon-content; margin-left: .4em; } %icon-replace { @extend %icon; position: relative; min-width: 1em; text-indent: -9999px; &:before{ position: absolute; top: 0; left: 0; text-indent: 0; margin-right: 0; } } /* Use the following CSS code if you want to use data attributes for inserting your icons */ [data-icon]:before { @extend %icon-content; content: attr(data-icon); } %icon-switch:before { content: "\e000"; } %icon-list:before { content: "\e001"; } %icon-cog:before { content: "\e002"; } %icon-twitter:before { content: "\e005"; } %icon-pin:before { content: "\e007"; } %icon-bookmark:before { content: "\e008"; } %icon-out:after { content: "\e009"; } %icon-list-2:before { content: "\e00a"; } %icon-arrow-left:before { content: "\e00b"; } %icon-pictures:before { content: "\e00c"; } %icon-comment:before { content: "\e003"; } %icon-github:before { content: "\e004"; } v1.0.9~dfsg/docs/source/stylesheets/_general/_root.scss0000644000000000000000000000306212160425301022043 0ustar rootroot//----------------------------------------------------------------------------- // Imports @import "compass/reset"; @import "../_vendor/pygments/solarized"; @import "fonts"; @import "icons"; //----------------------------------------------------------------------------- // Variables $link : '&:link, &:visited'; $focus : '&:hover, &:focus, &:active'; //----------------------------------------------------------------------------- // Root @include establish-baseline; @include border-box-sizing; html { @include text-shadow(rgba(white,.5) 0 1px 0); color: $susy-bodycopy; background: $susy-background; font-family: $font-stack; } b, i { font-weight: normal; font-style: normal; } .amp { font-family: $amp-stack; } .caps { @include caps; } a { #{$link} { color: $susy-highlight; text-decoration: none; } #{$focus} { color: $susy-highlight-dark-20; } } //----------------------------------------------------------------------------- // Code Blocks .highlight { @include trailer(); background: transparent; border: 0; } code, pre { font-family: $mono-stack; } code { @include adjust-font-size-to($small-normpx); } pre { @include adjust-font-size-to($smallpx); @include rhythm-borders(1px,.5,$smallpx); background-color: $susy-background-dark-5; border-color: $susy-background-dark-10; overflow: auto; } //----------------------------------------------------------------------------- // Simple Pages %simple { [role="main"] { @extend %type; @include at-breakpoint($break) { @include pad(1,1); } } } v1.0.9~dfsg/docs/source/stylesheets/_general/_century-oldstyle.scss0000644000000000000000000000367012160425301024413 0ustar rootroot// --------------------------------------------------------------------------- // Settings $fallback : "Adobe Caslon Pro",Caslon,Baskerville,Palatino,"Palatino Linotype","Hoefler Text",Garamond,"URW Palladio L","Book Antiqua",Georgia,serif; $font-stack : "CenturyOldStyleFS", $fallback; $caps-stack : "CenturyOldStyleFSCaps", $fallback; $amp-stack : "BaskervilleAmp", $font-stack; // --------------------------------------------------------------------------- // Fonts @include font-face ( 'CenturyOldStyleFS', font-files( 'cos/CenturyOldStyle-Regular-webfont.woff', 'woff', 'cos/CenturyOldStyle-Regular-webfont.ttf', 'truetype', 'cos/CenturyOldStyle-Regular-webfont.svg#webfont', 'svg' ), 'cos/CenturyOldStyle-Regular-webfont.eot', normal, normal ); @include font-face ( 'CenturyOldStyleFS', font-files( 'cos/CenturyOldStyle-Bold-webfont.woff', 'woff', 'cos/CenturyOldStyle-Bold-webfont.ttf', 'truetype', 'cos/CenturyOldStyle-Bold-webfont.svg#webfont', 'svg' ), 'cos/CenturyOldStyle-Bold-webfont.eot', bold, normal ); @include font-face ( 'CenturyOldStyleFS', font-files( 'cos/CenturyOldStyle-Italic-webfont.woff', 'woff', 'cos/CenturyOldStyle-Italic-webfont.ttf', 'truetype', 'cos/CenturyOldStyle-Italic-webfont.svg#webfont', 'svg' ), 'cos/CenturyOldStyle-Italic-webfont.eot', normal, italic ); @include font-face ( 'CenturyOldStyleFSCaps', font-files( 'cos/CenturyOldStyleCaps-Regular-webfont.woff', 'woff', 'cos/CenturyOldStyleCaps-Regular-webfont.ttf', 'truetype', 'cos/CenturyOldStyleCaps-Regular-webfont.svg#webfont', 'svg' ), 'cos/CenturyOldStyleCaps-Regular-webfont.eot', normal, normal ); @include font-face ( 'BaskervilleAmp', font-files( 'amp/Baskerville-amp-webfont.woff', 'woff', 'amp/Baskerville-amp-webfont.ttf', 'truetype', 'amp/Baskerville-amp-webfont.svg#webfont', 'svg' ), 'amp/Baskerville-amp-webfont.eot', normal, normal ); v1.0.9~dfsg/docs/source/stylesheets/_general/_franklin-gothic.scss0000644000000000000000000000600112160425301024133 0ustar rootroot// --------------------------------------------------------------------------- // Settings $sans-stack : 'FranklinGothicFSBook', 'Helvetica Neue', Arial, Helvetica, sans-serif; $cond-stack : 'FranklinGothicFSCd', 'Helvetica Neue', Arial, Helvetica, sans-serif; // --------------------------------------------------------------------------- // Fonts // Franklin Gothic Book @include font-face ( 'FranklinGothicFS', font-files( 'fg/FranklinGothic-Book-webfont.woff', 'woff', 'fg/FranklinGothic-Book-webfont.ttf', 'truetype', 'fg/FranklinGothic-Book-webfont.svg#webfont', 'svg' ), 'fg/FranklinGothic-Book-webfont.eot', $weight : normal, $style : normal ); // Franklin Gothic Book Italic @include font-face ( 'FranklinGothicFS', font-files( 'fg/FranklinGothic-BookIt-webfont.woff', 'woff', 'fg/FranklinGothic-BookIt-webfont.ttf', 'truetype', 'fg/FranklinGothic-BookIt-webfont.svg#webfont', 'svg' ), 'fg/FranklinGothic-BookIt-webfont.eot', $weight : normal, $style : italic ); // Franklin Gothic Medium @include font-face ( 'FranklinGothicFS', font-files( 'fg/FranklinGothic-Med-webfont.woff', 'woff', 'fg/FranklinGothic-Med-webfont.ttf', 'truetype', 'fg/FranklinGothic-Med-webfont.svg#webfont', 'svg' ), 'fg/FranklinGothic-Med-webfont.eot', $weight : bold, $style : normal ); // Franklin Gothic Medium Italic @include font-face ( 'FranklinGothicFS', font-files( 'fg/FranklinGothic-MedIt-webfont.woff', 'woff', 'fg/FranklinGothic-MedIt-webfont.ttf', 'truetype', 'fg/FranklinGothic-MedIt-webfont.svg#webfont', 'svg' ), 'fg/FranklinGothic-MedIt-webfont.eot', $weight : bold, $style : italic ); // Franklin Gothic Condensed @include font-face ( 'FranklinGothicFSCd', font-files( 'fg/FranklinGothic-Cd-webfont.woff', 'woff', 'fg/FranklinGothic-Cd-webfont.ttf', 'truetype', 'fg/FranklinGothic-Cd-webfont.svg#webfont', 'svg' ), 'fg/FranklinGothic-Cd-webfont.eot', $weight : normal, $style : normal ); // Franklin Gothic Condensed Italic @include font-face ( 'FranklinGothicFSCd', font-files( 'fg/FranklinGothic-CdIt-webfont.woff', 'woff', 'fg/FranklinGothic-CdIt-webfont.ttf', 'truetype', 'fg/FranklinGothic-CdIt-webfont.svg#webfont', 'svg' ), 'fg/FranklinGothic-CdIt-webfont.eot', $weight : normal, $style : italic ); // Franklin Gothic Condensed Medium @include font-face ( 'FranklinGothicFSCd', font-files( 'fg/FranklinGothic-MedCd-webfont.woff', 'woff', 'fg/FranklinGothic-MedCd-webfont.ttf', 'truetype', 'fg/FranklinGothic-MedCd-webfont.svg#webfont', 'svg' ), 'fg/FranklinGothic-MedCd-webfont.eot', $weight : bold, $style : normal ); // Franklin Gothic Condensed Medium Italic @include font-face ( 'FranklinGothicFSCd', font-files( 'fg/FranklinGothic-MedCdIt-webfont.woff', 'woff', 'fg/FranklinGothic-MedCdIt-webfont.ttf', 'truetype', 'fg/FranklinGothic-MedCdIt-webfont.svg#webfont', 'svg' ), 'fg/FranklinGothic-MedCdIt-webfont.eot', $weight : bold, $style : italic ); v1.0.9~dfsg/docs/source/stylesheets/_demos/0000755000000000000000000000000012160425301017515 5ustar rootrootv1.0.9~dfsg/docs/source/stylesheets/_demos/magic/0000755000000000000000000000000012160425301020575 5ustar rootrootv1.0.9~dfsg/docs/source/stylesheets/_demos/magic/_style.scss0000644000000000000000000000355012160425301022774 0ustar rootroot//----------------------------------------------------------------------------- // Style $grid-background-column-color: lighten($susy-background,3%); %text { @include sans; h2, h3, h4 { font-weight: bold; } h2 { @include adjust-font-size-to($largepx); @include trailer(1,$largepx); } h3 { text-transform: uppercase; } h3, p, ul, ol { @include trailer; } strong, code { font-weight: bold; } em { font-style: italic; } } body { @include background( linear-gradient(top, $susy-background, $grid-background-column-color 10%, $grid-background-column-color 80%, $susy-background ) ); } .page { @include susy-grid-background; @include at-breakpoint($break) { @include susy-grid-background; } } .banner { @include sans; @include leader; @include trailer; font-weight: bold; h1 { @include adjust-font-size-to($xlargepx); color: $red; } h2 { text-transform: uppercase; } } .pagenav { @include cond; @include trailer(1); font-weight: bold; h3 { display: none; } li { display: inline-block; margin-right: 1em; } @include at-breakpoint($break) { @include leader(3); li { display: block; margin-right: 0; } } } .main { @include trailer; } .content { @extend %text; } .summary { color: $base1; h3 { @include trailer; text-transform: uppercase; } p { @include trailer; font-style: italic; } @include at-breakpoint($break) { @include leader(3); } } .contentinfo { @include padding-leader; @include padding-trailer; @include text-shadow($susy-highlight-dark-10 0 1px 0); background: $alt; color: $base3; a { #{$link} { color: $susy-background-dark-20; font-weight: bold; } #{$focus} { color: $base3; } } p { @include trailer; } b { font-weight: bold; } } v1.0.9~dfsg/docs/source/stylesheets/_demos/magic/_layout.scss0000644000000000000000000000160212160425301023145 0ustar rootroot//----------------------------------------------------------------------------- // Settings $total-columns : 7; $column-width : 4em; $gutter-width : 1em; $grid-padding : $gutter-width; $break : 12; //----------------------------------------------------------------------------- // Container .page { @include container($total-columns, $break); } //----------------------------------------------------------------------------- // Layout @include at-breakpoint($break) { .banner { @include prefix(2,12); } .pagenav { @include span-columns(2,12); } .main { @include span-columns(10 omega, 12); .content { @include span-columns(7,10) } .summary { @include span-columns(3 omega, 10) } } } .contentinfo { clear: both; margin: 0 0 - $grid-padding; padding: 0 $grid-padding; @include at-breakpoint($break) { margin: 0; @include pad(2,3,12); } }v1.0.9~dfsg/docs/source/stylesheets/_demos/types/0000755000000000000000000000000012160425301020661 5ustar rootrootv1.0.9~dfsg/docs/source/stylesheets/_demos/types/_layouts.scss0000644000000000000000000000350412160425301023417 0ustar rootroot//----------------------------------------------------------------------------- // Expanded Container Mixin @mixin demo-container { @include container; background: $base2; &:hover { @include susy-grid-background; background-color: transparent; } } //----------------------------------------------------------------------------- // Magic Grid $total-columns: 12; $column-width: 4em; $gutter-width: 1em; $grid-padding: 1em; $container-width: false; $container-style: magic; .magic-container { @include demo-container; } //----------------------------------------------------------------------------- // Fluid Grid $total-columns: 12; $column-width: 60px; $gutter-width: 20px; $grid-padding: 10px; $container-width: false; $container-style: fluid; .fluid-container { @include demo-container; } $container-width: 60%; $container-style: fluid; .fluid-60-container { @include demo-container; } //----------------------------------------------------------------------------- // Static Grid $total-columns: 12; $column-width: 4em; $gutter-width: 1em; $grid-padding: 1em; $container-width: false; $container-style: static; .static-container { @include demo-container; } //----------------------------------------------------------------------------- // Mixing and Matching $total-columns: 12; $column-width: 60px; $gutter-width: 20px; $grid-padding: 10px; $container-style: static; $container-width: 1140px; .larger-960-container { @include demo-container; } $total-columns: 12; $column-width: 60px; $gutter-width: 20px; $grid-padding: 10px; $container-style: magic; $container-width: 60em; .elastic-960-container { @include demo-container; } $total-columns: 12; $column-width: 6%; $gutter-width: 2%; $grid-padding: 1%; $container-style: magic; $container-width: 50em; .elastic-percentage-container { @include demo-container; } v1.0.9~dfsg/docs/source/stylesheets/_demos/types/_template.scss0000644000000000000000000000206312160425301023531 0ustar rootroot//----------------------------------------------------------------------------- // The Basics $total-columns: 6; $column-width: 4em; $gutter-width: 1em; $grid-padding: 1em; $container-width: 500px; [role="main"] { @extend %type; @include trailer(5); h2, h3, > p, div { @include container; } aside { border: 1px solid $base2; text-align: center; b { font-weight: bold; } p { @include trailer(2); } } } //----------------------------------------------------------------------------- // Banner [role='banner'] { @include container; @include sans; @include leader; @include trailer; font-weight: bold; h1 { @include adjust-font-size-to($xlargepx); color: $red; } h2 { text-transform: uppercase; } } $total-columns: 9; $container-width: false; .pagenav { @include container; @include trailer; @include sans; background: $base2; text-align: center; ul { @include inline-block-list; } a { display: block; padding: rhythm(.5) rhythm(1); font-weight: bold; text-transform: capitalize; } } v1.0.9~dfsg/docs/source/stylesheets/_demos/_demo.scss0000644000000000000000000000112212160425301021471 0ustar rootroot//----------------------------------------------------------------------------- // Base @import "_base/base"; //----------------------------------------------------------------------------- // General @import "_general/root"; @import "_general/type"; //----------------------------------------------------------------------------- // Modules [role="navigation"] { padding: rhythm(.5); background: $base03; color: $base1; font-style: italic; a { #{$link} { @extend %icon; @extend %icon-arrow-left; color: $base2; } #{$focus} { color: $base3; } } } v1.0.9~dfsg/docs/source/stylesheets/grid-types.css.scss0000644000000000000000000000026412160425301022024 0ustar rootroot//----------------------------------------------------------------------------- // Imports @import "_demos/demo"; @import "_demos/types/layouts"; @import "_demos/types/template"; v1.0.9~dfsg/docs/source/index.html.md0000644000000000000000000000627412160425301016300 0ustar rootroot
gem install susy

Your markup. Your design. Our math.

The web is a responsive place, from your lithe & lively development process to your end-user's super-tablet-multi-magic-lap-phone. You need grids that are powerful yet custom, reliable yet responsive.

10-column complex nested grid AG test

ag1 2 of 10

ag2 6 of 10

ag4 3 of 6

ag5 3 of 6 (omega)

ag6 2 of 6

ag7 4 of 6 (omega)

ag8 2 of 4

ag9 2 of 4 (omega)

ag10 auto

ag3 2 of 10 (omega)

:::scss // Complex AG grid, brought to you by Susy: .ag1 { @include span-columns(2,10); } .ag2 { @include span-columns(6,10); } .ag3 { @include span-columns(2 omega, 10); } .ag4 { @include span-columns(3,6); } .ag5 { @include span-columns(3 omega,6); } .ag6 { @include span-columns(2,6); } .ag7 { @include span-columns(4 omega,6); } .ag8 { @include span-columns(2,4); } .ag9 { @include span-columns(2 omega,4); } .ag10 { clear: both; }

We're just getting warmed up.

Quickly add media-query breakpoints for new layouts with at-breakpoint, or create your own math using Susy's array of grid helpers. Build a one-off site in minutes, or create your own scalable grid library for large projects.

Susy provides the power-tools, what you build is up to you.

v1.0.9~dfsg/docs/source/javascripts/0000755000000000000000000000000012230621455016232 5ustar rootrootv1.0.9~dfsg/docs/source/javascripts/viewport.js0000644000000000000000000000067112160425301020445 0ustar rootrootif (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) { var viewportmeta = document.querySelectorAll('meta[name="viewport"]')[0]; if (viewportmeta) { viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0'; document.body.addEventListener('gesturestart', function() { viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6'; }, false); } }v1.0.9~dfsg/docs/source/javascripts/jqwidont.js0000644000000000000000000000022512160425301020420 0ustar rootrootjQuery(function($) { $('h1,h2,h3,li,p').each(function() { $(this).html($(this).html().replace(/\s([^\s<]+)\s*$/,' $1')); }); });v1.0.9~dfsg/docs/source/javascripts/modernizr.selectors.js0000644000000000000000000000317012160425301022576 0ustar rootroot// selectorSupported lovingly lifted from the mad italian genius, diego perini // http://javascript.nwbox.com/CSSSupport/ function selectorSupported(selector){ var support, link, sheet, doc = document, root = doc.documentElement, head = root.getElementsByTagName('head')[0], impl = doc.implementation || { hasFeature: function() { return false; } }, link = doc.createElement("style"); link.type = 'text/css'; (head || root).insertBefore(link, (head || root).firstChild); sheet = link.sheet || link.styleSheet; if (!(sheet && selector)) return false; support = impl.hasFeature('CSS2', '') ? function(selector) { try { sheet.insertRule(selector + '{ }', 0); sheet.deleteRule(sheet.cssRules.length - 1); } catch (e) { return false; } return true; } : function(selector) { sheet.cssText = selector + ' { }'; return sheet.cssText.length !== 0 && !(/unknown/i).test(sheet.cssText) && sheet.cssText.indexOf(selector) === 0; }; return support(selector); }; Modernizr.addTest('target',function(){ return selectorSupported(':target'); }).addTest('not',function(){ return selectorSupported(':not(p)'); }).addTest('last-child',function(){ return selectorSupported(':last-child'); }).addTest('nth-child',function(){ return selectorSupported(':nth-child(2)'); }).addTest('nth-of-type',function(){ return selectorSupported(':nth-of-type(2)'); }) v1.0.9~dfsg/docs/source/layouts/0000755000000000000000000000000012160425301015373 5ustar rootrootv1.0.9~dfsg/docs/source/layouts/layout.haml0000644000000000000000000000144112160425301017553 0ustar rootroot!!! 5 %html.no-js{:lang => "en"} = partial "partials/head" %body{ :id => "susy-oddbird-net", :class => page_classes } %div.page %header{ :role => "banner" } %h1 %a.home{ :href => "/"} Susy %h2 Responsive grids for Compass. %nav{ :role => "navigation" } = partial "partials/navigation" %section{ :role => "main" } ~ yield -if page_side_content %aside.secondary= page_side_content %footer{ :role => "contentinfo" } = partial "partials/contentinfo" %ul.grid-toggle %li.on %a{ :href => "#susy-oddbird-net" } show grid %li.off %a{ :href => "#" } hide grid = partial "partials/javascripts" v1.0.9~dfsg/docs/source/layouts/grid-types.haml0000644000000000000000000000065112160425301020327 0ustar rootroot!!! 5 %html.no-js{:lang => "en"} = partial "partials/head" %body{ :id => "susy-oddbird-net", :class => page_classes } = partial "partials/demonav" %section.page %header.banner{ :role => "banner" } %h1 Susy Demo %h2 responsive grids for compass %nav.pagenav = data.page.pagenav %article.main{ :role => "main" } ~ yield = partial "partials/javascripts" v1.0.9~dfsg/docs/source/layouts/magic.haml0000644000000000000000000000112112160425301017311 0ustar rootroot!!! 5 %html.no-js{:lang => "en"} = partial "partials/head" %body{ :id => "susy-oddbird-net", :class => page_classes } = partial "partials/demonav" %section.page %header.banner{ :role => "banner" } %h1 Susy Demo %h2 responsive grids for compass %nav.pagenav = data.page.pagenav %article.main{ :role => "main" } %aside.summary = data.page.aside %div.content ~ yield %footer.contentinfo{ :role => "contentinfo" } = partial "partials/contentinfo" = partial "partials/javascripts" v1.0.9~dfsg/docs/source/guides/0000755000000000000000000000000012160425301015153 5ustar rootrootv1.0.9~dfsg/docs/source/guides/getting-started.html.md0000644000000000000000000002116412160425301021551 0ustar rootroot--- title: Getting Started class: guide side_content: >

Version 1.0.9

Installation

Usage

Troubleshooting

--- ## Installation ### Compass Install from the command line: :::bash # command line gem install susy Create a new [Compass][compass] project: :::bash # command line compass create -r susy -u susy Or update an existing [Compass][compass] project: :::ruby # config.rb require "susy" [compass]: http://compass-style.org/ ### Rails 3.x :::ruby # Gemfile gem "susy" You may also need: :::ruby # Gemfile gem 'compass', '>= 0.12.2' gem 'compass-rails', '>= 1.0.3' And run: :::bash # command line bundle install ### Yeoman Edit your **Gruntfile.js** at the root level of your project and look for the Compass related rules, add the following inside the options object: :::javascript // Gruntfile.js compass: { dist: { options: { config: '.config.rb' } } } Now create a **.config.rb** file at the same level as your Gruntfile with this: :::ruby # .config.rb require "susy" And you are good to go! ### Manual Start You can use this method if you're not using Compass from Terminal and/or Rails. This is going to work with CodeKit. * Simply download the zip file from GitHub * Copy the contents of the "sass" folder *feel free to remove everything else * Paste the files in your projects "sass" folder (or whatever you call it) * And import Susy! ( See Usage ) And you're good to go! ## Usage :::scss @import "susy"; ### Settings Set up your default grid values: total columns, column width, and gutter width. :::scss $total-columns : 12; // a 12-column grid $column-width : 4em; // each column is 4em wide $gutter-width : 1em; // 1em gutters between columns $grid-padding : $gutter-width; // grid-padding equal to gutters ### Basic Grids The basic Susy grid is composed using two simple mixins: - Use the [container()][container] mixin to create your initial grid context. - Use the [span-columns()][span-columns] mixin to declare the width of an element on the grid. Here's a simple page layout: :::scss .page { // page acts as a container for our grid. @include container; // header and footer are full-width by default. header, footer { clear: both; } // nav spans 3 columns of total 12. nav { @include span-columns(3,12); } .content { // content spans the final (omega) 9 columns of 12. @include span-columns(9 omega,12); // main content spans 6 of those 9 columns. .main { @include span-columns(6,9); } // secondary content spans the final 3 (omega) of 9 columns. .secondary { @include span-columns(3 omega,9); } } } ### Responsive Grids Responsive Susy grids allow you to change the number of columns in a layout at different window sizes, using @media-queries with min and max widths. This requires one more mixin: - Use [at-breakpoint()][at-breakpoint] to set different layouts at min- and max-width breakpoints. Here's a mobile-first example: :::scss $total-columns: 4; .page { // Establish our default 4-column grid container. @include container; // Create a media-query breakpoint at a min-width of 30em // And use a larger 8-column grid within that media-query. @include at-breakpoint(30em 8) { // Establish our new 8-column container. @include container; } } ### Advanced Susy is built to handle your unique markup, and any number of edge cases. It includes the standard [push()][push] and [pull()][pull] mixins, along with other useful functions and shortcuts, support for various grid styles, and even bi-directional grids for multi-lingual sites. Check the [reference documentation][reference] for details. [reference]: /guides/reference/ [container]: /guides/reference/#ref-container [span-columns]: /guides/reference/#ref-span-columns [at-breakpoint]: /guides/reference/#ref-at-breakpoint [push]: /guides/reference/#ref-push [pull]: /guides/reference/#ref-pull ## Troubleshooting ### Version Management When you are working with bundled gems and dependencies across a number of different projects, managing gem versions can become an issue. If you are working in a **Ruby** environment, we recommend using [RVM](http://rvm.io/rvm/install/). See our [Rails troubleshooting](#troubleshooting-rails-install) below for some basic instructions, or [dig into RVM's installation instructions](http://rvm.io/rvm/install/). In a **Python** environment, we recommend [virtualenv](http://www.virtualenv.org/en/latest/index.html) in conjunction with these ["postactivate" and "predeactivate" scripts](https://gist.github.com/1078601) to add support for Ruby gems. Once you have that in place, [Bundler](http://gembundler.com/) can be used in either environment to manage the actual installation and updating of the gems. ### Compass Install The old gem and the new gem have different names, but are required simply as ``susy``. That can cause a conflict if both gems are present. If you have installed Susy in the past, make sure you've uninstalled older versions: :::bash # command line gem uninstall compass-susy-plugin # "compass-susy-plugin" was the gem name for 0.9.x and lower # Susy 1.0 switches to "susy" as the gem name And then install 1.0: :::bash # command line gem install susy Then use Compass as normal. ### Rails 3.x Install We recommend you use [RVM](http://rvm.io) for using Susy with Rails projects. It has become the standard gem management system for Rails, it's very easy to install and use, and it helps create and manage Gemsets among different developers working on different branches. [Here are some RVM best practices](http://rvm.io/rvm/best-practices/): If you have installed Susy in the past, make sure you've uninstalled older versions. See [Compass Install](#troubleshooting-compass-install) above. [Install RVM](http://rvm.io/rvm/install/) (These are basics, if you do not have Ruby and Rails already installed in your environment, we [recommend you use RVM's installation instructions](http://rvm.io/rvm/install/)): :::bash # command line # from your system's root: curl -L get.rvm.io | bash -s stable Create a gemset for your site: :::bash # command line rvm gemset create fooBar Create an ``.rvmrc`` file at your site's root: :::bash # .rvmrc rvm use 1.9.3@fooBar # Use whatever Ruby version number your app uses Now whenever you ``cd`` into your site's root, RVM will pick up and use that Gemset. ``cd`` to your site and install [Bundler](http://gembundler.com/): :::bash # command line gem install bundler Add Susy to your ``Gemfile`` ([more info on Gemfiles](http://gembundler.com/gemfile.html)): :::ruby gem "susy", "~> 1.0.9" And finally run your bundle: :::bash # command line bundle v1.0.9~dfsg/docs/source/guides/reference.html.md0000644000000000000000000006645112160425301020412 0ustar rootroot--- title: Reference class: guide side_content: >

Version 1.0.9

Basic Usage

Basic Settings

Basic Mixins

Responsive Grids

Responsive Mixins

Grid Helpers

Box Sizing

Isolation

Padding Mixins

Margin Mixins

Reset Mixins

Other Mixins

Functions

Container Override Settings

Direction Override Settings

Compass Options

Breakpoint Output

--- ## Basic Usage :::scss @import 'susy'; - **Container**: The root element of a _Grid_. - **Layout**: The total number of _Columns_ in a grid. - **Grid Padding**: Padding on the sides of the _Grid_. - **Context**: The number of _Columns_ spanned by the parent element. - **Omega**: Any _Grid Element_ spanning the last _Column_ in its _Context_. ### Basic Settings #### Total Columns The number of Columns in your default Grid Layout. :::scss // $total-columns: ; $total-columns: 12; - ``: Unitless number. #### Column Width The width of a single Column in your Grid. :::scss // $column-width: ; $column-width: 4em; - ``: Length in any unit of measurement (em, px, %, etc). #### Gutter Width The space between Columns. :::scss // $gutter-width: ; $gutter-width: 1em; - ``: Units must match `$column-width`. #### Grid Padding Padding on the left and right of a Grid Container. :::scss // $grid-padding: ; $grid-padding: $gutter-width; // 1em - ``: Units should match the container width (`$column-width` unless `$container-width` is set directly). ### Basic Mixins #### Container Establish the outer grid-containing element. :::scss // container([$]*) .page { @include container; } - `<$media-layout>`: Optional media-layout shortcuts (see '[Responsive Grids][responsive]' below). Default: `$total-columns`. [responsive]: #ref-responsive #### Span Columns Align an element to the Susy Grid. :::scss // span-columns(<$columns> [ , <$context>, <$padding>, <$from>, <$style>]) nav { @include span-columns(3,12); } article { @include span-columns(9 omega,12); } - `<$columns>`: The number of _Columns_ to span. - ``: Optional flag to signal the last element in a row. - `<$context>`: Current nesting _Context_. Default: `$total-columns`. - `<$padding>`: Optional padding applied inside an individual grid element. Given as a length (same units as the grid) or a list of lengths (from-direction to-direction). Default: `false`. - `<$from>`: The origin direction of your document flow. Default: `$from-direction`. - `<$style>`: Optionally return `static` lengths for grid calculations. Default: `$container-style`. #### Omega Apply to any omega element as an override. :::scss // omega([<$from>]) .gallery-image { @include span-columns(3,9); // each gallery-image is 3 of 9 cols. &:nth-child(3n) { @include omega; } // every third image completes a row. } - `<$from>`: The origin direction of your document flow. Default: `$from-direction`. #### Nth-Omega Apply to any element as an nth-child omega shortcut. Defaults to `:last-child`. :::scss // nth-omega([<$n>, <$selector>, <$from>]) .gallery-image { @include span-columns(3,9); // each gallery-image is 3 of 9 cols. @include nth-omega(3n); // same as omega example above. } - `<$n>`: The keyword or equation to select: `[first | only | last | ]`. An equation could be e.g. `3` or `3n` or `'3n+1'`. Note that quotes are needed to keep complex equations from being simplified by Compass. Default: `last`. - `<$selector>`: The type of element, and direction to count from: `[child | last-child | of-type | last-of-type ]`. Default: `child`. - `<$from>`: The origin direction of your document flow. Default: `$from-direction`. ## Responsive Grids - **Breakpoint**: A min- or max- viewport width at which to change _Layouts_. - **Media-Layout**: Shortcut for declaring _Breakpoints_ and _Layouts_ in Susy. ### Media-Layouts :::scss // $media-layout: ; // - You must supply either or . $media-layout: 12; // Use 12-col layout at matching min-width. $media-layout: 30em; // At min 30em, use closest fitting layout. $media-layout: 30em 12; // At min 30em, use 12-col layout. $media-layout: 12 60em; // Use 12 cols up to max 60em. $media-layout: 30em 60em; // Between min 30em & max 60em, use closest layout. $media-layout: 30em 12 60em;// Use 12 cols between min 30em & max 60em. $media-layout: 60em 12 30em;// Same. Larger length will always be max-width. $media-layout : 12 lt-ie9; // Output is included under `.lt-ie9` class, // for use with IE conditional comments // on the tag. - `<$min/max-width>`: Any length with units, used to set media breakpoints. - `<$layout>`: Any (unitless) number of columns to use for the grid at a given breakpoint. - `<$ie-fallback>`: Any string to use as a fallback class when mediaqueries are not available. Do not include a leading "`.`" class-signifier, simply the class name ("`lt-ie9`", not "`.lt-ie9`"). This can be anything you want: "`no-mediaqueries`", "`ie8`", "`popcorn`", etc. ### Responsive Mixins #### At-Breakpoint At a given min- or max-width Breakpoint, use a given Layout. :::scss // at-breakpoint(<$media-layout> [, <$font-size>]) { <@content> } @include at-breakpoint(30em 12) { .page { @include container; } } - `<$media-layout>`: The _Breakpoint/Layout_ combo to use (see above). - `<$font-size>`: Browsers interpret em-based media-queries using the browser default font size (`16px` in most cases). If you have a different base font size for your site, we have to adjust for the difference. Tell us your base font size, and we'll do the conversion. Default: `$base-font-size`. - `<@content>`: Nested `@content` block will use the given _Layout_. #### Layout Set an arbitrary Layout to use with any block of content. :::scss // layout(<$layout-cols>) { <@content> } @include layout(6) { .narrow-page { @include container; } } - `<$layout-cols>`: The number of _Columns_ to use in the _Layout_. - `<@content>`: Nested `@content` block will use the given _Layout_. #### Set Container Width Reset the width of a Container for a new Layout context. Can be used when `container()` has already been applied to an element, for DRYer output than simply using `container` again. :::scss // set-container-width([<$columns>, <$style>]) @include container; @include at-breakpoint(8) { @include set-container-width; } - `<$columns>`: The number of _Columns_ to be contained. Default: Current value of `$total-columns` depending on _Layout_. - `<$style>`: Optionally return `static` lengths for grid calculations. Default: `$container-style`. #### With Grid Settings Use different grid settings for a block of code - whether the same grid at a different breakpoint, or a different grid altogether. :::scss // with-grid-settings([$, $, <$gutter>, <$padding>]) { <@content> } @include with-grid-settings(12,4em,1.5em,1em) { .new-grid { @include container; } }; - `<$columns>`: Overrides the `$total-columns` setting for all contained elements. - `<$width>`: Overrides the `$column-width` setting for all contained elements. - `<$gutter>`: Overrides the `$gutter-width` setting for all contained elements. - `<$padding>`: Overrides the `$grid-padding` setting for all contained elements. - `<@content>`: Nested `@content` block will use the given grid settings. ## Grid Helpers ### Box Sizing #### Border-Box Sizing Set the default box-model to `border-box`, and adjust the grid math accordingly. :::scss // border-box-sizing() @include border-box-sizing; This will apply border-box model to all elements (using the star selector) and set `$border-box-sizing` to `true`. You can use the variable on it's own to adjust the grid math, in cases where you want to apply the box-model separately. ### Isolation #### Isolate Isolate the position of a grid element relative to the container. This should be used in addition to `span-columns` as a way of minimizing sub-pixel rounding errors in specific trouble locations. :::scss // isolate(<$location> [, <$context>, <$from>, <$style>]) @include span-columns(4); // 4-columns wide @include isolate(2); // positioned in the second column - `<$location>`: The container-relative column number to position on. - `<$context>`: Current nesting _Context_. Default: `$total-columns`. - `<$from>`: The origin direction of your document flow. Default: `$from-direction`. - `<$style>`: Optionally return `static` lengths for grid calculations. Default: `$container-style`. #### Isolate Grid Isolate a group of elements in an grid (such as an image gallery) using nth-child or nth-of-type for positioning. Provide the column-width of each element, and Susy will determine the positioning for you. :::scss // isolate-grid(<$columns> [, <$context>, <$selector>, <$from>, <$style>]) .gallery-item { @include isolate-grid(3); } - `<$columns>`: The number of _Columns_ for each item to span. - `<$context>`: Current nesting _Context_. Default: `$total-columns`. - `<$selector>`: either 'child' or 'of-type'. Default: `child`. - `<$from>`: The origin direction of your document flow. Default: `$from-direction`. - `<$style>`: Optionally return `static` lengths for grid calculations. Default: `$container-style`. ### Padding Mixins #### Prefix Add Columns of empty space as `padding` before an element. :::scss // prefix(<$columns> [, <$context>, <$from>, <$style>]) .box { @include prefix(3); } - `<$columns>`: The number of _Columns_ to be added as `padding` before. - `<$context>`: The _Context_. Default: `$total-columns`. - `<$from>`: The origin direction of your document flow. Default: `$from-direction`. - `<$style>`: Optionally return `static` lengths for grid calculations. Default: `$container-style`. #### Suffix Add columns of empty space as padding after an element. :::scss // suffix(<$columns> [, <$context>, <$from>, <$style>]) .box { @include suffix(2); } - `<$columns>`: The number of _Columns_ to be added as `padding` after. - `<$context>`: The _Context_. Default: `$total-columns`. - `<$from>`: The origin direction of your document flow. Default: `$from-direction`. - `<$style>`: Optionally return `static` lengths for grid calculations. Default: `$container-style`. #### Pad Shortcut for adding both Prefix and Suffix `padding`. :::scss // pad([<$prefix>, <$suffix>, <$context>, <$from>, <$style>]) .box { @include pad(3,2); } - `<$prefix>`: The number of _Columns_ to be added as `padding` before. - `<$suffix>`: The number of _Columns_ to be added as `padding` after. - `<$context>`: The _Context_. Default: `$total-columns`. - `<$from>`: The origin direction of your document flow. Default: `$from-direction`. - `<$style>`: Optionally return `static` lengths for grid calculations. Default: `$container-style`. #### Bleed Add negative margins and matching positive padding to an element, so that its background "bleeds" outside its natural position. :::scss // bleed(<$width> [<$sides>, <$style>]) @include bleed(2); - `<$width>`: The number of _Columns_ or arbitrary length to bleed. Use `2 of 12` syntax for context in nested situations. - `<$sides>`: The sides of the element that should bleed. Default: `left right`. - `<$style>`: Optionally return `static` lengths for grid calculations. Default: `$container-style`. ### Margin Mixins #### Pre Add columns of empty space as margin before an element. :::scss // pre(<$columns> [, <$context>, <$from>, <$style>]) .box { @include pre(2); } - `<$columns>`: The number of _Columns_ to be added as `margin` before. - `<$context>`: The _Context_. Default: `$total-columns`. - `<$from>`: The origin direction of your document flow. Default: `$from-direction`. - `<$style>`: Optionally return `static` lengths for grid calculations. Default: `$container-style`. #### Post Add columns of empty space as margin after an element. :::scss // post(<$columns> [, <$context>, <$from>, <$style>]) .box { @include post(3); } - `<$columns>`: The number of _Columns_ to be added as `margin` after. - `<$context>`: The _Context_. Default: `$total-columns`. - `<$from>`: The origin direction of your document flow. Default: `$from-direction`. - `<$style>`: Optionally return `static` lengths for grid calculations. Default: `$container-style`. #### Squish Shortcut to add empty space as margin before and after an element. :::scss // squish([<$pre>, <$post>, <$context>, <$from>, <$style>]) .box { @include squish(2,3); } - `<$pre>`: The number of _Columns_ to be added as `margin` before. - `<$post>`: The number of _Columns_ to be added as `margin` after. - `<$context>`: The _Context_. Default: `$total-columns`. - `<$from>`: The origin direction of your document flow. Default: `$from-direction`. - `<$style>`: Optionally return `static` lengths for grid calculations. Default: `$container-style`. #### Push Identical to [pre](#ref-pre). :::scss // push(<$columns> [, <$context>, <$from>, <$style>]) .box { @include push(3); } #### Pull Add negative margins before an element, to pull it against the flow. :::scss // pull(<$columns> [, <$context>, <$from>, <$style>]) .box { @include pull(2); } - `<$columns>`: The number of _Columns_ to be subtracted as `margin` before. - `<$context>`: The _Context_. Default: `$total-columns`. - `<$from>`: The origin direction of your document flow. Default: `$from-direction`. - `<$style>`: Optionally return `static` lengths for grid calculations. Default: `$container-style`. ### Reset Mixins #### Reset Columns Resets an element to default block behaviour. :::scss // reset-columns([<$from>]) article { @include span-columns(6); } // articles are 6 cols wide #news article { @include reset-columns; } // but news span the full width // of their container - `<$from>`: The origin direction of your document flow. Default: `$from-direction`. #### Remove-Omega Apply to any previously-omega element to reset it's float direction and margins to match non-omega grid elements. Note that unlike omega, this requires a context when nested. :::scss // remove-omega([<$context>, <$from>, <$style>]) .gallery-image { &:nth-child(3n) { @include remove-omega; } // 3rd images no longer complete rows. } - `<$context>`: Current nesting _Context_. Default: `$total-columns`. - `<$from>`: The origin direction of your document flow. Default: `$from-direction`. - `<$style>`: Optionally return `static` lengths for grid calculations. Default: `$container-style`. #### Remove Nth-Omega Apply to any previously nth-omega element to reset it's float direction and margins to match non-omega grid elements. Note that unlike omega, this requires a context when nested. :::scss // remove-nth-omega([<$n>, <$selector>, <$context>, <$from>, <$style>]) .gallery-image { @include remove-nth-omega(3n); // same as remove-omega example above. } - `<$n>`: The keyword or equation to select: `[first | only | last | ]`. An equation could be e.g. `3` or `3n` or `'3n+1'`. Note that quotes are needed to keep a complex equation from being simplified by Compass. Default: `last`. - `<$selector>`: The type of element, and direction to count from: `[child | last-child | of-type | last-of-type ]`. Default: `child`. - `<$context>`: Current nesting _Context_. Default: `$total-columns`. - `<$from>`: The origin direction of your document flow. Default: `$from-direction`. - `<$style>`: Optionally return `static` lengths for grid calculations. Default: `$container-style`. ### Other Mixins #### Susy Grid Background Show the Susy Grid as a background-image on any container. :::scss // susy-grid-background(); .page { @include susy-grid-background; } - If you are using the `` element as your _Container_, you need to apply a background to the `` element in order for this grid-background to size properly. - Some browsers have trouble with sub-pixel rounding on background images. Use this for checking general spacing, not pixel-exact alignment. Susy columns tend to be more accurate than gradient grid-backgrounds. ### Functions Where a mixin returns property/value pairs, functions return simple values that you can put where you want, and use for advanced math. #### Columns Similar to [span-columns](#ref-span-columns) mixin, but returns the math-ready `%` multiplier. :::scss // columns(<$columns> [, <$context>, <$style>]) .item { width: columns(3,6); } - `<$columns>`: The number of _Columns_ to span, - `<$context>`: The _Context_. Default: `$total-columns`. - `<$style>`: Optionally return `static` lengths for grid calculations. Default: `$container-style`. #### Gutter The `%` width of one gutter in any given context. :::scss // gutter([<$context>, <$style>]) .item { margin-right: gutter(6) + columns(3,6); } - `<$context>`: The _Context_. Default: `$total-columns`. - `<$style>`: Optionally return `static` lengths for grid calculations. Default: `$container-style`. #### Space Total `%` space taken by Columns, including internal AND external gutters. :::scss // space(<$columns> [, <$context>, <$style>]) .item { margin-right: space(3,6); } - `<$columns>`: The number of _Columns_ to span, - `<$context>`: The _Context_. Default: `$total-columns`. - `<$style>`: Optionally return `static` lengths for grid calculations. Default: `$container-style`. ### Container Override Settings #### Container Width Override the total width of your grid with an arbitrary length. :::scss // $container-width: | ; $container-width: false; - ``: Length in em, px, %, etc. - ``: True or false. #### Container Style Override the type of shell containing your grid. :::scss // $container-style: