I am looking for some constructive feedback. ^_^

We have been using Omega 4.x and it has been a privilege to work with. Response time is snappy and the overall architecture makes it very extendable. However we just got told our theme will be switching to bootstrap 3. Now this is where things get interesting and not sure where to go from here. I know the bootstrap folks were asked to port to Omega 3.x but I don't think they ever reviewed the 4.x branch.

Essentially I have two options:

1) Move from Omega 4.x to Bootstrap (drupal.org/project/bootstrap)
2) Port bootstrap to be a subtheme of Omega ala Ohm

I have to admit I am particularly partial to option 2 as there a few features from Omega I genuinely love and would lose should I switch to Bootstrap. (Just wanted to clarify not that I wouldn't gain features from Bootstrap!)

Some of the features Omega has that benefits me:

1) Drush Integration (Omega 4.x has spent a lot of time in this area particularly in generating sub themes)
2) Plugin Extension System (Really easy to work with and extend with my own plugins, see Omega's Development Plugin)
3) Omega 4.x works really well with Panels and is key to our distribution
4) Omega has a great asset pipeline handled trough a few of its extensions
5) Omega allows you to manage preprocess + theme functions in separate directories. (Bootstrap allows this as well but Omega's implementation is pretty neat!)
6) Omega provides some good defaults for jshint, sass, guardfiles, bower, gemfiles, so thinks about theming a different way.
7) The community behind Omega

All in all looking at Bootstrap it wouldn't be terribly hard to port it to Omega but just not sure if this is the right way to go about this. Would love some feedback on this!

Comments

fubhy’s picture

Sure, doing a Bootstrap theme based on Omega 4.x is possible and certainly not hard.

You can either start your own contrib Bootstrap theme or ask the Bootstrap theme maintainers to start a branch that builds on Omega. Not sure how they feel about that though...

However, it is no secret that I am not a huge fan of Twitter Bootstrap in general. Well, that is an understatement... I normally strongly advise against Twitter Bootstrap for various reasons. I am not going to repeat those in here as I don't want to derail this issue or discourage you in whatever you are trying to do with Bootstrap (particularly because I don't have any background information) but feel free to look at this issue: https://drupal.org/node/1801582#comment-6553686 where me and various other people like Snugug, etc. explain why Twitter Bootstrap is a bad choice and a bad framework.

There are also various blog posts on that topic on Google.

Anyways, as I said... I don't want to stop you - Just wanted to make you aware of what I think about Bootstrap in general. As I said previously though, implementing it on top of Omega should not be a problem really. It should be fairly simple to take http://drupal.org/project/bootstrap and make it a sub-theme of Omega 4.x, then remove the feature duplication from it, and that should be pretty much it (with room for optimization of course).

sylus’s picture

Hey thanks for the response, I appreciate your advice.

We are locked in to bootstrap 3 for the entire GoC as the Web Experience Toolkit (github.com/wet-boew) has officially endorsed it as of v4.0. The Web Experience Toolkit is the common look and feel that all canadian gov sites must adhere too. So I am tasked with assisting in moving some of our sites to the new look which will be based and extended upon bootstrap 3.

I hope many of the issues brought forth in the link you sent me have been addressed in bootstrap 3. I know the grid has undergone some significant changes. I think the primary reason that wet-boew has officially chosen it is that the twitter bootstrap folks are keen in taking the accessibility fixes that wet-boew provides and genuinely open to improving.

I sent a dm to @Mark Carver (maintainer of bootstrap) to see what he thinks so will wait for that as don't want to be premature :)

Again thanks for taking the time!

sylus’s picture

Issue summary: View changes

Mod

sylus’s picture

Issue summary: View changes

Better OP

fubhy’s picture

I hope many of the issues brought forth in the link you sent me have been addressed in bootstrap 3. I know the grid has undergone some significant changes. I think the primary reason that wet-boew has officially chosen it is that the twitter bootstrap folks are keen in taking the accessibility fixes that wet-boew provides.

One of the problems is that it even comes with a static, non-semantic, pre-defined grid though :P.

I understand that you are somewhat forced to use it though... So let's try to solve your dilemma :)

kclarkson’s picture

Is it possible to just use the bootstrap elements (buttons, forms etc.) then use Singularity for the grid system ?

