Susy Grid

From rbachwiki
Revision as of 21:12, 5 August 2016 by Bacchas (talk | contribs)
Jump to navigation Jump to search

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)