I want to add Zurb-Foundation elements/components to my Zen Subtheme. I think those who have done this using Bootstrap may know the basic procedure as well?

My example use-case is to style the 'main-menu' using the Foundation 'nav-bar' :->

  • I have included foundation.css from Zurb-Foundation and I can hack around in Firebug and get the main-menu styled with the Foundation nav-bar style. Great.

But how to evolve this to actually be a usable workflow?


  1. How do I integrate Foundation into my Zen SASS workflow? What do I need to @import into the Zen subtheme?
  2. What changes do I need to make to config.rb, if any?
  3. Ditto from the .info file in my subtheme?

Assuming I can incorporate Foundation components, I then have to override in MYTHEMENAME__preprocess_page within my Zen Subthemes 'template.php'? Is this correct?

Any examples of the render-array in MYTHEMENAME__preprocess_page to say, in this example, override the menu-links to use the Foundation 'nav-bar' class/style?

Many, many, thanks


  • Have you tried adjusting your workflow by creating a subtheme based off of the foundation basetheme instead of zen? github.com/drewkennelly/foundation7 Of course this is only recommended if you are starting from scratch. To integrate components from foundation into your zen based theme will require resetting a lot of the Zen CSS. – LWal Dec 8 '12 at 18:08
  • I have looked at that however, I am using Zen due to SASS and now very keen on Zen Grids for the layout as it's so straightforward and also has excellent documentation. I just want to use Foundation for components/UI. What do you mean by 'require resetting a lot of the Zen CSS'? I thought there was not a great deal of CSS in Zen? – pcrx20 Dec 8 '12 at 20:03
  • From groups.drupal.org/node/271568#comment-860268 (though I am not understanding how it is easy !) : I've also had luck with Zen. I've wanted to substitute Foundation's grid in for Zen to give it a try, but Zen's grid is really easy to use with SASS and makes grid config super easy. Its really easy to add Foundation elements to it, like Orbit, Tabs, Reveal, etc. – pcrx20 Dec 8 '12 at 20:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.