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?

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.

Concept

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.

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.

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.

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.

Up next

How we improved our support flow using Help Scout

We have improved our internal support flow using Help scout API

Read more →

Joomlatools Vagrant 1.5 is here!

We have released version 1.5 of our Joomlatools Vagrant box for developers.

Read more →

DJ-Classifieds LOGman integration

DJ-Classifieds with LOGman lets you record the changes in DJ-Classifieds

Read more →