CreativeSights | San Diego Web design and Website Development
Call for a FREE Consultation: (858) 412-7483
Call Now! (858) 412-7483

A Free Blank Joomla!™ Bootstrap Template

Posted by Andrew Crossan on Wednesday, May 6, 2015 as Tips, Hints and Tricks
A Free Blank Joomla!™ Bootstrap Template

At CreativeSights we have decided to provide a clean core Joomla!™ template free of charge that anyone with HTML and CSS skills can utilize to build their own fully customized Joomla!™ template.

 As I’ve stated in older posts, one of my favorite things about Joomla!™ is how easy it makes things to build your own template.  We want the world to take advantage.

Joomla!™’s clean MVC architecture allows you to get exactly what you want with only a little bit of HTML and CSS skill. A little bit of PHP skill will take you even further.

Unlike some of the other popular CMS and blogging platforms out there, you depend on the Joomla!™ CMS to handle all of the heavy lifting. The template controls all the aesthetic aspects of the layout and design.

From Joomla 3.0 on, the sleek, intuitive and powerful Bootstrap front-end framework has been part of the core distribution. As the demand for responsive website design has grown, Joomla!™ is an ideal choice.

Commercial Joomla!™ templates and their frameworks

There are companies that build pre-developed templates for Joomla!™.  Most release a new template each month as a turnkey solution for the design of a website. Each Joomla!™ template is built on a framework that provides an extensive set of options to customize the design elements with minimal knowledge of code.

Although I initially shunned them, I’ve worked with some of the popular commercial templates and their respective frameworks pretty extensively. JoomArt’s T3 framework, RocketTheme’s Gantry and Yootheme’s Warp framework are all nice solutions to help quickly deploy and nice looking Joomla!™ website, but there are downsides.

Commercial templates tend to be big and bulky

In order to provide everything to everyone, each template framework provides a multitude of options – most of which never get used. These include CSS styles, module positions and alternative layout options. Even though some provide options to gzip, minify, compile and otherwise optimize their code output, there’s still a lot of stuff that sits unused.

Predeveloped templates often overwrite some of the best parts of Joomla!™

In addition to the deep embedding of Bootstrap, Joomla!™’s core outputs extensive amounts of microdata allowing you to build a website that search engines love.  Unfortunately, we’ve found on more than one occasion that the commercial frameworks frequently use template overrides that strip these tags from the output.

With these things in mind, we’ve determined that building our own templates is the best way to give our clients exactly what they want. Unfortunately as we researched and plodded through incorporating the nuances of the Bootstrap framework in a custom Joomla!™ template not all the information was helpful.

Other Blank Joomla!™ templates

There are several other blank templates that are floating around out there. Several present the almost the same problems that we had with commercial templates, there were tons of options and extra coding that existed to do things we didn’t need.  Several others were so basic, they didn’t provide any insights we could use – they didn’t even call the Bootstrap files from the Joomla!™ or provide the basics for a navigation menu with dropdown items that adjusts to the mobile screen display.

So here is our solution

The CreativeSights Blank Bootstrap Template utilizes three module positions, a place for the component output and a call to render the Bootstrap included in the Joomla!™ core. There an additional call to add an HTML class to incorporate a unique CSS page style that you’ve designated inside the respective Joomla!™ menu item.

Need more module positions? Copy and paste one of the included module positions in the “index.php” file and then adjust the to it in the templateDetails.xml file to include a reference. Use the scaffolding explained at http://getbootstrap.com/2.3.2/scaffolding.html#fluidGridSystem to add additional rows and places to give it a home.

Want to add additional styles?  Explore the CSS directory inside the template and access the “custom.css” file to add or override any styles you need.

Caution – this template is not a complete solution.  If you’ve never worked with CSS or HTML this option might not be the best place for you to start. That said, we hope this template can be the step that takes your Joomla!™ websites to the next level.

Please share your thoughts and success stories with us in the comments below.  You can download the latest version of our CreativeSights Blank Bootstrap Template here. Download