Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Flexible grids using Sass

Flexible grids using Sass

A talk on grid design philosophy and using singularity grid system

Avatar for Vinay Raghu

Vinay Raghu

March 27, 2014
Tweet

More Decks by Vinay Raghu

Other Decks in Technology

Transcript

  1. • Separation of concerns <div class=”small-11 small-centered medium-8 medium-uncentered large-6

    large-uncentered hide-for-xl hide- for-xxl”></div> <div class=“sidebar-primary”></div>
  2. • 5 grids • xs, sm, md, lg, xl •

    5786 loc • CSS minified 98kb • JS minified 29kb
  3. • 3 grids • small, medium, large • 6372 loc

    • CSS minified 146kb • JS minified 86kb
  4. • Scalable • Maintainable – 12 columns on small •

    Non Performant • Code bloat - Unnecessary styles in your code (grunt-uncss, ucss)
  5. .custom-row-class { @include grid-row(); .custom-column-class { @include grid-column(12); @media #{$small}

    { @include grid-column(6); } @media #{$medium} { @include grid-column(8); } } }
  6. Pros • Markup is readable and semantic • Separation of

    concerns • SCSS readable Cons • More CSS styles and code • Still shipping unused code
  7. • Modify core features - http://codepen.io/rvinay88/pen/BeFld?editors=010 • @extend only port

    of bootstrap - https://github.com/rvinay88/sass- bootstrap • http://viii.in/oosass-foundation-and-bootstrap/ • Can’t use @media with @extend • Grid becomes unclear • Chaining of selectors - Debugging nightmare
  8. • Susy - http://susy.oddbird.net/ • Singularity - http://singularity.gs/ • Jeet

    - http://jeetframework.com/ • Zen - http://zengrids.com/ • Gridset App - https://gridsetapp.com
  9. • Website - http://singularity.gs/ • Github - https://github.com/Team-Sass/Singularity • Modular

    Scale - http://modularscale.com/ • Tutorial 1 - http://vimeo.com/63509346 • Tutorial 2 - https://www.youtube.com/watch?v=PDbVpyS6jF0