pogo-scaffold

Project Scaffolding

1. Pull down HTML5 Boilerplate
2. JS folder

* Clear
  * Add AMD config
  * Questions
    * Is this a responsive heavy site?
  * Load in throttle-debounce https://github.com/cowboy/jquery-throttle-debounce
     * Lodash?
        * use custom lodash builder to remove functionality not needed like template

1. CSS folder
   • Clear
   • Add Sass/Stylus
     • Variables
     • Compass / Nib
     • Mixins
     • Normalise + ie7 support
     • Brand
       • Use sections detailed on html5doctor?
       • Typography
       • Forms
       • Tables
     • Modules folder
   • Print Stylesheet
2. Clear unnecessary root files
3. Build and watch
   • Add grunt file
4. Unit test
   • Mocha
   • phantom JS

Decisions

1. Templating language

* Handlebars
  * with require plugin https://github.com/SlexAxton/require-handlebars-plugin
* Dust.js http://akdubya.github.com/dustjs/
  * Used by LinkedIn https://engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-more

1. Responsive Design

* Responsive Tables solution http://www.zurb.com/playground/playground/responsive-tables/index.html
* Catering for ie < 9 http://the-taylors.org/blog/2012/09/02/responsive-styles-respecting-old-ie-6-7-8

1. CSS Declarations
2. BEM
3. Grouping
4. Font
5. Color
6. Display
7. Float
8. Box Model
9. width
10. height
11. padding
12. margin
13. border
14. Background

CSS Frameworks

Sass

• Inuit.css [Sass] https://github.com/csswizardry/inuit.css
• Compass http://compass-style.org/
• Bourbon http://thoughtbot.com/bourbon/

Less

• Twitter Bootstrap [Less]

Stylus

• Nib [Stylus] http://visionmedia.github.com/nib/

Standards Guidelines

CSS

• https://github.com/csswizardry/CSS-Guidelines
• http://smacss.com/
• https://github.com/necolas/idiomatic-css
• BEM http://coding.smashingmagazine.com/2012/04/16/a-new-front-end-methodology-bem/

JavaScript

• https://github.com/necolas/idiomatic-js