JBlank is a blank template for Joomla 2.5 / 3.x

For developers who create unique design and don’t like too much noise and extra features in their templates.
And of course, they don’t afraid to do something selves.

Getting Started…

What is it for?

J!Blank.proJ!Blank Template is a modern template for Joomla CMS, that may help you to create your own design and HTML markup with the latest and stable features for front-end developing nowadays.

But, it can be good for you only one case if you want to develop your own theme from the ground and you are too lazy for creating own blank template or simple framework. Or if you want no deals with difficult and large templates/frameworks as Warp, T3 and others.

Attention, please! If you don’t know how to use HTML or CSS, well... please, don't download and don't use it. So you save both time: your mine (yeah... it’s really expensive stuff in nowadays).

General feature list

Earlier this project belonged to Joomla-Book.ru and was left by me because I was very busy with JBZoo CCK. I’m going to keep on improving it, but it’ll be more serious and response now. Of course, it’s my enthusiasm that speaks so if you like it, buy me a beer. THANKS!

Where get the latest?

There are different “the latest” versions

  • You can download the latest stable release by button in the website’s header.
  • There is the latest experimental version at GitHub repository (watch & fork! ;))
  • And other you can find here


v3.0.4 — 20.09.2014

  • Including external JavaScript and CSS files.
  • Example "init.php" and template.less were updated.
  • Fixes minor bugs.

v3.0.3 — 18.09.2014

  • Auto cache doesn't create more than 2 CSS files for each of compilers.
  • Styles Source Map for pgEasy (you need enable it in your browser).
  • partial function can include files without *.php extension.
  • Debug mode updates CSS files only if it necessary.

v3.0.2 — 15.09.2014

  • Paths for url and data-uri were fixed.
  • Less lib by pgEasy is recommended now.
  • Paths for data-uri function should be used relatively with less-files.
  • Fix SCSS preprocessor initialization.

v3.0.1 — 13.09.2014

  • Joomla 2.5 compatibility fixes.
  • Less.js compiler was added, so you can build styles as quick as thought.
  • Added counter's template for Google Analytics and Yandex.Metrika.

v3.0 First Stable — 10.09.2014

  • First public release.

v2.2.0 — 2012

  • Very old version.


Getting started

I repeat myself, that JBlank is a empty template so you can find only those things that a neccecery for a quick start. My general goal was creating really clean, easy and useful template for web-developers. So I try to add only well-enenered features there. 

There is var $tpl which is JBlankTemplate singleton. It has the most useful methods and ready made variables. So they help ypu easier manage template from your code. Read it below please.

Despite a lot of features, this template doesn't remove, add or change anything. All the configuration will be only with calling some functions from $tpl variable. It happens in the file /php/init.php by default.

How to install

Joomla way: Enter in the Joomla extension manager and pick out downloaded archive. After that just click “install”. That's all. If something is goes wrong use the next way.

Manual way: Unpack template’s files so that you can see templateDetails.xml in the <site root>/templates/jblank/. Further enter in the Joomla Extension Manager and try to find new template. Yeap, install it.

Runtime configurations

For demonstration I show you real code from this website (yeap, of course I did it with JBlank). So you will see as easy to call $tpl’s functions like a chain.

init.php file from JBlank.pro (example)

// including libs
require_once dirname(__FILE__) . '/libs/template.php';
$tpl = JBlankTemplate::getInstance(); // get $tpl variable (singleton)
$tpl ->css(array( // add CSS framework and my own less 'uikit.min.css', // it's nice 'template.less', // easy life with less )) ->js(array( // add own JavaScript files 'libs/libs.js', // jQuery + plugins 'template.js', // init plugins )) ->excludeCSS(array( 'jbzoo\.css', // exclude JBZoo styles, because I don't need it here )) ->excludeJS(array( 'mootools', // remove mootools 'jbzootools', // remove JBZoo scripts 'com_zoo', // remove Zoo scripts 'responsive', // remove Zoo adaptive hack 'media\/jui\/js' // remove standrd Joomla scripts )) ->generator('J!Blank Template') // set generator name
->html5(true) // some modern HTML5 tags in <head>
->meta(array( // SEO '<link href="' . $tpl->baseurl . '" rel="canonical" />', '<meta property="og:url" content="' . $tpl->baseurl . '" />', '<meta property="og:title" content="' . $tpl->doc->getTitle() . '" />', '<meta property="og:description" content="JBlank Template... " />', '<meta property="og:site_name" content="' . $tpl->doc->getTitle() . '" />', '<meta property="og:image" content="' . $tpl->baseurl . 'images/cover.png" />', // attempts fix markup '<meta http-equiv="X-UA-Compatible" content="IE=edge" />', '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />', // Verification аor Google and other Search Engines '<meta name="google-site-verification" content="0WIhZ-bNk6pGsYR77wgNn-pRZbb7j9kTemjbmhx198M" />', '<meta name="yandex-verification" content="677c4eabb8658f6a" />', ));

index.php from JBlank.pro (example)

defined('_JEXEC') or die;
require dirname(__FILE__) . '/php/init.php';
?><?php echo $tpl->renderHTML(); ?> <head> <jdoc:include type="head"/> </head> <body class="<?php echo $tpl->getBodyClasses(); ?>"> <?= $tpl->partial('counters'); ?>
<div class="jblank-wrapper"> <?= $tpl->partial('header'); ?>
<div class="jblank-main"> <div class="uk-container uk-container-center"> <div class="uk-grid">
<div class="uk-width-medium-1-4 jblank-sidebar" data-sticky_parent> <div class="sticky" data-sticky_column> <jdoc:include type="modules" name="left"/> </div> </div>
<div class="uk-width-medium-3-4 uk-article component">
<?= $tpl->partial('buttons'); ?>
<div class="clearfix"> <jdoc:include type="message"/> <jdoc:include type="component"/> </div>

<?= $tpl->partial('buttons'); ?>
</div> </div> </div> </div>
<div class="jblank-footer-spacer"></div> </div>
<?= $tpl->partial('footer'); ?>
</body> </html>

I would like to note that

  • As you see, I use UIkit framework so I can do anything I want with a template. To compare, you can see YOOtheme Warp. It uses UIkit too, but it’s really hard to understand how it works. So adding some new custom block is a real big headache.
  • My other projects have more difficult template than JBlank.pro. But “index.php” looks about the same. I think, that if you have easy a skeleton, you will understand it quickly.Of course, you don’t believe me, so just look Protostar or Beez or any YOOtheme’s templates.
  • I have a clean tag “head”, so I’m managing any metadata with Joomla API easily.And it’s very cool, because a lot of this metadata comes from the depths and other extensions and I don’t need any hacks. Hardcode is evil =)
  • Logically separated blocks include through partial(). So my markup looks clean and easy. I could use header, footer, or sidebar on other layouts. For eaxample, in external pages with special design.
  • In my opinion, there should be only a base grid markup.If you don’t have it, it's sad... There would be a lot of issues with developing.
  • Other templates are unchanged.
  • You can see less-file by direct url.I think it’s very easy for understanding.If less will be changed - CSS will updated automatically.

As result - my template is very clean and easy for developing and future updating.

Other stuff


Any questions?