What frameworks would work fine with Zen? I'm thinking of Zurb Foundation, Twitter Bootstrap, HTML Boilerplate etc. That is, if one wants a basic site up quickly and continue work on it from there.

Comments

zach harkey’s picture

I've successfully used Zurb Foundation and Twitter Bootstrap with Zen. In both cases I opted to keep the zen layouts stuff but replaced most everything else with the frameworks. Twitter bootstrap requires a lot from the markup, so you will have to customize many of the theme functions so you can add the twitter bootstrap classes for things like alerts, tables, menus, etc. But people have already done a lot of this work in other themes. For example, I ended up gutting the template.php and includes, etc from this theme https://github.com/mpezzi/bootstrap and merged them into my zen subtheme as a starting point.

mmikitka’s picture

I am also interested in this discussion and it would be good to start a conversation on best practices related to integrating frameworks with Drupal.

How can this be done in a modular way so that multiple themes can benefit? A good portion of work is required at the theme layer, but there is also some theme-independent work like: managing framework versions, file and directory organization, Sass file integration and CSS output, documentation on best practices, etc.

I am currently working on a Foundation-Zen integration and I am thinking about implementing a Zurb Foundation module, like the Modernizr project, that hooks into the Libraries API module. This could help the versioning problem and accessibility across themes.

Some components overlap with Zen components. Examples: Zen Grids vs. Foundation Grids, Vertical Rhythm vs. Modular Scale (not necessarily exclusive), HTML5 Shiv vs. Modernizr, etc. Most of these are relatively modular at the moment. However, I am running into issues with Normalize since the Scss file included in Zen assumes the Vertical Rhythm package which conflicts with Modular Scale used by Foundation.

Looking forward to the discussion.

johnalbin’s picture

Version: 7.x-5.1 » 7.x-5.x-dev
Status: Active » Fixed

The nice thing about the Zen theme is that it doesn't tie you to any particular framework. So you can integrate it with whatever you like.

For example, the Zen Grids sass module is a light-weight mixin set for layouts. And it is the default layout method for the Zen theme. But it is ridiculously easy to remove it and replace it with whatever you like. :-)

johnalbin’s picture

Title: Frameworks with Zen 5.x? » Frameworks with Zen?

ooh! @mmikitka, I didn't see your comment about the Vertical Rhythm conflicting with Modular Scale.

Is there anything we can do to make Vertical Rhythm easier to replace with the Modular Scale package? Maybe open up a new ticket to make that easier to discuss?

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

ucmerced’s picture

Assigned: Unassigned » ucmerced

JohnAlbin, is there any documentation or instructions on just how to go about replacing Zen Grids with Bootstrap?

I guess an alternative is just using the Bootstrap base-theme instead of Zen...?

Thanks!