Upgrade Bootstrap 2.3 to Bootstrap 3

[hyperboy]

From Robert Winikates on 7/29/2013:

The release candidate for v3 of bootstrap is now available at http://getbootstrap.com/ and it is now the default branch of the github repo (though not the master branch, yet). I assume there will be a migration from Boostrap v2 to v3 in OFW at some point, but I couldn’t find any issue talking about where it might fit in the roadmap, nor a branch that contains this migration work so others could try to contribute there.

Stanford folks, care to share your thinking on this topic? You’ve done some great work thus far, and I think there’s several of us who might be willing/able to help with this migration. Those who aren’t able to help with the migration I’m sure would also appreciate knowing what your thoughts are on when the migration might happen.

For the record, this pull request documents the big changes from v2 to v3: twbs/bootstrap#6342 and these folks put together a migration guide: http://bootply.com/migrate-to-bootstrap-3

[meganem]

Hi Robert,

Brian and I have definitely been thinking about the Bootstrap 3 migration path, and how that fits into our roadmap.

The main thing we have to balance is the fact that OFW is the base theme for all our Stanford-branded themes, so a change like migrating to BS3 has to be done carefully to make sure we are not shaking things up down the line.

Right now, we are thinking we can aim to work on a release of OFW that works with Bootstrap 3 at the earliest in spring 2014. There are still some major bugs and goals we have in the issue queue that we will need to address in our next quarterly release (December), so I am not sure if the work needed to migrate to BS3 will happen before then.

We would love if others from the community were interested in helping on the migration to Bootstrap 3. We have created a 7.x-3.x branch where that work can happen, and we will track issues under the Bootstrap 3 Migration milestone.

Some of the things that are on our minds right now are:

• Migration path for things like span terminology (because people use these in Block Class and we want those to not break for existing sites)
• Compatibility theme option that lets users choose to use Bootstrap 2.3 instead of 3 if they wish
• Converting OFW to SASS, and related to that, restructuring our code assets into a more flexible web framework for Stanford, including the OFW layer of code

This latter item is a big one, and important going forward, so it might influence how we are approaching the next versions of Open Framework, and how we can better separate the truly Drupal-specific styles/templates from the responsive behaviors and base styles that we might also need in other platforms (HTML templates, Wordpress, etc.).

We welcome your thoughts, and if you are interested in helping with the migration we would love to see you here in the issue queue.

[meganem]

Here's an interesting resource that helps convert your code:
http://code.divshot.com/bootstrap3_upgrader/

[greendezine]

It's nice to see your thinking about to Bootstrap 3. It seems the Twitter Bootstrap project prefers Less to Sass. What is your reasoning behind converting OFW to Sass? Is it because Sass is more widely used in Drupal (just referring to Zen framework) ?

[samrose]

I was wondering about SASS vs. Less in OFW, too. I'm happy either way, but just curious (is it because stanford is using SASS in other non-Drupal sites?) Thanks!

[meganem]

Yes, the move to SASS (vs. LESS) is definitely driven by industry trends in the Drupal community (and larger web development community), and in addition to that, I think there are some better features/libraries etc that we get from SASS/Compass than with LESS...

We are still thinking through the implications of moving to Bootstrap 3, and also for moving to using a CSS preprocessor.

I'd be interested to hear more from anyone else about thoughts they have on Bootstrap 3, benefits of upgrading OFW to that, etc. if you have them.

[rwinikates]

Here's a good article about using SASS @extend methods to not get too tightly tied to Bootstrap, might be useful to pair bootstrap classes with drupal native classes: https://coderwall.com/p/wixovg

[bgronek]

I have found Bootstrap 3 to be immensely useful, particularly when considering responsive design. An excellent CMS implementation and execution can be found in the T3 framework for Joomla. I have used this tool for simpler sites and have been very happy with it. I'd love to see something like this come to the Drupal community.

[marchetb]

OFW is an awesome thing for drupal base theme, I think you should upgrade asap to Bootsrap 3. Cause a lot of bug in different browsers are due to bootstrap issues. I can't help you 'cause I don't have the competencies, but I'm with you ^^

[samrose]

All of your issues seemed to have disappeared. We are considering working on and usign the 7.x3.x branch but it'd be nice to know where the issues lay up to now

[meganem]

We haven't really done any work on the 7.x-3.x branch at all, that's why there are no issues in this milestone. Feel free to poke at it! Migrating to Bootstrap 3 is not currently on our roadmap in the near future.

[samrose]

Nothing against OFW, but we switched to/settled on https://drupal.org/project/bootstrap although we may revisit OFW in the future

[BlueScot]

I've started to play around with Bootstrap 3. It seems like a simple conversion for OFW. https://github.com/BlueScot/opened_framework/. Not sure if someone else might find it useful. The only issue is the navbar, which seems to be by default in collapse mode.

[hyperboy]

BlueScot, thanks for looking into the Bootstrap 3 conversion. With some additional edits, we may be able to create an alpha version in the 7.x-3.x branch.

[BlueScot]

Right now, I'm just making straight up conversions to conform to the bootstrap 3 format: i.e. row-fluid to row.

The grid layout is being preserved in the Bootstrap 2 format. Span* ---> col-md-*. and so on. Navbar-inner was removed.

This started as a personal project, because there are multiple feature sets that Bootstrap 3 provides that make layout management extremely easy from a mobile first standpoint. I've tested out most of the core features, everything still works. The singular glaring issue is the navbar, which probably has something to do with page.tpl.php. I'm still getting a handle on the OFW, seems pretty straight forward, but maybe someone at SU-SWS team who is more familiar with this project's core design can take a quick stab at that. Once that's fixed, it should be damn close to an alpha.

Bear in mind, I'm forking the latest 7.x-2.x-beta 1 build, because of its longer development track and richer feature set. However, I'd love to see this pushed back to OFW repository and get official support.

[BlueScot]

Fixed navbar in our fork. Works now with Bootstrap 3. :)