Successfully reported this slideshow.

Breaking Free from Bootstrap: Custom Responsive Grids with Sass Susy

38

Share

Loading in …3
×
1 of 28
1 of 28

Breaking Free from Bootstrap: Custom Responsive Grids with Sass Susy

38

Share

Download to read offline

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.com

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.com

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Breaking Free from Bootstrap: Custom Responsive Grids with Sass Susy

  1. 1. Breaking Free from Bootstrap Custom Responsive Grids with Sass Susy
  2. 2. Why Not Bootstrap? • Separation of powers
  3. 3. Why Not Bootstrap? • Separation of powers • Maintainability • Performance
  4. 4. A Better Way • Separate style from markup • Simple modular maintenance • Only write necessary CSS
  5. 5. Sass Grid Systems • Bourbon Neat • Singularity • Zen Grids • Susy
  6. 6. 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
  7. 7. Basic Susy Usage
  8. 8. Settings Map $susy: ( container: 50em, columns: 16, gutter: .25, output: isolate );
  9. 9. Setting a Container .container-element { @include container; } • Sets clear-fix • Sets max-width & centering margins
  10. 10. Setting Columns .primary { @include span(8); } .secondary { @include span(4 last); }
  11. 11. Mixin: span() [span] of [layout] at [location] (col count) (total cols) (# / keyword) @include span(4 of 12 at 4); @include span(4 of 8); @include span(4 last);
  12. 12. Advanced Susy Features
  13. 13. Nested Grids .primary { @include span(8); .block { @include with-layout(8) { @include span(4); } } }
  14. 14. Function: span() .primary { @include span(8 of 12); padding: 2em span(1 of 8); }
  15. 15. Function: gutter() .primary { @include span(12); padding: gutter() span(2); }
  16. 16. True “Grid” Layout .grid-item { @include gallery(3 of 12); } • Creates a grid with :nth-child floats handled correctly • No need for .row
  17. 17. Responsive Grids .primary { @include span(12); @include susy-breakpoint(480px, $susy) { @include span(6); } }
  18. 18. Responsive Grids .primary { @include span(12); // default 12 @media (min-width: 480px) { @include with-layout(16) { @include span(8); } } }
  19. 19. Asymmetric Grids $susy: ( columns: 2 5 1 4 ); • A list of values generates columns at those proportions
  20. 20. Asymmetric Responsive Golden Ratio Grid
  21. 21. 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
  22. 22. James Steinbach jamessteinbach.com jdsteinbach@gmail.com @jdsteinbach /jdsteinbach
  23. 23. CLT Sass cltsass.com info@cltsass.com @CLTSass

×