Blog

Dissemination of views, information and knowledge without any cost or ado was made possible after blogging dawned upon us. Lets take a look at some of the burning topics, general discussion, innovations and techniques from our Editor’s desk

  • Apr 11 2013

    Create a responsive Joomla website using Bootstrap Framework in 4 simple steps

    A responsive site is the type of site that can adapt optimally to any screen size and restructure or resize the content according to the size of the viewing screen. For creating a responsive website, CSS code of the website plays a major role as CSS code is responsible for deciding how a site will look in different screen sizes. However for new programmers, creating CSS sheet is a little difficult step because of intricacies and details involved, and for professional programmers it is a tiring job because of repetitive nature of CSS coding. The solution for both these problems is the same, Bootstrap Framework. It is a prebuild CSS framework and you can very easily create responsive Joomla websites using Bootstrap Framework alone.

    About Bootstrap

    About Bootstrap

    Bootstrap was originally made by Mark Otto and Jacob Thornton who were then working for Twitter. Thus it was initially a twitter project and was called Twitter Bootstrap, the name it now mostly recognized by in the web-development industry, even though Twitter has made it an open source project with a separate governing body. It is made in LESS stylesheet language which is considered an advanced version of CSS, and JavaScript.

    Bootstrap consists of prebuilt CSS files that can be used to style any kind of design component. It has different style codes to suit every requirement. Versatility of Bootstrap framework and ingenuity of developers is visible by the fact that even though the same style sheet is used by hundreds of sites, no two sites are exactly the same. Developers have options in the Framework to customize the Bootstrap components as per their will. In short it has everything a new programmer may need to code a responsive CSS sheet without a mistake and has every component that a professional programmer may require without doing boring and repetitive coding. However we will advise new programmers to code their CSS stylesheets themselves without external help as it will not only improve your CSS understanding, but will also give you technical expertise to extract full potential out of external frameworks like Bootstrap.

    For this tutorial I am assuming that the reader is familiar with CSS, HTML and PHP, and at the same time have an understanding of Joomla and Joomla template making. Now without taking much time, here is list of 4 simple steps to create a responsive Joomla theme using Bootstrap framework.

    Step 1: Download Bootstrap and extract it in template

    Bootstrap is one of the most worked upon projects on GitHub.com and enjoys a specific page on it. A default version of Bootstrap can be downloaded from this link, however the site has a special feature that allows you to download a custom version of Bootstrap framework from this link. We will advise you to download the customized version because through it you can include every possible feature or only the required ones from the site. For now don’t worry about what to choose and what not to choose from the Custom Bootstrap version. Simply select all check boxes in Choose Components and Select Jquery Plugins field, don’t touch anything in Customize Variable field and just click on the Customize and Download button. This will initiate a file download of Bootstrap.zip that will have a size of around 300-400KB, depending upon latest developments. Extract it at any location. The extracted Bootstrap folder will have 3 folders inside it, namely CSS that has the CSS files in it, JS folder that contains the necessary JavaScripts, and img that contains Bootstrap’s images. CSS folder and JS folder are of importance here.

    Just like WordPress or any other CMS, in Joomla also the template is the extension that decides whether the site is responsive or not. So in making a responsive Joomla site we are effectively making a responsive Joomla template. Thus the Bootstrap files will have to go into the template folder. To know about the folder structure of Joomla CMS refer to this post. Copy and Paste the CSS and JS folder in the Template folder.

    Step 2: Declaration of Bootstrap

    The most important file of every Joomla template is index.php. This file contains the main declaration of CSS and JavaScript files of Bootstrap Framework. In most cases the first mention of bootstrap comes after DOCTYPE declaration however you can declare bootstrap JavaScript earlier as per your requirements. But it is very rare. Take a look at the following piece of code.

     Here I have declared and used both CSS files of Bootstrap and CSS file built specifically for the site. The bootstrap declaration is usually done in the <head> </head> tag of the code but it is up to you how you use it.

    Same way you can also import bootstrap into the main CSS rather than calling it from the index.php using media queries by including code such as

     A thing to note here is that when you create your own CSS template don’t name the CSS components the same way as in the Bootstrap file i.e. for example don’t name a component as ‘img’ as bootstrap already has a component named ‘img’. By declaring bootstrap after the main CSS template file you are effectively superseding all the same named components of system.css with the components from bootstrap.css. A common practice to avoid this kind of confusion is by naming custom components with a prefix or postfix. Similarly you can use this same concept to deliberately supersede any component.

    Step 3 : Using Bootstrap Styling

    Bootstrap has a 12 column 940px grid framework that can automatically adapt to larger (1170px) or smaller (724px) width depending upon the viewport. The best feature of Bootstrap is that it has specific classes that can be used to accesses length, number of columns, and layout of the grid (Fixed layout or Fluid layout). There are a number of other features and classes in Bootstrap that you can learn from the Bootstrap Scaffolding page on GitHub.

    The most important use of Bootstrap styling comes into play during assigning module spaces in the template. Look at the following piece of code

     In this code we have created module places and assigned then position and numbers. At the same time we have used classes to make them responsive and define their size. Using

     we have created a div named body_container that will contain the main body gave it Bootstrap class Container then created a new div inside it using

     Assigning it class=”row-fluid top_search_bar” has made it a fluid box especially for a top search box. Similarly using code

    we check if the template has the module position14 then assign a module space to it that will span 4 columns out of the 12 columns of the grid. Since these modules are already inside <div class=”row-fluid  inner_box_container”>, they are automatically responsive with fluid grid layout. Through this 70 line code we have shown how to assign modules inside Joomla template, define their lengths and layout types, and the position they will take in the template. We have also shown how to include modules as banners and how to include them in footer.

    Step 4: Including JavaScript

    Now the next part is to include the JavaScript files that would be used when using menus and buttons. These JavaScript files are also declared in index.php and usually at the very end of the code to decrease the page load time of the site. The JavaScript are declared like this

     You may have noted that even at the end we have included a module position that can be used to add a debug module.

    Conclusion

    You may now have gotten a basic idea of using Bootstrap for creating a responsive website. But if you want to fully utilize the potential of the frame work, go through the bootstrap documentation and Bootstrap code. We will also advise to pay special attention to visible-phone, visible-tablet, visible-desktop, hidden-phone, hidden-tablet, and hidden-desktop classes as they are widely used for creating a site that is compatible with every screen size.

    Posted by Mudit Posted in: Joomla Comments: 0