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-top-container">
  <div class="k-top-container__logo">
    <a href="#">Brand</a>
  </div>
</div>
<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-top-container">
    <div class="k-top-container__logo">
      <a href="#">Brand</a>
    </div>
  </div>
  <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>

Single-page layout

A single-page layout consists of a three column layout:

Check the list layout example.

<div class="k-top-container">
  <div class="k-top-container__logo">
    <a href="#">Brand</a>
  </div>
</div>
<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-area k-js-content-area">
      <div class="k-content-area__child">
        <div class="k-content k-js-content k-js-middlepane">
          <!-- 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 class="k-subcontent k-js-subcontent">
          <div class="k-subcontent__child k-is-active">
            <div class="k-component-wrapper">
              Component...
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Off canvas slide menus

The k-top-container__navigation container, .k-sidebar-left container, .k-sidebar-right container and .k-subcontent container are all hidden by default on small devices. We added toggle buttons to open these with matching icons.

If you however want to change the icons or content on these buttons you can add data-toggle-button-content="[your content]" to the following containers:

.k-top-container__navigation for the top navigation
.k-sidebar-left for the left sidebar
.k-sidebar-right for the right sidebar
.k-subcontent for the subcontent container

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-top-container, requires .k-ui-container as parent
.k-wrapper, required on outer div inside each view
.k-content-wrapper, requires .k-wrapper as parent
.k-content-area, requires .k-content-wrapper as parent
.k-content-area__child, requires .k-content-area as parent
.k-content, requires either .k-content-wrapper or .k-content-area__child as parent
.k-subcontent, requires .k-content-area__child as parent
.k-subcontent__child requires .k-subcontent as parent
.k-component-wrapper, requires either .k-content or .k-content-area__child 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

Bootstrap 4 grid

Bootstrap 4 did a great job at adding a flexible flexbox grid system. We've added this grid to use inside our predefined layouts. Using this grid it's possible to easily align and stack content on different screen sizes.

Shark alert: Beware of the changes we made to the grid. See below.

Based on Bootstrap 4.1.3
All classes are namespaced with k-bs- (so .k-bs-container, .k-bs-col-4 etc.)
Breakpoints are synced with our own breakpoints
There's an extra s breakpoint alongside with xs, sm, md, lg and xl (so .col-s is an option)
The .k-bs-container class is fluid by default. If you, for whatever reason, need a non-fluid container, use .k-bs-maxwidth-container
Do not use the classes between the other layout classes but rather use the Bootstrap 4 grid classes inside our predefined layout classes

Need Help?

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