Approach to Foundation Rapid Prototyping Workflow - Mobile first

readme.md

Initialise Development Environment

1. New Compass Project
   compass create new-project --require "zurb-foundation" --using foundation

2. Clone Foundation for reference git clone git@me:zurb/foundation.git temp-framework

3. Add Project Folder to Chrome Dev Tools "Sources" Tab for fast Web Inspector Development.
   Web Inspector > Workspace > Folders

4. Configure SASS Development environment variables, config.rb

• Enable SASS Sourcemaps
  • Line comments
  • compass watch

5. Import all Foundation defaults

   • _settings.scss
   • JavaScript init $(document).foundation();

6. Open http://foundation.zurb.com/docs/components/kitchen-sink.html in 2 tabs at desktop and mobile viewports

7. Other Tools:

   • http://placehold.it/100x100&Text-Logo
   • http://lab.maltewassermann.com/viewport-resizer/

Plan iteration

1. Mark out prototype structure with HTML comments, this is technically the first iteration.

   Super header Header
logo search
log in
social
/Header

   <!--Navigation-->
<!--/Navigation-->

   Body
sidebar
main
/Body

   Footer
sidebar
main /Footer

Rapid Prototype

1. Adjust known SASS variables, don't delete defaults, comment out instead
2. Mobile first. Simplest first. Content has hierarchy
3. Get semantic markup down, Concatenate Foundation snippets within HTML comments, Focus on Body Content
4. Move to the Browser "Sources Tab", develop in the browser

Review, Repeat

Optimise

1. Major and minor breakpoints
2. Cleaner JS initialisation
3. Event optimisation
4. Image handling
5. Tailor to avoild 'sameliness'

More..

7. avoid px - use em, rem, percentages
8. icon fonts
9. ModerniZer for progressive enhancement - feature detection before browser detection
10. test continually on real devices