breaking free from bootstrap: custom responsive grids with sass susy
DESCRIPTION
Instead of relying on heavy, pre-formatted, markup-intensive CSS frameworks for grids, we can use a Sass grid framework to write clean, maintainable, performant CSS grid layouts. twitter.com/jdsteinbach jamessteinbach.comTRANSCRIPT
![Page 1: Breaking Free from Bootstrap: Custom Responsive Grids with Sass Susy](https://reader034.vdocument.in/reader034/viewer/2022042700/55839d40d8b42a5b318b4b96/html5/thumbnails/1.jpg)
Breaking Free from Bootstrap
Custom Responsive Grids with Sass Susy
![Page 2: Breaking Free from Bootstrap: Custom Responsive Grids with Sass Susy](https://reader034.vdocument.in/reader034/viewer/2022042700/55839d40d8b42a5b318b4b96/html5/thumbnails/2.jpg)
Why Not Bootstrap?
• Separation of powers
![Page 3: Breaking Free from Bootstrap: Custom Responsive Grids with Sass Susy](https://reader034.vdocument.in/reader034/viewer/2022042700/55839d40d8b42a5b318b4b96/html5/thumbnails/3.jpg)
![Page 4: Breaking Free from Bootstrap: Custom Responsive Grids with Sass Susy](https://reader034.vdocument.in/reader034/viewer/2022042700/55839d40d8b42a5b318b4b96/html5/thumbnails/4.jpg)
![Page 5: Breaking Free from Bootstrap: Custom Responsive Grids with Sass Susy](https://reader034.vdocument.in/reader034/viewer/2022042700/55839d40d8b42a5b318b4b96/html5/thumbnails/5.jpg)
![Page 6: Breaking Free from Bootstrap: Custom Responsive Grids with Sass Susy](https://reader034.vdocument.in/reader034/viewer/2022042700/55839d40d8b42a5b318b4b96/html5/thumbnails/6.jpg)
![Page 7: Breaking Free from Bootstrap: Custom Responsive Grids with Sass Susy](https://reader034.vdocument.in/reader034/viewer/2022042700/55839d40d8b42a5b318b4b96/html5/thumbnails/7.jpg)
![Page 8: Breaking Free from Bootstrap: Custom Responsive Grids with Sass Susy](https://reader034.vdocument.in/reader034/viewer/2022042700/55839d40d8b42a5b318b4b96/html5/thumbnails/8.jpg)
Why Not Bootstrap?
• Separation of powers • Maintainability • Performance
![Page 9: Breaking Free from Bootstrap: Custom Responsive Grids with Sass Susy](https://reader034.vdocument.in/reader034/viewer/2022042700/55839d40d8b42a5b318b4b96/html5/thumbnails/9.jpg)
A Better Way
• Separate style from markup • Simple modular maintenance • Only write necessary CSS
![Page 10: Breaking Free from Bootstrap: Custom Responsive Grids with Sass Susy](https://reader034.vdocument.in/reader034/viewer/2022042700/55839d40d8b42a5b318b4b96/html5/thumbnails/10.jpg)
Sass Grid Systems
• Bourbon Neat • Singularity • Zen Grids • Susy
![Page 11: Breaking Free from Bootstrap: Custom Responsive Grids with Sass Susy](https://reader034.vdocument.in/reader034/viewer/2022042700/55839d40d8b42a5b318b4b96/html5/thumbnails/11.jpg)
Neat vs. Susy
Neat Susy
Settings in variables Settings in map
Global config Scope-able config
LibSass / Ruby Ruby only *
Mostly just columns Full “grid” support
Includes MQ mixins Integrates w/ Breakpoint
![Page 12: Breaking Free from Bootstrap: Custom Responsive Grids with Sass Susy](https://reader034.vdocument.in/reader034/viewer/2022042700/55839d40d8b42a5b318b4b96/html5/thumbnails/12.jpg)
Basic Susy Usage
![Page 13: Breaking Free from Bootstrap: Custom Responsive Grids with Sass Susy](https://reader034.vdocument.in/reader034/viewer/2022042700/55839d40d8b42a5b318b4b96/html5/thumbnails/13.jpg)
Settings Map
$susy: ( container: 50em, columns: 16, gutter: .25, output: isolate
);
![Page 14: Breaking Free from Bootstrap: Custom Responsive Grids with Sass Susy](https://reader034.vdocument.in/reader034/viewer/2022042700/55839d40d8b42a5b318b4b96/html5/thumbnails/14.jpg)
Setting a Container
.container-element { @include container;
}
• Sets clear-fix • Sets max-width & centering margins
![Page 15: Breaking Free from Bootstrap: Custom Responsive Grids with Sass Susy](https://reader034.vdocument.in/reader034/viewer/2022042700/55839d40d8b42a5b318b4b96/html5/thumbnails/15.jpg)
Setting Columns
.primary { @include span(8);
}
.secondary { @include span(4 last);
}
![Page 16: Breaking Free from Bootstrap: Custom Responsive Grids with Sass Susy](https://reader034.vdocument.in/reader034/viewer/2022042700/55839d40d8b42a5b318b4b96/html5/thumbnails/16.jpg)
Mixin: span()
@include span(4 of 12 at 4); @include span(4 of 8); @include span(4 last);
[span] of [layout] at [location] (col count) (total cols) (# / keyword)
![Page 17: Breaking Free from Bootstrap: Custom Responsive Grids with Sass Susy](https://reader034.vdocument.in/reader034/viewer/2022042700/55839d40d8b42a5b318b4b96/html5/thumbnails/17.jpg)
Advanced Susy Features
![Page 18: Breaking Free from Bootstrap: Custom Responsive Grids with Sass Susy](https://reader034.vdocument.in/reader034/viewer/2022042700/55839d40d8b42a5b318b4b96/html5/thumbnails/18.jpg)
Nested Grids
.primary { @include span(8); .block { @include with-layout(8) { @include span(4);
} }
}
![Page 19: Breaking Free from Bootstrap: Custom Responsive Grids with Sass Susy](https://reader034.vdocument.in/reader034/viewer/2022042700/55839d40d8b42a5b318b4b96/html5/thumbnails/19.jpg)
Function: span()
.primary { @include span(8 of 12); padding: 2em span(1 of 8);
}
![Page 20: Breaking Free from Bootstrap: Custom Responsive Grids with Sass Susy](https://reader034.vdocument.in/reader034/viewer/2022042700/55839d40d8b42a5b318b4b96/html5/thumbnails/20.jpg)
Function: gutter()
.primary { @include span(12); padding: gutter() span(2);
}
![Page 21: Breaking Free from Bootstrap: Custom Responsive Grids with Sass Susy](https://reader034.vdocument.in/reader034/viewer/2022042700/55839d40d8b42a5b318b4b96/html5/thumbnails/21.jpg)
True “Grid” Layout
.grid-item { @include gallery(3 of 12);
}
• Creates a grid with :nth-child floats handled correctly
• No need for .row
![Page 22: Breaking Free from Bootstrap: Custom Responsive Grids with Sass Susy](https://reader034.vdocument.in/reader034/viewer/2022042700/55839d40d8b42a5b318b4b96/html5/thumbnails/22.jpg)
Responsive Grids
.primary { @include span(12); @include susy-breakpoint(480px, $susy) { @include span(6);
} }
![Page 23: Breaking Free from Bootstrap: Custom Responsive Grids with Sass Susy](https://reader034.vdocument.in/reader034/viewer/2022042700/55839d40d8b42a5b318b4b96/html5/thumbnails/23.jpg)
Responsive Grids
.primary { @include span(12); // default 12 @media (min-width: 480px) { @include with-layout(16) { @include span(8);
} }
}
![Page 24: Breaking Free from Bootstrap: Custom Responsive Grids with Sass Susy](https://reader034.vdocument.in/reader034/viewer/2022042700/55839d40d8b42a5b318b4b96/html5/thumbnails/24.jpg)
Asymmetric Grids
$susy: ( columns: 2 5 1 4
);
• A list of values generates columns at those proportions
![Page 25: Breaking Free from Bootstrap: Custom Responsive Grids with Sass Susy](https://reader034.vdocument.in/reader034/viewer/2022042700/55839d40d8b42a5b318b4b96/html5/thumbnails/25.jpg)
Asymmetric Responsive Golden Ratio Grid
![Page 26: Breaking Free from Bootstrap: Custom Responsive Grids with Sass Susy](https://reader034.vdocument.in/reader034/viewer/2022042700/55839d40d8b42a5b318b4b96/html5/thumbnails/26.jpg)
Resources
Susy: susy.oddbird.net Zell Liew: zell-weekeat.com Learning Susy Book: bit.ly/zellsusy Breakpoint: breakpoint-sass.com My Article: sitepoint.com/sass-grids-neat-susy Grids: bit.ly/susygrid | bit.ly/bonusgrid Sassmeister: sassmeister.com