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.

Transcript

1. UI Encapsulation with Handlebars & Sass Austin Bales @arbales
2. “ ” Minimizing effort, maximizing consistency.
3. But first, the problemo…
4. The simple avatar…
5. <span  class="avatar-­‐wrapper">    <img  src="…/h32.jpg"  alt="…"  title="…"  class="avatar"  /> </span> your_template_file.hbs
6. sass .avatar-­‐wrapper    +inline-­‐block    vertical-­‐align:  baseline    position:  relative    box-­‐shadow:  $avatar-­‐box-­‐shadow
7. Simple gets complicated…
8. Gob Bluth
9. <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>
10. sass .lots-­‐and-­‐lots-­‐of-­‐style    !huge-­‐mistake
11. Huge Mistake
12. Not really that huge tho,
13. and easy to fix…
14. Handlebars, Sass, & Sprockets
15. your_template_file.hbs {{constructAvatar  user  size=32}}
17. Uniform tag construction
18. Uniform tag construction Consistent image sizes!
19. Uniform tag construction Consistent image sizes! Documented options
20. Uniform tag construction Consistent image sizes! Documented options Easy-to-Update
21. Uniform tag construction Consistent image sizes! Documented options Easy-to-Update Forget forgetting alt, title, etc.
22. <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>
23. {{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}}
24. #    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"]        …
25. #    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"]        …
26. {{#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}}
27. When you know all the options, styling is easy…
28. /////////////////////////// //    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)
29. /////////////////////////// //    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)
30. ERB helps you centralize and leverage standards.
31. avatar.rb class  Avatar    SIZES  =  [32,  48,  80,  256] end
32. “ ” Less code, more UI consistency.
33. “ ” Thanks!