What is this project all about?

A quick summary

The idea for this project came about while looking at the large number of Bootstrap based sites, and seeing the limitations of the them without any backend CMS features.

There was already talk of Joomla!3.0 including Bootstrap by default, so this was a way to learn bootstrap and get (a little) ahead of the game.

I noticed that other people were doing similar Bootstrap/Joomla templates, but they did not include all the jQuery plugins. So I decided to build a template that included all 12 plugins, and have them fully working and integrated with Jooomla.

So here we are. A free starter template that is ready to either use as-is or (ideally) build a custom template on top of it.

Things you need to know

  • This is a responsive, HTML5 template for Joomla! 2.5 from KISS Web Design.
  • It follows the 'One Web' philosophy - designing websites that can be delivered to all screens and devices, present and future.
  • It is based on twitter bootstrap versions 2.0.4 and 2.1.0
  • Prior to creating this template KISS Web Design forked twitter/bootstrap and created our own baseline bootstrap.
  • This template is taken from our baseline, not the original twitter/bootstrap
  • This is a starter template, it is meant to be a baseline for Joomla!2.5 templates to be designed with.
  • You will need Joomla!2.5 installed on a server before you can use this starter template.
  • You can install this starter template using the Joomla!2.5 Extension Manager, using the zip file included with this project.
  • If you have trouble getting this starter template installed, then this project is not for you. It assumes an intermediate level of knowledge of Joomla!, the Joomla! templating system, HTML5, CSS3, PHP and Javascript.
  • If you have a project in mind that you see being built using this starter template, but do not have the required time/skills/knowledge to make it happen - please feel free to contact us for a quote.

Linking Twitter Bootstrap to the Joomla CMS

By linking the Bootstrap frontend to the Joomla backend we have created a basic template that has all the benefits of both.

This website acts as both a styleguide and instruction manual.

This template is made as a starter template, using the default setup of Twitter Bootstrap to clearly show the framework in action on a Joomla site.

Compare this website to the Twitter Bootstrap website and you will see an almost identical layout and content. The differences between the two are due to the changes required to turn Twitter Bootstrap from a full standalone website framework into a template framwork for Joomla.

Planned features

Icon fonts for social networks, e-commerce and general purpose use.

Built-in mixpanel and google analytics - you need your accounts to use these features.

Logo upload and select for 1 module position

Smart fallbacks for non-javascript browsers, or users that have javascript disabled.

Additional accessibility features based on ARIA.

Template Features

  • Fully responsive scalable web design
  • Cross-platform smartphone support
  • Cross-platform tablet/pad support
  • Modernizr - http://www.modernizr.com
  • respond.js - https://github.com/scottjehl/Respond
  • Selectivizr - http://selectivizr.com/
  • imgSizer.js - based on http://unstoppablerobotninja.com/entry/fluid-images/
  • 3 selectable fonts from google web fonts - http://www.google.com/webfonts
  • Default font-size is 62.5% - makes it the equivalent of 10px, therefore using font sizes in rem units gives an easy conversion to px sizes, ie 1.0rem = 10px, 1.4rem = 14px, etc.
  • Selectable module widths, or auto-set based on the active modules
  • Media queries for device screen sizes - 480, 980, 1200
  • Media query for high density mobile displays (eg iPhone 4) - min-device-pixel-ratio:1.5
  • Small screensize optimization of the top menu
  • User selectable module and navigation positions interleaved above, below and either side of the main content area
    • 5 pre-defined bootstrap style navigation positions above the main content area.
    • 4 rows divided into 13 distinct module positions above the main content area.
    • 1 module position to the left of the main content area.
    • 1 module position to the right of the main content area.
    • 2 pre-defined bootstrap style navigation positions below the main content area.
    • 4 rows divided into 13 distinct module positions below the main content area.

What's included?

13 fully functional jQuery plugins

  • Modals
  • Dropdowns
  • Scrollspy
  • Toggleable tabs
  • Tooltips
  • Popovers
  • Alert messages
  • Buttons
  • Collapse
  • Carousell
  • Typeahead
  • Affix
  • Transitions

5 Additional functionlity plugins

4 utlity plugins

  • Modernizr - Browser feature detection utility
  • respond.js - A polyfill for min/max-width CSS3 Media Queries for IE 6-8
  • Selectivizr - Emulator for CSS3 pseudo-classes and attribute selectors in IE 6-8
  • imgSizer.js - Responsive images plugin for IE 7-8

All of the necessary images and icons used on this website.

All of the necessary CSS files

All of the open source licence files covering every element of this template.

Designed for everyone, everywhere.

group icon

Built for and by nerds

Like you, we love building awesome products on the web. We love it so much, we decided to help people just like us do it easier, better, and faster. Bootstrap is built for you.

podium icon

For all skill levels

Bootstrap is designed to help people of all skill levels—designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.

iphone icon


Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.

3 by 3 grid icon

12-column grid

Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.

twin-arrow icon

Responsive design

With Bootstrap 2, we've gone fully responsive. Our components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.

open book icon

Styleguide docs

Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only our features, but best practices and living, coded examples.

roundabout icon

Growing library

Despite being only 10kb (gzipped), Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components ready to be put to use.

magic wand icon

Custom jQuery plugins

What good is an awesome design component without easy-to-use, proper, and extensible interactions? With Bootstrap, you get custom-built jQuery plugins to bring your projects to life.

LESS icon

Built on LESS

Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.