Joomla news about Digital Peak

Since Joomla 3 is bootstrap from Twitter an essential library to build responsive web sites. But what happens with your extension when you want it to be responsible on Joomla 2.5 too? Here at Digital Peak we have one install package per extension which installs in Joomla 2.5 and 3. The challenge was to backport bootstrap to Joomla 2.5 the way that it will not interfere with the template and wreck up your web site. We came up with the following solution. We created a modified version of bootstrap which adds it's styles only to elements within a certain container with a special class on Joomla 2.5.

Install the less compiler

To install the less compiler on your Ubuntu machine execute the following commands.

$ cd /tmp
$ apt-get install git-core curl build-essential openssl libssl-dev
$ git clone https://github.com/joyent/node.git
$ cd node/
$ make
$ make install
$ node -v // should show you the node version like v0.11.2-pre
$ wget https://npmjs.org/install.sh
$ sh install.sh
$ npm -v // should show you something like 1.2.18
$ npm install less

Download bootstrap

Download the most recent version of bootstrap from here and extract it on your Ubuntu machine (for example to /tmp).

$ cd /tmp
$ wget https://github.com/twitter/bootstrap/archive/v2.3.2.zip
$ unzip v2.3.2.zip
$ cd /tmp/node
$ cp -R /tmp/bootstrap-2.3.2/less/ .

Recompile it

Now create a file with the following content in the folder /tmp/node with the name demo.less.

.my-bootstrap-container {
     @import "less/bootstrap.less";
     @import "less/responsive.less";
}

WIth one command you can create your custom bootstrap version.

$ node_modules/less/bin/lessc demo.less -x > demo.css

You can also grab the minified version from here and search for .dp-container and replace it with .my-bootstrap-container.

How to use it?

Now you can include your demo.css file into your extension. What you can do in the default.php (or how your layout name is)

$j = new JVersion();
if substr($j->RELEASE, 0, 3) == '2.5) {
  JFactory::getDocument()->addStyleSheet(JURI::root().'components/com_demo/libraries/bootstrap/css/bootstrap.min.css');
  JFactory::getDocument()->addStyleSheet(JURI::root().'components/com_demo/libraries/bootstrap/js/bootstrap.min.js');
} else {
  JHtml::_('bootstrap.framework');
}

The HTML of your output has to be wrapped in the new container div

<div class="my-bootstrap-container">
  <div class="row">
    <div class="dp-grid__col-4">...</div>
    <div class="dp-grid__col-8">...</div>
  </div>
</div>

We are using it on GCalendar, the GCalendar Action Pack and DPCalendara responsive native Joomla calendar.