Susy v2.x is going to include all of Salsa's features and much more.
This page is implementing Salsa's demo with the new layout API created for Susy next.
⇤ Resize this window to see the various layouts. ⇥
3-column complex nested grid AG test
3-column complex nested grid AG test - Source order manipulations
2-column nested grids, with an off-grid element
1-column nested grid - variable wrapper widths
No grid (custom width values), Off Canvas effect (hover it!)
1-column mobile stack
E1
E2
E4
E5
E6
E7
E8
E9
E10
E3
resize to see them change
resize to see them change
// Nested grids AG test
.e1 {@include span(2)}
.e2 {@include span(6)}
.e3 {@include span(2)}
.e4 {@include span(3 of 6)}
.e5 {@include span(3 of 6)}
.e6 {@include span(2 of 6)}
.e7 {@include span(4 of 6)}
.e8 {@include span(2 of 4)}
.e9 {@include span(2 of 4)}
.e10 {@include full} // Source order manipulations
.e1 {@include span(2 at 9)}
.e2 {@include span(6 at 0);}
.e3 {@include span(2 at 7)}
.e4 {@include span(3 of 6)}
.e5 {@include span(3 of 6)}
.e6 {@include span(2 of 6)}
.e7 {@include span(4 of 6)}
.e8 {@include span(2 of 4 at 0)}
.e9 {@include span(2 of 4 at 3)}
.e10 {@include full} // 2-column nested grids, with an off-grid element
.e1 {@include span(3 at 8)}
.e2 {@include span(7 at 0)}
.e3 {@include full}
.e4 {@include span(60% at 40%)}
.e5 {@include span(60% at -20%)}
.e6 {@include span(2 of 6 break)}
.e7 {@include span(4 of 6)}
.e8 {@include span(1 of 4)}
.e9 {@include span(1 of 4)}
.e10 {@include span(2 of 4)} // 1-column nested grid - variable widths
.e1 {@include full}
.e2 {@include span(7 at 15% break)}
.e3 {@include full}
.e4 {@include span(1 of 7 at 6)}
.e5 {@include span(1 of 7 at 7)}
.e6 {@include span(5 of 7 at 1)}
.e7 {@include full}
.e8 {@include span(1 of 7)}
.e9 {@include span(1 of 7)}
.e10 {@include span(5 of 7)} // No grid (arbitrary width values), off-canvas effect (hover)
.e1 {@include span(25% at -25%)}
.e2 {@include span(75%)}
.e3 {@include span(25%)}
.e4 {@include span(15%)}
.e5 {@include span(33%)}
.e6 {@include span(52%)}
.e7 {@include span(100% break)}
.e8 {@include span(25%)}
.e9 {@include span(25%)}
.e10 {@include span(88% at 0)}
.container{
overflow: hidden;
&:hover{
.e1 {@include span(25% at 0)}
.e2 {@include span(75% at 25%)}
.e3 {@include span(25% at 100%)}
}
} // 1-column mobile stack
.e1 {@include full}
.e2 {@include full}
.e3 {@include full}
.e4 {@include span(50%)}
.e5 {@include span(50%)}
.e6 {@include full}
.e7 {@include full}
.e8 {@include full}
.e9 {@include full}
.e10 {@include full}