Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

UI Encapsulation with Handlebars and Sass

UI Encapsulation with Handlebars and Sass

A lightning talk on how you can leverage tools like Handlebars and ERB together with Sass to keep your code DRY and maintainable.

Austin Bales

March 01, 2013
Tweet

More Decks by Austin Bales

Other Decks in Technology

Transcript

  1. <div  class="avatar-­‐wrapper">    <img  src="{{avatar.h48.url"  …  class="avatar  big"  /> </div>

    <i  class="avatar-­‐profile"  data-­‐image=    "<%=  current_user.avatar.full"></i> <span  class="avatar-­‐wrapper">    <img  src="{{author.avatar.url}}"  …  class="avatar"  />    <span  class="guest-­‐indicator"></span> </span> <div  class="avatar  uploader"  data-­‐role="uploader">    <img  src="{{url}}"  alt="…"  title="{{../../name}}"  class="avatar  big"  />    <label  class="button  button-­‐upload  icon">    … </div>
  2. <div  class="avatar-­‐wrapper">    <img  src="{{avatar.h48.url}}"  …  class="avatar  big"  /> </div>

    <i  class="avatar-­‐profile"  data-­‐image=    "<%=  current_user.avatar.full"></i> <span  class="avatar-­‐wrapper">    <img  src="{{author.avatar.url}}"  …  class="avatar"  />    <span  class="guest-­‐indicator"></span> </span> <div  class="avatar  uploader"  data-­‐role="uploader">    <img  src="{{url}}"  alt="…"  title="{{../../name}}"  class="avatar  big"  />    <label  class="button  button-­‐upload  icon">    … </div>
  3. {{constructAvatar  user  size=48}} {{constructAvatar  user  size=80  style="rounded"}} {{constructAvatar  user  size=32

     guest=true}} {{#constructAvatar  user  size=32  wrapper="uploader"}}        <label  class="button  button-­‐upload  icon"> {{/constructAvatar}}
  4. #    Create  markup  for  an  avatar  image  optionally  accepting

     options… #    {{constructAvatar  user  size="48"  wrapper="over-­‐dark"}} # #        user        -­‐  A  User  object #        size        -­‐  An  integer  either  16,  32,  48,  or  80 #        wrapper  -­‐  A  String  you’d  like  to  decorate  .avatar-­‐wrapper  with #         Do.Utils.constructAvatar  =  (user,  options  =  {})  -­‐>    _.defaults  options  =  options.hash  ||  {},        size:  '32'  #  16,  32,  48,  80        wrapper:  ''    url  =  user.avatar[options.size]  ||  user.avatar[32]    useWrapper  =  options.wrapper  isnt  false    if  useWrapper        wrapperClass  =  if  _.isBlank(options.wrapper)            ""            else            "avatar-­‐wrapper-­‐#{options.wrapper}"      new  Handlebars.SafeString  Do.Templates["helpers/avatar"]        …
  5. #    Create  markup  for  an  avatar  image  optionally  accepting

     options… #    {{constructAvatar  user  size="48"  wrapper="over-­‐dark"}} # #        user        -­‐  A  User  object #        size        -­‐  An  integer  either  16,  32,  48,  or  80 #        wrapper  -­‐  A  String  you’d  like  to  decorate  .avatar-­‐wrapper  with #         Do.Utils.constructAvatar  =  (user,  options  =  {})  -­‐>    _.defaults  options  =  options.hash  ||  {},        size:  '32'  #  16,  32,  48,  80        wrapper:  ''    url  =  user.avatar[options.size]  ||  user.avatar[32]    useWrapper  =  options.wrapper  isnt  false    if  useWrapper        wrapperClass  =  if  _.isBlank(options.wrapper)            ""            else            "avatar-­‐wrapper-­‐#{options.wrapper}"      new  Handlebars.SafeString  Do.Templates["helpers/avatar"]        …
  6. {{#if  useWrapper}} <div  class='avatar-­‐wrapper  avatar-­‐wrapper-­‐{{options.size}}  {{wrapperClass}}'> {{/if}} <img  src="{{url}}"  alt="{{userName}}"

     title="{{userName}}"          class="avatar  avatar-­‐{{options.size}}  {{options.klass}}"  /> {{#if  isGuest}} <img  class="guest-­‐avatar-­‐overlay  size-­‐{{options.size}}"          src="<%=  path_to_image('info/guest-­‐indicator.png')  %>"  /> {{/if}} {{#if  useWrapper}}    </div> {{/if}}
  7. /////////////////////////// //    Base  Avatar  Styling    // ///////////////////////////  

    .avatar    +square(32px)    +avatar-­‐border-­‐radius-­‐for-­‐size(32)   ////////////////////////// //      Avatar  Varieties      // //////////////////////////   //  Sizes  for  avatar  and  wrappers. @each  $size  in  <%=  Avatar::SIZES.join(“,  ”)  %>    .avatar-­‐#{$size}        +square($size  +  px)        +avatar-­‐border-­‐radius-­‐for-­‐size($size)    .avatar-­‐wrapper-­‐#{$size}        +square($size  +  px)        +avatar-­‐border-­‐radius-­‐for-­‐size($size)        &:after            +square($size  +  px)            +avatar-­‐border-­‐radius-­‐for-­‐size($size)
  8. /////////////////////////// //    Base  Avatar  Styling    // ///////////////////////////  

    .avatar    +square(32px)    +avatar-­‐border-­‐radius-­‐for-­‐size(32)   ////////////////////////// //      Avatar  Varieties      // //////////////////////////   //  Sizes  for  avatar  and  wrappers. @each  $size  in  <%=  Avatar::SIZES.join(“,  ”)  %>    .avatar-­‐#{$size}        +square($size  +  px)        +avatar-­‐border-­‐radius-­‐for-­‐size($size)    .avatar-­‐wrapper-­‐#{$size}        +square($size  +  px)        +avatar-­‐border-­‐radius-­‐for-­‐size($size)        &:after            +square($size  +  px)            +avatar-­‐border-­‐radius-­‐for-­‐size($size)