Twitter bootstrap, is a framework to quickly develop front end’s or website layouts. Why use it? It provides us with a couple of superb things like:
- Fully responsive.
- Basic (beautiful) style for almost all html elements.
- Javascript functions included to do basic things quick and easy!
- AMAZING!
So since http://v1.stekkers.be/ (local youth & environment movement) needed an update (I wanted to make it responsive and more sleek ^^), Twitter Bootstrap seemed to way to go.
For Joomla 2.5 their seemed to be 2 major already existing solutions.
- http://www.joostrap.com/ Expensive!
- http://hwdmediashare.co.uk/joomla-templates/116-strapped
Unfortunately the second (free) option didn’t feel very finished (the templateDetails containing the module positions wasn’t complete, …) and had some bugs. So I thought, hell, why not, let’s try to do it myself!
After creating my github repo, I started making the jomla template.
Implementation
Really, it was just very, very easy! Using some tutorials here and there I was able to very fast create a functioning template, that incuded the Twitter Bootstrap sources!
Issues I encountered?
Joomla template settings
I had a typo, in my settings, which made the whole thing break on installation. Even though it’s not very complicated, I thought sharing it with everyone might be a good idea. And by the way, these settings are saved in the database! No need for INI files anymore!
<config>
<fields name="params">
<fieldset name="advanced">
<field name="SiteTitle" type="text" default="Title" label="Template title" description="This title appears in the black menu on top." />
</fieldset>
</fields>
<fields name="params">
<fieldset name="analytics">
<field name="GoogleAnalyticsId" type="text" default="" label="Google Analytics Id" description="Add your google analytics id!" />
</fieldset>
</fields>
</config>
The complete templateDetails.xml file you can find on github.
The result
I know it is amazing! I was able to change this:
Into a responsive site! Please have a look yourself and rescale the browser, or use your tablet or smartphone!
Ooh
What I didn’t know then, is that Joomla was doing big efforts to put Twitter Bootstrap in his own core, which I just find awesome! However, it will probably take some time (like 5 months) before all the components and modules I use, will be upgraded for this version. So I am sure my effort (which learned me a lot about Joomla template development and Twitter Bootstrap) isn’t simply a waste.