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