Back End Developers • Set front end coding standards • Build reusable components (into the Pattern Guide) • Maintain Pattern Guide • Ensure consistency across entire product
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
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>.
• 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
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
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.
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
• 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 }