fubhy’s picture

Sure.. That works. Those other elements are not quite my taste either... but I would start with https://github.com/jlong/sass-bootstrap I guess (to get around the fact that the actual Bootstrap uses LESS instead of Sass). Optimally you would even use it in a Gem / Compass extension, but https://github.com/vwall/compass-twitter-bootstrap hasn't been upgrade to 3.0 yet as far as I can tell. So, yeah... I would first try to solve the problem that Bootstrap uses LESS by using one of the Sass ports from Github (optimally a Gem if that exists for 3.0 somewhere) and thereby remove LESS from the negotiation (yai, no more LESS). The benefit of using a Gem would be that it makes it much easier for you to manage the separate components and just include (@import) what you actually need. The Bootstrap components (and sadly also it's JS) are quite heavy so you should really only include those that you are actively using on your site.

But yeah... In any case I would try to avoid using the provided grid preset and instead use one of the tools/frameworks the modern web offers these days (singularity/susy/etc.).

Oh, and you should be aware of the fact that Bootstrap makes a lot of assumptions regarding your HTML. You will have to do a lot of (pre-)processing and template overrides to accommodate for the requirements imposed by Bootstrap. I bet that drupal.org/project/bootstrap solves all/most of those already though :).

markhalliwell’s picture

@sylus, this is certainly an interesting idea :)

TL;DR:
There use cases for both. If you want stability, go with Omega. While Bootstrap is undergoing a major overhaul (which btw, certain people should update their sources and test it :)) there will be bugs (always are) so I wouldn't recommend trying to build any kind of complicated custom theme with it just yet.

Response
I would like to preface the rest with:
Every site's theme is unique and has it's own requirements. While we have our "best practices", we always are thrown curve balls (like yours) and have to work together :)

I would also like to quickly squash the two former "myths" regarding Bootstrap (and LESS) that are simply no longer true:
http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/

  1. As of Bootstrap 3, most of the "issues" presented in https://drupal.org/node/1801582#comment-6553686 are no longer true.
  2. As of LESS 1.4+, it is not inferior to SASS (technically). It's simply just LESS popular (pardon the pun, but that's just the plain truth).

From Omega's project page:

Omega 4.x is a base theme framework aimed at themers who want to gain full control over the theme through code, rather than a user interface. If you depend on the user interface you can continue using Omega 3.x.

I think this is very important to note that both base themes have two different audiences and use cases:

  1. Omega is a framework that allows you to build, from scratch, exactly what it is you need. I still use many other types of frameworks depending on what it is I am trying to accomplish (especially if you're an experienced themer, like us). Regarding your predicament, I agree with @fubhy and would strongly recommend using one libraries mentioned in #5. I would compile it directly into your Omega sub-theme.
  2. Bootstrap is a more "out-of-the-box" base theme utilizing things like BootstrapCDN and BootSwatch (via BootstrapCDN). One of the goals of the Drupal Bootstrap base theme is to "ease" people into some rather generic and common theming techniques without requiring to actually know "how all this stuff" actually works. Believe it or not, there are still themers (and developers) who have no clue about things like LESS, SASS, Compass, Singularity, etc.

Another goal of Drupal Bootstrap is to not assume what kind of workflow one needs. I have been very adement about keeping things like Panels and Display suite out of the Bootstrap base theme and instead leaving it to contributed modules to extend Drupal Bootstrap when it's desired/necessary: Bootstrap Related Modules.

As far as using Bootstrap as a "base-theme" of Omega, I'm honestly not entirely sure how well that will work. Since #1840980: [meta] Bootstrap 3.0 (and more specifically #2098175: Clean up files) has been implemented, the Drupal Bootstrap project has taken a more active role in becoming a proper Drupal "base theme". There would probably be many conflicts given that both Omega and Bootstrap alter the theme registry quite extensively.

Also, FWIW:

11190 sites currently report using this theme

The Drupal Bootstrap base-theme is gaining popularity. Granted it has nothing on Omega ;) However, I'd like to believe that Drupal Bootstrap also "has the support of the community" just as well :)

Other helpful information:
(Drupal) Bootstrap Documentation
#2102895: Add SASS starterkit

markhalliwell’s picture

Issue summary: View changes

