Front End Overview (2014)

Front End Overview (2014)

297d4a4b165eb79b7e341645a05c70d6?s=128

Rachel Ober

October 07, 2014
Tweet

Transcript

  1. 2.

    1. WELCOME TO FRONT END 2. WHAT IS FRONT END

    3. DEVELOPMENT TOOLS 4. HOW TO BUILD 5. PATTERN GUIDE 6. TESTING 7. HELPFUL RESOURCES 2
  2. 4.

    Rachel Ober Sr. Front End Developer • Started August 2012

    • Lives in Brooklyn • Plays Pokémon • Owns a Corgi 4 4
  3. 5.

    Kelly Sly June 2013 5 Adam Christie April 2014 Dan

    “With a Beard” Cicconi May 2014 Joeseph Natalzia June 2014 5
  4. 15.
  5. 25.

    25 WHAT IS FRONT END? Structure Style Behavior HTML →

    HAML CSS → SASS JAVASCRIPT → (MANY FLAVORS)
  6. 28.

    28

  7. 30.
  8. 31.
  9. 34.

    34 1 !!! 2 %html{:lang => "en-us"} 3 %head 4

    %meta{:charset => "utf-8"}/ 5 %title Example 6 %body 7 %h1 Hello, world! 8 1 <!DOCTYPE html> 2 <html lang="en-us"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Example</title> 6 </head> 7 <body> 8 <h1>Hello, world!</h1> 9 </body> 10 </html> 11
  10. 35.

    35 • Meta data • Header • Footer • Login/Logout

    • Things you want on every page LAYOUTS
  11. 36.

    36 • Usually correspond to an action in a Controller

    • Holds template data for a specific page • Written in Haml • Variables • Loops over data sets VIEWS
  12. 37.

    37 • File names begin with an underscore • Handy

    for shared code around the site • Examples: • “Modules” for displaying a user’s contact details • How we display user’s attending status PARTIALS
  13. 38.

    38 • % 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 HAML STYLE
  14. 39.

    39 • Haml is very strict with whitespace • You

    can include text on same line or tabbed in on second line • … But not both! HAML STYLE
  15. 40.

    40

  16. 42.
  17. 44.

    44 We compile the Sass into CSS and then minify

    it before deploying it to production
  18. 47.

    47 1 .container { 2 width: 100%; 3 background: black;

    4 } 5 .container ul { 6 width: 90%; 7 } 8 .container ul li { 9 background: rgba(0, 0, 0, 0.1); 10 -webkit-box-shadow: 0px 0px 5px #333333; 11 -moz-box-shadow: 0px 0px 5px #333333; 12 box-shadow: 0px 0px 5px #333333; 13 } 1 $container_bg: #000 2 .container { 3 width: 100%; 4 background: $container_bg; 5 ul { 6 width: 90%; 7 li { 8 background: rgba($container_bg, 0.1); 9 -webkit-box-shadow: 0px 0px 5px #333333; 10 -moz-box-shadow: 0px 0px 5px #333333; 11 box-shadow: 0px 0px 5px #333333; 12 } 13 } 14 } 15
  19. 48.

    48 • Use soft-tabs (i.e. spaces not tabs) with 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. SASS STYLE
  20. 49.
  21. 51.

    1 $container_bg: #000 2 .container { 3 width: 100%; 4

    background: $container_bg; 5 ul { 6 width: 90%; 7 li { 8 background: rgba($container_bg, 0.1); 9 @include single-box-shadow; 10 } 11 } 12 } 51 1 .container { 2 width: 100%; 3 background: black; 4 } 5 .container ul { 6 width: 90%; 7 } 8 .container ul li { 9 background: rgba(0, 0, 0, 0.1); 10 -webkit-box-shadow: 0px 0px 5px #333333; 11 -moz-box-shadow: 0px 0px 5px #333333; 12 box-shadow: 0px 0px 5px #333333; 13 }
  22. 52.

    52

  23. 54.
  24. 55.
  25. 56.
  26. 59.

    59

  27. 62.
  28. 68.
  29. 75.
  30. 76.

    76 |- sass/ |--- buttons/ |--- color/ |--- forms/ |---

    layouts/ |--- modules/ |--- typography/ |--- ui_patterns/ |--- _buttons.scss |--- _config.scss |--- _forms.scss |--- _global_design.scss |--- _reset.scss |--- _typography.scss |--- style.scss “Clean Out Your Sass Junk-Drawer” by Dale Sande http://gist.io/4436524
  31. 77.

    77 |- sass/ |--- modules/ |----- registration/ |------- _extends.scss |-------

    _functions.scss |------- _mixin.scss |------- _module_registration.scss |------- _module_personalInfo.scss |----- purchase/ |------- _extends.scss |------- _functions.scss |------- _mixin.scss |------- _module_summary.scss |------- _module_purchase.scss “Clean Out Your Sass Junk-Drawer” by Dale Sande http://gist.io/4436524
  32. 81.
  33. 85.