Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intro to Front End at Paperless Post

Intro to Front End at Paperless Post

Rachel Ober

June 17, 2013
Tweet

More Decks by Rachel Ober

Other Decks in Programming

Transcript

  1. Which Browsers Windows and Mac (best case experience) Windows and

    Mac Windows, Mac, iOS Windows (progressive enhancement above IE7)
  2. <!DOCTYPE html> <html lang="en-us"> <head> <meta charset="utf-8"> <title>Example</title> </head> <body>

    <h1>Hello, world!</h1> </body> </html> !!! %html{:lang => "en-us"} %head %meta{:charset => "utf-8"}/ %title Example %body %h1 Hello, world! HTML Haml <!DOCTYPE html> <html lang="en-us"> <head> <meta charset="utf-8"> <title>Example</title> </head> <body> <h1>Hello, world!</h1> </body> </html> !!! %html{:lang => "en-us"} %head %meta{:charset => "utf-8"}/ %title Example %body %h1 Hello, world! HTML Haml
  3. Layouts • Include things like • Header • Footer •

    Login/Logout • Things you want one every page
  4. Views • Usually correspond to an action in the Controller

    • Hold template data for a specific page • Haml • Variables • Loops
  5. Partials • File names begin with an underscore • Intended

    for reuse in View templates around the site • “Modules” for displaying a user’s contact details • How we display user’s attending status
  6. Haml Style • % is the beginning of a tag

    • if you start line with “.class-name” it assumes “div” by default • Classes begin with “.” and IDs with “#” • Use Rails helpers instead of straight Haml when available • “-” prefaces Ruby code to be executed • “=” prefaces Ruby code to be printed
  7. Haml Style • Haml is very strict with whitespace •

    You can include text on same line or tabbed in on second line %p Hello, world! %p Hello, world! • But not both %p Hello, world! Hello, world!
  8. When we deploy to production, we compile the Sass into

    CSS, minify it, and upload it to the server.
  9. .container { width: 100%; background: black; } .container ul {

    width: 90%; } .container ul li { background: rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0px 5px #333333; -moz-box-shadow: 0px 0px 5px #333333; box-shadow: 0px 0px 5px #333333; } CSS Sass in SCSS $container_bg: #000 .container { width: 100%; background: $container_bg; ul { width: 90%; li { background: rgba($container_bg, 0.1); -webkit-box-shadow: 0px 0px 5px #333333; -moz-box-shadow: 0px 0px 5px #333333; box-shadow: 0px 0px 5px #333333; } } }
  10. Sass Style • Use soft-tabs (i.e. spaces not tabs) with

    a two space indent. • Put spaces after : in property declarations. • Put spaces before { in rule declarations in SCSS. • Line returns after the last property declaration to place the }. • Use hex color codes #000 and lowercase #fff unless using rgba.
  11. $container_bg: #000 .container :width 100% :background $container_bg ul :width 90%

    li :background rgba($container_bg, 0.1) :-webkit-box-shadow 0px 0px 5px #333333 :-moz-box-shadow 0px 0px 5px #333333 :box-shadow 0px 0px 5px #333333 Sass SCSS $container_bg: #000 .container { width: 100%; background: $container_bg; ul { width: 90%; li { background: rgba($container_bg, 0.1); -webkit-box-shadow: 0px 0px 5px #333333; -moz-box-shadow: 0px 0px 5px #333333; box-shadow: 0px 0px 5px #333333; } } }
  12. $container_bg: #000 .container { width: 100%; background: $container_bg; ul {

    width: 90%; li { background: rgba($container_bg, 0.1); @include single-box-shadow; } } } SCSS & Compass Compiled CSS .container { width: 100%; background: black; } .container ul { width: 90%; } .container ul li { background: rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0px 5px #333333; -moz-box-shadow: 0px 0px 5px #333333; box-shadow: 0px 0px 5px #333333; }
  13. Keep it Simple • Do not style with ids unless

    you have a very good reason (you don't). • Don't qualify class selectors with tag names (speed and re-usability). • When writing CSS, remember that the fewer selectors used, the faster the CSS. #hermes a // this would override .a-link ALWAYS because of specificity -- causing a maintainer to need overly specific selectors later a.a-link { text-transform: uppercase; } .container a.a-link { // Why so specific? font-weight bold; } .a-link { font-weight bold; }