Hints, Tips 'n Tutorials
Template Discussions
Modules / Extensions
Joostrap 101
Discussion Index
Roadmap

Hey - Joomla is amazingly awesome for building highly functional, mobile optimised responsive web designs for our website projects.  Joostrap.com is the place to get the most awesome, optimised implementation of Boostrap3 and it's excellent mobile first world leading technology.

Boostrap3 is pretty damned great .... but Joomla core is still sitting on Bootstrap2 for the foreseeable future.  Joostrap, and other responsive web design industry leaders, have embraced the advantages of Bootstrap3.  So there's a bit of a dis-connect here .... why don't we fix that with some of the awesome super-powers of Joomla  :)

Bootstrap3-upgrade

 

I had to overcome these problems on a recent project where we were testing and using a responsive content editor. Like many Joomla extensions it uses Bootstrap2; and yes, we are a little stuck with it in core ... so we had to figure out a way to convert the responsive editors Bootstrap2 generated code to display as Boostrap3.  The client would be adding new responsive articles on a regular basis, so this needs to be able to update the Bootstrap code on the fly and as new content is added to the site.

Well it took us a while to work out a good way to do this, but I think we ended up getting a pretty slick way of handling this - while having no noticeable effect on load time and no requirement for developers or coders involved.  I reckon that's pretty damned awesome ;)

Boostrap2 to Bootstrap3 Migration & Update Instructions

If you are reading this article and don't use Joomla to build your websites ... this will be when you start crying because this type of power and extensibility is only this easily done with Joomla as your CMS -> that's what I reckon anyway ;)


To allow us to do our Boostrap2 to Bootstrap 3 conversion in real time we have used the awesome NoNumber Re-Replacer extension. If you are going to follow this tutorial, go grab Pete's awesome extension now.  If you're a member of Joostrap you'll also find a discount code for the pro versions of the extension in your "My Joostrap" area.

Once you've installed ReReplacer follow these steps:

  1. Create a new rule ... then set up the options.

  2. In the search box enter:
    span1,span2,span3,span4,span5,span6,span7,span8,span9,span10,span11,span12,offset1,offset2,offset3,offset4,offset5,offset6,offset7,offset8,offset9,offset10,offset11,offset12,row-fluid,container-fluid,hero-unit,img-polaroid
     
  3. In the replace box enter:
    col-sm-1,col-sm-2,col-sm-3,col-sm-4,col-sm-5,col-sm-6,col-sm-7,col-sm-8,col-sm-9,col-sm-10,col-sm-11,col-sm-12,col-offset-1,col-offset-2,col-offset-3,col-offset-4,col-offset-5,col-offset-6,col-offset-7,col-offset-8,col-offset-9,col-offset-10,col-offset-11,col-offset-12,row,container,jumbotron,img-thumbnail
     
  4. I activated the options "Treat as List" and "Word Search" .... you'd then select the appropriate settings for your site in the Search Areas and Assignments tabs.

 As you can see, we're basically taking all the Bootstrap2 classes and upgrading them to Bootstrap3.

For most extensions you don't have to do this, as it just works in the Joostrap Joomla template.  However, there are some extension like responsive editors and Hikashop that need this type of live bootstrap update to be used.  Other extensions like Mijoshop, JomSocial, JomRes have all been tested successfully with no need of updating the Boostrap2 classes to Bootstrap3 - they just work :)


In an upcoming post I'll cover how to insert and display Bootstrap elements and responsive design blocks in a standard content editor like JCE.  And yes, it really does work to help visualise responsive content for end users - even more awesome sauce from Joomla.

What's your experience been with Boostrap2 to Bootstrap 3 conversions, or how we've managed to handle it in Joomla? Let us know in the forum.

Supporting Partners

stackideas
sobipro
k2
akeebabackup
jomsocial
jce editor

 

Our Preferred Joomla Host's

Web Hosting

Get in Touch With us

For account or Joostrap enquiries, please get in touch with us here.

Contact us