Front End Team 

Rachel Ober Core 2 Adam Christie Create Dan “With a Beard” Cicconi Events Joseph Natalzia Events Kelly Sly Front Door Peter Margaritoff Front Door 

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 

WE ALSO MAKE THINGS LOOK PRETTY 

Haml 

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 

Haml Example !!! %html{ :xmlns => "http://www.w3.org/1999/xhtml", :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 %p.date= entry.posted.strftime("%A, %B %d, %Y") %p.body= entry.body #footer %p All content copyright © Bob 

Example XHTML Output BoBlog 

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

(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 here. 

SVG 

Scalable Vector Graphics 

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 

No content

SVG Code Example 

(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 

CSS 

We use Sass at Paperless Post 

Why Sass? • Variables • @import • Mixins • @extend • You’re programming styles instead of just writing CSS 

CSS Box Model (not as cute nor fun as kittens) 

CSS Box Model 

CSS Box Model with border-box 

Box Model in Developer Tools 

BEM Block - Element - Modifier 

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. 

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. 

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. 

• 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 

BEM Naming Conventions • Blocks: prefix-block-name • Elements: b-block-name_ _element-name • Modifiers: usually adding --modifier-name 

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 } 

CSS Specificity !important IDs Classes Elements inline Inline Styles normal IDs Classes Elements 

Pattern Guide 

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. 

No content