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:
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:
- Sidebar
- List
- Form
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 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-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 withxs
,sm
,md
,lg
andxl
(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