JBootstrap

About this demo

This demo is default Joomla! 2.5.7 installation with blog sample data. We have installed JBootstrap Plugin , Joomla 3.0 template Protostar and just added html overrides with some bootstrap tags/classes.

Please note that this is not a 100% styled modification. There are some styles that were not included/changed but the idea of the demo is to show you the possibility of JBootstrap plugin.

About this plugin

JBootstrap is a Joomla! system plugin that brings Twitter Bootstrap functionality in Joomla! 2.5. This plugin is using default Joomla 3.x bootstrap.framework method for Joomla and this way making sure that your template conversion from Joomla! 2.5 to 3.x will be Joomla boostrap.framework compatible. The location of bootstrap framework js/css files is same as in Joomla! 3.x . You can test the compatibility by installing Protostar Joomla! 3.0 Template on Joomla 2.5

Beside Twitter Bootstrap, this plugin also includes optional LESS files compiler php class. lessphp developed by leafo .

 

Notice!

Please note that in no way does this plugin applies needed tags/class names to your templates. It simply includes the framework to style them. You would still need to edit your templates and adapt them for Twitter Bootstrap use.

How to use JBootstrap plugin

Include boostrap.framework in your template:

In your template index.php file add call for boostrap.framework

JHtml::_('bootstrap.framework');

Position it under

JHtml::_('behavior.framework',true);

so it looks like

     JHtml::_('behavior.framework',true);
     JHtml::_('bootstrap.framework');     

This method will include needed Java script files for Twitter Bootstrap.

Include bootstrap css files Option 1:

Above your template css files calls i.e.

$doc->addStyleSheet('templates/'.$this->template.'/css/template.css');

add :

JHtmlBootstrap::loadCss();

so it looks like

    JHtmlBootstrap::loadCss();
    $doc->addStyleSheet('templates/'.$this->template.'/css/template.css');    

This will include , boostrap.css and boostrap.css fixes style sheets within your head tag and position them above your template.css file.

 

JHtmlBootstrap::loadCss() Optional:

If true, main bootstrap.css file is loaded

@param   boolean  $includeMainCss 
JHtmlBootstrap::loadCss($includeMaincss = true);      

rtl or ltr direction. If empty, ltr is assumed

JHtmlBootstrap::loadCss($includeMaincss = true,$this->direction);       

or

JHtmlBootstrap::loadCss($includeMaincss = false,$this->direction);       

 

Include bootstrap css file Option 2:

  1. create less folder in your template root i.e.
    site_root/templates/temlpate_name/less
  2. Set Activate compiler parameter to Yes.
  3. Define your Input LESS file name
  4. Define your Output CSS file name.
  5. Hit Apply
  6. If your Output CSS file name is different than template.css please remember to include call for this css file in your template head. i.e.

    $doc->addStyleSheet('templates/'.$this->template.'/css/new_file_name.css');

Compile process explained:

If you turn the compiler on , it generates new output CSS file from your LESS input file and places it in your template/css folder. This plugin is using extend lessphp classes lessPhpCache and lessPhpCss which are included in plugin. Our lessPhpCache class is extending default lessphp $less->cachedCompile() method which is optimized for speed and compiles your main LESS file if there were any changes to main file itself or any files included @import .

lessphpCss extend lessphp Explained:

Since lessphp by default compiles only LESS files , this JBootstrap plugin param option will let you compile LESS and CSS files in to 1 CSS file. This is useful if you have @importfiles within your main css style sheet and would like to reduce the number of http requests.

Example use if Compile CSS files param is on:

If you are using include bootstrap css Option 1 in your file_name.less file add:

@import "../css/template.css";    

The extend class will compile template.css with all CSS files @import that are included and this way you don't have to create new less files.

If you are using Option 2 in your file_name.less file add:

@import "bootstrap.less";
@import "../css/template.css";    

The extend class will compile boostrap.less with all LESS files @import + template.css with all CSS files @import and this way you don't have to recreate new less files.

 

Should I keep the compiler on at all times?

Please understand that compile process is normally used to recompile your LESS file to a CSS file and it should do exactly that when any main LESS depending files are changed. Our suggestion is , keep the compiler on until you are done editing your styles. After that there is no need for it since it will check for files time changed for no reason. Not that time check process is to much for your server to handle but there is no need for any check if you are done with your styles edits.

First page load after style edit or plugin params change is slow. Why ?

This is completely normal. You have just edited one of your LESS or CSS files that are included in your your_input_file_name.less file. Compiler has noted the change and is recompiling. Next page refresh is much faster.

If you did any changes to the JBootstrap plugin parameters and hit save or apply , plugin is deleting the files times cache and tells compiler to compile again so that you can see the changes applied immediately.

Compress css files param

Compress CSS files JBootstrap plugin param if turned on removes all white spaces from your newly generated CSS file and with this speeding up page load time.

Backup and restore process

Once you have entered Jboostrap plugin admin area the plugin has already backed up your template.css file so you can restore to default if you wish.
If however your template is not using template.css file name , in Jboostrap plugin param name Output CSS file name add your default style sheet name and once you hit save or apply it will be backed up. To restore your default CSS files , simply set Restore to default param to Yes and hit apply. Your default style sheet will be placed back in your template css folder.