SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
Breaking Free from Bootstrap: Custom Responsive Grids with Sass Susy
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.
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.
3.
Why Not Bootstrap?
• Separation of powers
• Maintainability
• Performance
4.
A Better Way
• Separate style from markup
• Simple modular maintenance
• Only write necessary CSS
5.
Sass Grid Systems
• Bourbon Neat
• Singularity
• Zen Grids
• Susy
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