Front End Overview for Interns 2015

Front End Overview for Interns 2015

An overview of how Paperless Post uses Haml, Sass, SVG in our projects.


Rachel Ober

June 16, 2015


  1. 2.

    Rachel Ober Core 2 Adam Christie Create Dan “With a

    Beard” Cicconi Events Joseph Natalzia Events Kelly Sly Front Door Peter Margaritoff Front Door
  2. 3.

    Front End Team • Work together with Product Design &

    Back End Developers • Set front end coding standards • Build reusable components (into the Pattern Guide) • Maintain Pattern Guide • Ensure consistency across entire product
  3. 5.
  4. 6.

    What is Haml? • Lightweight markup language to describe XHTML

    • Designed to address many of the flaws in traditional template engines • Trying to make markup as elegant as it can be
  5. 7.

    Haml Example !!! %html{ :xmlns => "", :lang => "en",

    "xml:lang" => "en"} %head %title BoBlog %meta{"http-equiv" => "Content-Type", :content => "text/html; charset=utf-8"} %link{"rel" => "stylesheet", "href" => "main.css", "type" => "text/css"} %body #header %h1 BoBlog %h2 Bob's Blog #content - @entries.each do |entry| .entry %h3.title= entry.title entry.posted.strftime("%A, %B %d, %Y") %p.body= entry.body #footer %p All content copyright © Bob
  6. 8.

    Example XHTML Output <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    ""> <html lang='en' xml:lang='en' xmlns=''> <head> <title>BoBlog</title> <meta content='text/html; charset=utf-8' http-equiv='Content-Type' /> <link href="/stylesheets/main.css" media="screen" rel="Stylesheet" type="text/css" /> </head> <body> <div id='header'> <h1>BoBlog</h1> <h2>Bob's Blog</h2> </div> <div id='content'> <div class='entry'> <h3 class='title'>Halloween</h3> <p class='date'>Tuesday, October 31, 2006</p> <p class='body'> Happy Halloween, glorious readers! I'm going to a party this evening... I'm very excited. </p> </div> <div class='entry'> <h3 class='title'>New Rails Templating Engine</h3> <p class='date'>Friday, August 11, 2006</p> <p class='body'> There's a very cool new Templating Engine out for Ruby on Rails. It's called Haml. </p> </div> </div> <div id='footer'> <p> All content copyright © Bob </p> </div> </body> </html>
  7. 9.

    Haml Fast Facts • White-space significant • Use 2 spaces

    for indentation • “%” starts a new tag • If you start a line with a css class/id (.class-name/#class-name) it assumes a <div> • “-” Executes Ruby code • “=” Displays the outputted Ruby code • Use Ruby helpers like image_tag instead of Haml tags like %img
  8. 10.

    (Some) Haml Gotchas • Haml isn’t great for large pieces

    of text. • In order to put a period after an anchor link you do this stupid thing: • Plus other “stuff” you’ll find in the Haml documentation… click = succeed ‘.’ do %a{ href: “thing” } here click <a href=“thing”>here</a>.
  9. 11.


  10. 13.

    Why SVG? • SVG are basically images in code (XML)

    • Highly manipulatable with CSS • Ready for Retina and HD displays • Can be resized without artifacts • Product Design only has to create the asset once, Front End Team does the rest of the work
  11. 14.
  12. 15.

    SVG Code Example <svg xmlns="" xmlns:xlink="" version="1.1" id="download" class="svg-download-photos" x="0px"

    y="0px" viewBox="0 0 520 520" enable-background="new 0 0 520 520" xml:space="preserve"> <g> <polygon points="380,60 380,80 500,80 500,500 20,500 20,80 120,80 120,60 0,60 0,520 520,520 520,60 "/> </g> <polygon points="370,300 353,283 260,381 260,0 240,0 240,381 147,283 130,300 250,420 "/> </svg>
  13. 16.

    (Some) SVG Gotchas • You still need a PNG version

    to support old browsers • However, we have a script that does it for us (HUZZAH) • SVG straight out of Illustrator can have extra crap in them • Run it through an optimizer before sending to production • When using React, to inline SVG you need to make a separate .js file • Pattern Guide includes iconified classes (available “soon”) • Responsive SVG need proportional dimensions
  14. 17.


  15. 19.

    Why Sass? • Variables • @import • Mixins • @extend

    • You’re programming styles instead of just writing CSS
  16. 25.

    Why BEM? As our Front End team grew, we needed

    a way to communicate code without intersecting and over-writing each other all the time.
  17. 26.

    Block • Block is an independent entity, a "building block"

    of an application. • Blocks contain information about themselves and their children (block elements). • Blocks can be used on their own or as a part of other blocks.
  18. 27.

    Element • Element is a part of a block, that

    performs a certain function. • Block elements can only appear inside their respective blocks. Elements can be mandatory and optional.
  19. 28.

    • Modifiers are properties of blocks and elements; they change

    appearance or behavior of the elements, they are applied to. • Each modifier has a name and a value. Multiple modifiers can be applied simultaneously. Modifier
  20. 30.

    CSS & JavaScript • Don’t closely couple style & behavior

    • Either use a js- prefix class • eg: js-dropdown-menu • Or use a data- attribute that can be targeted by JavaScript • eg: { data-javascript-hook: dropdown-menu }
  21. 33.

    Pattern Guide • “Modules” of code and style fitting the

    Brand designed to be reusable. • Available as a Ruby gem or npm package to be included in your apps.
  22. 34.