Mod

windtrader’s picture

It has been a number of months since the last update. What is the current state of integrating bootstrap into Drupal as a base theme or a subtheme of Omega?

Are there success or horror stories, issues both small and large experienced by going down these routes? Any new options discovered and working?

markhalliwell’s picture

Bootstrap 7.x-3.0 has taken off quite well. Now over 13k installs for that release alone (over 22k total), I plan on another release soon (probably with an RC before hand) within the next month or so which addresses quite a few bugs since the initial release. That essentially means that 7.x-3.x-dev is probably the most stable (ironically) as I have been working on client sites extensively with this for the past few months. These sites are using the SASS based version of Bootstrap which means I'll be able to finalize #2102895: Add SASS starterkit soon.

As stated above, there's use cases for both. Omega (in my mind) tends to be more malleable and framework independent; more suited for highly customizable design and allows themers to be more adept at establishing project based frameworks (existing branding/styles). This allows you to create a sub-theme from the ground up (clean-slate). I still use Omega on projects that require this amount of flexibility.

The external Bootstrap framework does make some assumptions with styles and HTML markup. The Drupal Bootstrap base-theme attempts to soften that blow by providing the necessary preprocessing and templates. The direction of the Bootstrap base theme is highly focused on the external framework and limited to Bootstrap based solutions. Omega has a much freer range of possibilities and abilities IMO. I don't think creating a Bootstrap based sub-theme of Omega is really the best approach, especially for long-term maintainability.

I am tempted to "close (won't fix)" this since I don't really see this particular issue happening very often and is more of a [smaller] individual use case. I'll leave @fubhy to decide.

sylus’s picture

Status: Active » Closed (won't fix)

I think it is reasonable at this point to mark as won't fix. Right now I am starting a subtheme off of bootstrap leveraging grunt for most of my files and seems to work great. Only thing I really want is the ability to split up template + preprocess + process files how Omega does it. But this can be implemented as a feature request down the line.

I really appreciate you taking the time to clarify a few things it has definitely been helpful!

fubhy’s picture

Yes, I fully agree with Mark and sylus here. I don't think it makes much sense to build Bootstrap on top of Omega. As Mark said, Bootstrap did take off on its own anyways. In fact, I found myself using it on 2 projects for prototyping the project's features before implementing the actual theme as an Omega subtheme. That came in very handy tbh. I think Mark outlined the different use-cases quite well.

Only thing I really want is the ability to split up template + preprocess + process files how Omega does it. But this can be implemented as a feature request down the line.

Yeah, if Mark wants to add that feature to Bootstrap it's pretty easy to extract it from Omega and make it available to Bootstrap as well. If you open an issue and convince Mark to implement it I can assist on the patch. It's quite low level theme registry manipulation and hard to grok initially but rather easy to copy to any theme really as it's more or less just hook_theme_registry_alter() and some helpers.

fubhy’s picture

Btw. I would actually really like to know what happens if you simply change bootstrap.info to use Omega as a base theme. Somebody should try that ;)

fubhy’s picture

Just tried it. Simply added a quick hook_system_info_alter() in a custom module to add

base theme = omega

to bootstrap.info and created a sub-theme of Bootstrap. It seamlessly inherits all the Bootstrap stuff and also the advanced dev features provided by Omega.

You can also just change bootstrap.info if you feel like hacking it though ;). Anyways... just wanted to put that here.

fubhy’s picture

And here comes the best part. Bootstrap comes with a subtheme template (starterkit) called "bootstrap_subtheme" and due to it's naming pattern of the bootstrap.info.starterkit and it's content it actually works with the Omega subtheme wizard :P. Only problem: It does not copy over the commented-out bits of that .info file (so the references to the bootstrap .js files get lost on the way). But that is a minor problem.

Ways to reproduce: Download Omega, Download Bootstrap, Change bootstrap.info to include the "base theme = omega" line, Run the Omega subtheme wizard with Drush, Enjoy.

sonicthoughts’s picture

As a system builder who has to find drupal themers and wants to reuse theme components Bootstrap is very attractive. I see this is still not closed, and hope that pragmatism will give way to idealism and perfectionism. This is a great bridge to make drupal more mainstream since over 1% of the web is now using Twitter Bootstrap!