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

5f8886b89696efeb3dcebeee856a1e45?s=128

Vinay Raghu

March 27, 2014
Tweet

Transcript

  1. Vinay Raghu / @rvinay88 / viii.in

  2. None
  3. <div class=”small-11 small-centered medium-8 medium-uncentered large-6 large-uncentered hide-for-xl hide- for-xxl”></div>

  4. • 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>
  5. http://www.flickr.com/photos/shankbone/2821569368/

  6. • 5 grids • xs, sm, md, lg, xl •

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

    • CSS minified 146kb • JS minified 86kb
  8. • Abstraction • Responsive • Nestable • Source ordering –

    push and pull
  9. • <<Designing in the browser>> • Generic • Symmetric •

    2 columns? 12? 16? 24?
  10. None
  11. http://alistapart.com/d/392/content-out-layout/Fig-5-golden-notes.jpg

  12. <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>
  13. • Scalable • Maintainable – 12 columns on small •

    Non Performant • Code bloat - Unnecessary styles in your code (grunt-uncss, ucss)
  14. <div class=”small-11 small-centered medium-8 medium-uncentered large-6 large-uncentered hide- for-xl hide-for-xxl”></div>

  15. .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); } } }
  16. .tab-container{ @extend .large-6; @extend .medium-8; @extend .small-12; @extend .columns; @extend

    .large-centered; @extend .medium-centered; }
  17. Pros • Markup is readable and semantic • Separation of

    concerns • SCSS readable Cons • More CSS styles and code • Still shipping unused code
  18. .tab-container{ @extend %large-6; @extend %medium-8; @extend %small-12; @extend %columns; @extend

    %large-centered; @extend %medium-centered; }
  19. • 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
  20. button.disabled, button[disabled], .button.disabled, .disabled.follow-button, .disabled.stats-button, .disabled.btn-wizard, .button[disabled], [disabled].follow-button, [disabled].stats-button, [disabled].btn-wizard

    { //styles here}
  21. • Susy - http://susy.oddbird.net/ • Singularity - http://singularity.gs/ • Jeet

    - http://jeetframework.com/ • Zen - http://zengrids.com/ • Gridset App - https://gridsetapp.com
  22. • 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
  23. None
  24. • https://github.com/Team-Sass/Singularity/wiki/Spanning-The- Grid#group-context-overrides • https://github.com/Team-Sass/modular-scale • https://gist.github.com/rvinay88/9807303 • http://www.mathsisfun.com/numbers/golden-ratio.html •

    http://sassmeister.com/gist/9807303
  25. None