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 -->
<ktml:toolbar type="titlebar" title="Articles" mobile>
<!-- Toolbar is rendered by the framework -->
<ktml:toolbar type="actionbar">
<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:
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 -->
<ktml:toolbar type="actionbar">
<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 columnk-container__main, 2/3 width columnk-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-wrapperas parent.k-content, requires.k-content-wrapperas parent.k-component-wrapper, requires.k-contentas parent.k-component, requires.k-component-wrapperas parent.k-flex-wrapper, only used on single child parents that need flexbox.k-sidebar-left, requires to be first child of.k-content-wrapperand have.k-contentas sibling.k-sidebar-right, requires to be last child of.k-component-wrapperand have.k-componentas 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.