Announcing Joomlatools UI Preview

Today we are thrilled to announce the first public preview of Joomlatools UI, a user interface development kit for the Joomla administrator. It forms the foundation of our elegant, efficient, intuitive, and delightful Joomla extensions.

We started working on Joomlatools UI around a year ago during the development of DOCman 3. Our goal was to create a consistent user interface across all our Joomla extensions. So our developers can transfer their knowledge and skills from one extension to another.

With Joomlatools UI we set a new milestone in our goal to improve the life of any Joomla developer. Our framework already allows you to create powerful custom extensions. Now we want to make it even easier for developers to create user-centered Joomla extensions.


Why a new templating framework and not just use Bootstrap or Foundation?

Joomlatools UI is more than a templating framework, it's also a set of guidelines. Built around a number of timeless principles for human-computer interaction. You can't just copy-paste anything anywhere.

More differences:

For Joomlatools UI we got inspired by the well-thought-out macOS Human Interface Guidelines and Material Design.


Joomlatools UI is based on a consistent set of building blocks:

  1. Component navigation.
  2. Category navigation, just like the file browser on your computer.
  3. Toolbar, not on top of the sidebar because its buttons only apply to the current component view and listed items.
  4. Breadcrumbs, make navigation easier.
  5. Scope bar, narrow down the items list by filters or search.
  6. Items list, speaks for itself, no?
  7. Pagination, browse more available items.

Building blocks of the list layout.

List layout

A list layout consists of a two columns layout. The sidebar can hold the component navigation, a categories tree and a list of quick filters. The main content area consists of the toolbar, breadcrumbs, scope bar and list of items.

List layout example.

Form layout

A form layout consists of a toolbar and main content area holding the form elements. The main content area can be structured in a 2 column layout. Where the secondary column should only contain non-required form elements.

Form layout example.

Get started

Joomlatools UI comes pre-installed with Joomlatools Framework 3:

  1. add <?= helper('ui.load') ?> to your view.
  2. build your views using our predefined layouts. It's that simple!

The documentation is copy/paste ready. Just like Bootstrap or Foundation, you'll love it!

Shark alert: This is a first public preview. Things will change!

What do you think?

We love to hear your feedback on how we can help you to create even better user-centered Joomla extensions. Our Google group is the place to get in touch and interact with fellow developers. Or come say hi on Gitter.

Written by

Tom Janssens & Robin Poort

14 Nov 2016

Join 23000+ others and subscribe to our newsletter!