Susy Grid

Grid Global Setting (Maps)

// Requirements
// ============
@import "compass";
@import "susy";


$susy: (
 flow: ltr, // ltr | rtl
  output: float, // float | isolate
  math: fluid, // fluid | static (requires column-width)
  column-width: false, // false | value
  container:700px, // length or % | auto
  container-position: center, // left | center | right | <length> [*2] (grid padding)
  last-flow: to,
  columns: 12,
  gutters: 1/4,
  gutter-position: after, // before | after | split | inside | inside-static (requires column-width)
  global-box-sizing: border-box, // content-box | border-box (affects inside/inside-static)
  debug: (
  		image: show,
  		color: rgba(#656, .25),
  		output: background,
  		toggle: top right,
  	),
  use-custom: (
  	background-image: true,
  	background-options: false,
  	box-sizing: true,
  	clearfix: false,
  	rem: true,
  	)
);
  // you can defing a second grid for different scaling
  $widelayout: (
  columns: 24,
  gutters: 1/4,
  math: fluid,
  output: float,
  gutter-position: inside,
  
);

Shorthand syntax for layout maps

	@include layout(24 1/4 fluid float inside);
  // 960 grid 
  @include layout(12(60px 10px) split static);
  // you need to set your @include container(960px);

Responsive Design using Breakpoint

Breakpoint needs to be installed
gem install breakpoint
@ require 'breakpoint'; // in the config.rb file
  

To use breakpoint, wrap your code into a breakpoint function

  $small: 500px;
  $large: 1200px;
  
	breakpoint($small)
  {
  	main { @include span(8);
  }
  
  aside {
  	@include span(4 at 9);
  }
  
  @include breakpoint($large){
	@include layout(24);
	
	main {
	@include span(21);
	.col1, .col2, .col3 {
		@include span(8);
	}
}

aside {
	@include span(3 at 21);
}

Breakpoint mixin

susy-breakpoint($large, 24) // if you use this you dont have to @include layout(24)
  @include pad(10px)
  

Back To Top- Home - Category