Responsive Theming: Foundation, Bootstrap, or Omega?

@Wanwu,

Getting Foundation to work with Drupal can be challenging, but observing some of Drupal's best-practice design patterns can help.

How do I theme the main-menu of Zen5 with the Nav Bar Foundation component? Do I need to style using MYTHEMENAME_preprocess_page in template.php ... adding in the CSS class nav-bar?

Using THEME_preprocess_page may be too far up the theme stack to be manageable (opinion)... you'd have to walk farily deep into render arrays or even--eghaads--override already-produced markup with preg_* to get at the markup your after. It's far easier to work with theme_* hooks, the associated preprocess/process functions and markup templates (*.tpl.php). We need to get involved with markup creation in the theme layer, so we don't really need render arrays (render arrays are far more useful at the module layer; another opinion). Just use Drupal's API functions for generating markup in your theme.

How do I best merge the Foundation SASS files with the Zen SASS files in order to create the Foundation.css etc..? What do I need to @import, where? What should I add to config.rb, and .info file?

When I first thougth about making a Foundation-driven Drupal theme my first knee-jerk solution was to just try to smush Zen and Foundation together in one fell swoop. What i found is that too many things break all at once, and it ended up being easier to think modular: let Zen do what it's realy good at, and utilize foundation for polish.

For project structure, I normally use Zen's config.rb, and add Foundation components to that. That is, i dont' use Foundation as the "master" project architecture, I use the STARTERKIT sturcture.

What would the overall process be in terms of, say using the Orbital JS?

Starting from scratch, first make the subtheme:

You can do this manually by reading the instructions in Zen's README, or here...
http://drupal.org/node/1549668
... You could also spin up the subtheme with Drush commands. The idea is that you should create a Zen sub theme and do all of your work there, overriding Zen per-opportunity. This gives you a blank-slate wroking area that doesn't destroy your upgrade path for Zen.

Having the playground ready, generally speaking, for any given component you need to ...
1. Add the JS (jquery.foundation.COMPONENT.js) to your theme, and refer to it in your theme's info file.
2. Add the corresponding CSS to your theme, and refer to it in your theme's info file.
3. Utilize theme hooks in template.php and optionally write preprocess/process functions in the theme layer to produce markup that the Foundation components are expecting.

Applying this to Foundation Orbit...

1. Spin up the subtheme
2. Generate Orbit-friendly markup with field_collections of images, or just a multiple-valued image fields.
3. Either create a view and associated templates to get the markup you need (hard), or use field_orbit (http://drupal.org/project/field_orbit) (EASY). Field Orbit gives you a display formatter that produces the markup automagically.
4. Add the Orbit SASS to your project, and refer to the generated CSS in your theme's info file
5. Add the Orbit JS to the theme and refer to it in your info file.
6. Do any needed modification of HTML output with preprocess/process/tpl functions and files.

This has worked pretty well in the past. However, I haven't yet had a chance to try the Foundation grid in place of the Zen grid. I did find some documentation for swapping out the grid framework, but I haven't found a use case where using the Zen grid with Foundation elements wasn't enough.