Joomlatools UI

Joomlatools UI is a user interface development kit for the Joomla administrator. It follows a number of timeless design principles and is built using modern tools and methodologies.

The entire Joomlatools UI layout is based on a 4 pixel grid. This ensures that the UI looks crisp on all screens. Even screens with a 1.5 device pixel ratio.

All the administrator interfaces of our extensions are designed using Joomlatools UI. It forms the foundation of our elegant, efficient, intuitive, and delightful Joomla extensions.

Our goal is to make it easier for developers to create user-centered custom extensions.

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.

Single-page (app)

You also have the option to use the single-page layout. Either by using tabs or AJAX, both techniques are built-in.

  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.
  8. Form, form area, change on tab select or use AJAX.
Building blocks of the single-page layout.

Building blocks of the single-page layout.

Get started

Joomlatools UI comes pre-installed with our framework:

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

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

Documentation

You will recognize some atomic design methodology principles in our documentation:

  • Atoms, basic building blocks of matter.
  • Molecules, groups of atoms bonded together to form the backbone of our designs.
  • Layouts, groups of organisms stitched together to form pages.
  • Examples, one example tells you more than a few thousand lines of code.
  • Utilities, classes to reduce the frequency of highly repetitive declarations.

Contributing

The code is available on GitHub.

If you want to contribute to the project, feel free to fork, create a feature branch against the master branch and send us a pull request!

Need Help?

Let our developers personally assist you. You can ask development related questions in our Support Center. Only for Business or Agency subscribers.