Intro Joomla! 3 Custom Templates

Today's Scope

Basic introduction to get started with creating custom Joomla 3 templates by using the JUI.

The JUI?

No, not the Joomla Jedi Source: Wikimedia Commons

Joomla User Interface Library

A UI library built on Bootstrap for developers to rapidly deploy modern standardized extensions.


Mostly CSS and jQuery JavaScript.

JUI Features (select)

  • jQuery / jQuery UI
    • Chosen (transforms select boxes)
    • Sortable (drag and drop)
    • Icomoon IE6-7 support
  • Bootstrap
    • Normalize.css
    • (Responsive) Grid System
    • Responsive utility classes
    • Typography
    • Forms
    • Dropdowns
    • Button groups
    • Button dropdowns
    • Navs
    • Navbar
    • Breadcrumbs
    • Pagination
    • Labels and badges
    • Typography
    • Thumbnails
    • Alerts
    • Progress bars
    • Media object
    • and more...
  • Icomoon Font Icons
  • LESS

Why use the JUI?

  • Standardized responsive markup
  • Used throughout all of Joomla 3 (font- and back-end)
  • Consistent user experience
  • Helps developers (like me) without a sense of design
  • Maximize extension compatibility, fewer JS/CSS conflicts
  • Decrease development time

Paradigm shift

New Workflow: CSS -> HTML -> PHP

Source: Twitter: Kyle Ledbetter

Basic fluid grid HTML

<div class="row-fluid">
	<div class="span4">...</div>
	<div class="span8">...</div>
Source: Bootstrap Documentation: Fluid grid system

Basic navbar

<div class="navbar">
  <div class="navbar-inner">
	<a class="brand" href="#">Title</a>
	<ul class="nav">
	  <li class="active"><a href="#">Home</a></li>
	  <li><a href="#">Link</a></li>
	  <li><a href="#">Link</a></li>
Source: Bootstrap Documentation: Navbar

Loading the JUI

  • The easy way
  • The LESS easy way

The One-liner


Load core Bootstrap CSS and Bootstrap bug fixes from /media/jui/css/ (bootstrap.min.css, bootstrap-responsive.min.css, bootstrap-extended.css)

Using Less

CSS Pre-processor to compile multiple style sheets into one.

(Go see Andrea's talk)

Today's Example

  1. Build a basic template
  2. Import the JUI
  3. Extend/customize the JUI

Let's Code!

Next Steps

Thank you!

Matt Thomas