Difference between revisions of "Susy Grid"
Jump to navigation
Jump to search
(Created page with "== Responsive Design using Breakpoint == <ul> <li>Breakpoint needs to be installed</li> <li>gem install breakpoint</li> <li>@ require 'breakpoint'; // in the config.rb...") |
|||
| Line 9: | Line 9: | ||
== To use breakpoint, wrap your code into a breakpoint function == | == To use breakpoint, wrap your code into a breakpoint function == | ||
<code> | <code> | ||
Revision as of 21:11, 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)