Updating stekkers.be & creating JTwitterBootstrap

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.

CategoriesIT

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.