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

Defensive Sass - Modular styles for the modern web

John W. Long
April 11, 2013

Defensive Sass - Modular styles for the modern web

Slides for a talk on modular Sass I gave at Function Pink, April 2013.

CodePen examples here: http://codepen.io/collection/lmkqe
Function Pink: http://www.functionpink.com
The Sass Way: http://thesassway.com

John W. Long

April 11, 2013
Tweet

More Decks by John W. Long

Other Decks in Design

Transcript

  1. <ul class="tableview"> <li class="tableview-item"> <a class="tableview-item-target" href="#"> <i class="tableview-item-icon-cell icon-large

    icon-cogs"></i> <span class="tableview-item-cell h3">General</span> </a> </li> ... </ul> http://bit.ly/modular-tableview
  2. <ul class="tableview"> ... <li class="tableview-item"> <a class="tableview-item-target" href="#"> <i class="tableview-item-icon-cell

    icon-large icon-signal"></i> <span class="tableview-item-cell h3">Wi-Fi</span> <span class="tableview-item-cell text-right quiet">John's Airport</span> </a> </li> ... </ul> http://bit.ly/modular-tableview
  3. <ul class="tableview"> <li class="tableview-item"> <a class="tableview-item-target" href="#"> <i class="tableview-item-icon-cell icon-large

    icon-plane"></i> <span class="tableview-item-cell h3">Airplane Mode</span> <span class="tableview-item-cell text-right"> <select><option>On</option><option selected>Off</option></select> </span> </a> </li> ... </ul> http://bit.ly/modular-tableview
  4. Subclassing .item { ... } .ticket-item { @extend .item; }

    <div class= “ticket-item”>...</div> .item { ... } .ticket-item { ... } <div class= “item ticket-item”>...</div> Standard CSS Extending Two classes One class
  5. Contextual .item { ... } .ticket .item { ... }

    .ticket .item .title { ... } <div class= “ticket”> <div class= “item”> <h3 class= “title”>...</h3> </div> </div>
  6. Subclassing vs. Contextual .item .item .ticket-item .article-item .ticket .item .article

    .item .item-title .ticket-item-title .item .title .ticket .item .title
  7. Generic Modifiers .is-selected { background: $highlight-color; } .is-hidden { display:

    none !important; } .float-left { float: left !important; } .float-right { float: right !important; } .mt0 { margin-top: 0 !important; } .ml0 { margin-left: 0 !important; } .ma0 { margin: 0 !important; } .clearfix { @include clearfix; } Important!
  8. Specific Modifiers .button { &:hover { ... } &.primary {

    ... } &.secondary { ... } &.small { ... } &.large { ... } &.is-disabled, &[disabled] { ... } } Use nesting & the ampersand operator
  9. Modifiers vs. Subclasses Better for small changes in visual attributes

    or state Better for major visual changes or for highly specific layout
  10. Naming Scheme Object .tableview .ticket .noun Child .tableview-item .ticket-title .noun-noun

    Subclass .multiselect-tableview .priority-ticket .adjective-noun Modifier .is-selected .scrollable .prefix-adjective or .adjective
  11. Modular Typography .h1, .h2, .h3, .h4, .h5, .h6 { ...

    } .text-left { text-align: left !important; } .text-center { text-align: center !important; } .text-right { text-align: right !important; } .quiet { color: $quiet-color !important; } .loud { color: $loud-color !important; } .fixed { font-family: $fixed-font-family; } http://bit.ly/modular-typography
  12. Modular Typography .typeset { h1 { @extend .h1; margin: 1em

    0 0.5em; } h2 { @extend .h2; margin: 1em 0 0.5em; } h3 { @extend .h3; margin: 1em 0 0.5em; } p, ul, ol, pre { margin: 1em 0; } ul { list-style: disc; ... } pre, code { @extend .fixed; } ... } http://bit.ly/modular-typography
  13. Reset vs. Normalize Zeros out styles on all elements. Normalizes

    styles across browsers so that all browsers share a similar stylesheet.
  14. Reset vs. Normalize Reset is better because it allows you

    to use tags for semantic value instead of style.
  15. • SMACSS: http://smacss.com • Object Oriented CSS: http://github.com/stubbornella/oocss • Typeset:

    http://joshuarudd.github.io/typeset.css/ • The Sass Way: http://thesassway.com i See also