Layouts

Joomlatools UI consists of predefined building blocks forming the foundation for elegant, efficient, intuitive, and delightful Joomla extensions.

List layout

A list layout consists of a two columns layout:

Sidebar
Content

Check the list layout example.

<div class="k-wrapper k-js-wrapper">
  <div class="k-content-wrapper">
    <div class="k-sidebar-left k-js-sidebar-left">
      Sidebar items molecule
    </div>
    <div class="k-content k-js-content">
      <!-- Title when sidebar is invisible, rendered by the framework -->
      
      <!-- Toolbar is rendered by the framework -->
      
      <div class="k-component-wrapper">
        <form class="k-component k-js-component k-js-grid-controller k-js-grid">
          <div class="k-breadcrumb">
            Breadcrumbs molecule
          </div>
          <div class="k-scopebar k-js-scopebar">
            Scopebar molecule
          </div>
          <div class="k-table-container">
            <div class="k-table">
              Table molecule
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Form layout

A form layout consists of:

Toolbar
Form

Check the form layout example.

<div class="k-wrapper k-js-wrapper">
  <div class="k-content-wrapper">
    <div class="k-content k-js-content">
      <!-- Toolbar is rendered by the framework -->
      
      <div class="k-component-wrapper">
        <form class="k-component">
          <div class="k-container">
            <div class="k-container__full">
              <div class="k-heading">Example form</div>
            </div>
            <div class="k-container__main">
              Main panel for form molecules
            </div>
            <div class="k-container__sub">
              Right panel for form block molecules
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Grid

A form layout can have fluid grid inside a .k-container element:

k-container__full, full width column
k-container__main, 2/3 width column
k-container__sub, 1/3 width column only for non-required form elements

Layout classes

The layouts require a set of predefined CSS classes for visual and behavioral enhancements:

.k-ui-container, magically added by the framework around each view
.k-wrapper, required on outer div inside each view
.k-content-wrapper, requires .k-wrapper as parent
.k-content, requires .k-content-wrapper as parent
.k-component-wrapper, requires .k-content as parent
.k-component, requires .k-component-wrapper as parent
.k-flex-wrapper, only used on single child parents that need flexbox
.k-sidebar-left, requires to be first child of .k-content-wrapper and have .k-content as sibling
.k-sidebar-right, requires to be last child of .k-component-wrapper and have .k-component as sibling

Need Help?

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