Difference between revisions of "Susy Grid"
Jump to navigation
Jump to search
| Line 1: | Line 1: | ||
== Responsive Design using Breakpoint == | == Responsive Design using Breakpoint == | ||
< | <pre> | ||
Breakpoint needs to be installed | |||
gem install breakpoint | |||
@ require 'breakpoint'; // in the config.rb file | |||
</ | </pre> | ||
== To use breakpoint, wrap your code into a breakpoint function == | == To use breakpoint, wrap your code into a breakpoint function == | ||
< | <pre> | ||
$small: 500px; | $small: 500px; | ||
$large: 1200px; | $large: 1200px; | ||
| Line 36: | Line 36: | ||
@include span(3 at 21); | @include span(3 at 21); | ||
} | } | ||
</ | </pre> | ||
== Breakpoint mixin == | |||
<pre> | |||
< | |||
susy-breakpoint($large, 24) // if you use this you dont have to @include layout(24) | susy-breakpoint($large, 24) // if you use this you dont have to @include layout(24) | ||
@include pad(10px) | @include pad(10px) | ||
</ | </pre> | ||
Revision as of 21:12, 5 August 2016
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)