Layouts overview
Limitless includes 6 different layouts: 1 main layout with all components and options, 5 child layouts with layout options only. This is done for easier maintenance and reduced bundle size. All components from the main layout are also available in all other layouts, CSS and JS configurations are included in all of them by default. Table below describes all layout types available:
| Layout | Description |
|---|---|
| Layout 1 | Base layout. By default contains sidebar and
navbar in dark colors, content area has default
<body>'s light grey background
color. Default styling of components can be
changed: sidebars and navbars include different
color and styling options; page header can be
either white, dark or transparent; breadcrumbs
can be placed on top, bottom or as a component.
This layout is based on scrollable containers,
this means the html and
body have overflow:
hidden; property that disables
default document scrollbar and enables
independent scrollbars in each layout section,
making the entire layout fixed/sticky. This
approach was chosen to support very complex
layouts. This is the default option in version
4.0, but static layout is also supported and now
requires class="layout-static"
added to html tag.
|
| Layout 2 | Similar to layout 1, but has a bit different defaults - navbar is white by default, but navbar header background color is similar to sidebar's color. Page header has different default styling and is transparent, breadcrumb are not displayed. This layout is also based on scrollable containers. Standard static layout is also supported. |
| Layout 3 | Detached layout. All sidebars appears as separate components and have side spacings. Page header is transparent by default and is full width - placed outside content are right after navbars. Breadcrumb line is moved outside page header and placed after navbar and before page header content. This layout is not based on scrollable containers, but supports the default document behaviour. |
| Layout 4 | Full width 1 column layout with horizontal navigation. By default doesn't have any sidebars, but they can be added as alternative content to the content area. Page header is transparent by default. Breadcrumb line is removed, but still can be used since functionality remains the same. This layout is not based on scrollable containers, but supports the default document behaviour. |
| Layout 5 | Similar to layout 4, but has a different design choice - big dark page header with 2 navigations, including full width multi level mega menu. Sidebars are optional, as well as breadcrumbs. Page header contains search field on the right hand side and a floating action button with sliding dropdown menu. This layout is not based on scrollable containers, but supports the default document behaviour. |
| Layout 6 | New layout that supports both vertical and horizontal navigations. By default it has centered scrollable horizontal navigation located in top navigation bar, which moves to the second line on small screens and becomes scrollable. Primary navigation levels are based on responsive tabs and grid and supports only 3 levels. Content area has fixed width and all sidebars are aligned to the left/right edges of the window. This layout is also based on scrollable containers. |
Layout 1
Overview
First layout is considered as main, all other layouts use this one as a base. It supports up to 4 columns in different combinations: sidebar + content; main sidebar + secondary sidebar + content; main sidebar + secondary sidebar + content + right sidebar; main sidebar + content + right sidebar etc. Main and secondary sidebars can be swapped. All structure variations are markup dependent, this means you need to insert layout parts to the layout and add a proper class to them, no need to add/remove/change any classes elsewhere.
Full width markup
Example below demonstrates basic full width 4 columns layout markup - top navbar, 3 sidebars and main content area:
<!-- 4 columns layout -->
<body>
<!-- Main navbar -->
<div class="navbar navbar-expand-lg navbar-dark
navbar-static">
...
</div>
<!-- /main navbar -->
<!-- Page content -->
<div class="page-content">
<!-- Main sidebar -->
<div class="sidebar sidebar-dark sidebar-main sidebar-expand-lg">
...
</div>
<!-- /main sidebar -->
<!-- Secondary sidebar -->
<div class="sidebar sidebar-light sidebar-secondary sidebar-expand-lg">
...
</div>
<!-- /secondary sidebar -->
<!-- Main content -->
<div class="content-wrapper">
<!-- Inner content -->
<div class="content-inner">
<!-- Page header -->
<div class="page-header page-header-light shadow">
...
</div>
<!-- /page header -->
<!-- Content area -->
<div class="content">
...
</div>
<!-- /content area -->
<!-- Footer -->
<div class="navbar navbar-sm navbar-footer border-top">
...
</div>
<!-- /footer -->
</div>
<!-- /inner content -->
</div>
<!-- /main content -->
<!-- Right sidebar -->
<div class="sidebar sidebar-light sidebar-end sidebar-expand-lg">
...
</div>
<!-- /right sidebar -->
</div>
<!-- /page content -->
</body>
<!-- /4 columns layout -->
Fixed width markup
Markup of the boxed (or fixed width) layout
is the same, the only difference is 2 additional class
names: .layout-boxed-bg adds background image
to the document body;
.layout-boxed.container class adds proper
spacing to content area, page header, breadcrumbs and
navbars. You can use either darker background color added to
the body element in CSS, or any background
image, it's up to you. Styles for body element
you can find in _boxed.scss file located in
assets/scss/layouts/[layout]/layout/ folder.
Boxed page markup example:
<!-- Boxed layout -->
<body class="layout-boxed-bg">
<!-- Boxed layout wrapper -->
<div class="layout-boxed container px-0">
...
</div>
<!-- / boxed layout wrapper -->
</body>
<!-- /boxed layout -->
Boxed content markup example:
<!-- Boxed content -->
<body>
...
<!-- Content area -->
<div class="content container">
...
</div>
<!-- /content area -->
...
</body>
<!-- /boxed content -->
Layout 2
Overview
Second layout uses same markup as the first one, but some components have different default styling and location: sidebar component includes additional section, which includes 2 types of logos (icon and text) and action buttons to control sidebar visibility; page header component has different default styling to avoid extra classes added to their containers.
Full width markup
Example below demonstrates basic full width 4 columns layout markup - top navbar, 3 sidebars and main content area:
<!-- 4 columns layout -->
<body>
<!-- Page content -->
<div class="page-content">
<!-- Main sidebar -->
<div class="sidebar sidebar-dark sidebar-main sidebar-expand-lg">
</div>
<!-- /main sidebar -->
<!-- Secondary sidebar -->
<div class="sidebar sidebar-light sidebar-secondary sidebar-expand-lg">
</div>
<!-- /secondary sidebar -->
<!-- Main content -->
<div class="content-wrapper">
<!-- Main navbar -->
<div class="navbar navbar-expand-lg navbar-light navbar-static">
</div>
<!-- /main navbar -->
<!-- Inner content -->
<div class="content-inner">
<!-- Page header -->
<div class="page-header">
</div>
<!-- /page header -->
<!-- Content area -->
<div class="content pt-0">
</div>
<!-- /content area -->
<!-- Footer -->
<div class="navbar navbar-sm navbar-footer border-top">
</div>
<!-- /footer -->
</div>
<!-- /inner content -->
</div>
<!-- /main content -->
<!-- Right sidebar -->
<div class="sidebar sidebar-light sidebar-end sidebar-expand-lg">
</div>
<!-- /right sidebar -->
</div>
<!-- /page content -->
</body>
<!-- /4 columns layout -->
Fixed width markup
Boxed width markup of second layout is the same as in first
layout, without additions and changes. To use fixed width,
add .layout-boxed-bg class to the
<body> tag to add optional background image
and .layout-boxed.container class along with
flexbox utility classesd that add proper spacing to content
area, page header, breadcrumbs and navbars. You can use
either darker background color added to the
body element in CSS, or any background image,
it's up to you. Styles for body element you can
find in _boxed.scss file located in
assets/scss/layouts/[layout]/layout/ folder.
Boxed page markup example:
<!-- Boxed layout -->
<body class="layout-boxed-bg">
<!-- Boxed layout wrapper -->
<div class="layout-boxed container px-0">
</div>
<!-- /boxed layout wrapper -->
</body>
<!-- /boxed layout -->
Boxed content markup example:
<!-- Boxed content -->
<body>
<!-- Content area -->
<div class="content container pt-0">
</div>
<!-- /content area -->
</body>
<!-- /boxed content -->
Layout 3
Overview
Third layout's structure is different from the first and
second variations. Here page header
component is moved outside .page-content
container and placed right after main
navbar component. All sidebars remain on
the same position, but appear as detached stand-alone
components. Also in first 2 layouts footer
markup is placed right after <div
class="content">...</div> container. In this
layout footer isn't covered or pushed by sidebar, so that
despite number of sidebars, footer always appears at the
very bottom.
Full width markup
Example below demonstrates basic full width 4 columns layout markup - top navbar, 3 sidebars and main content area:
<!-- 4 columns layout -->
<body>
<!-- Main navbar -->
<div class="navbar navbar-expand-lg navbar-dark navbar-static">
</div>
<!-- /main navbar -->
<!-- Breadcrumb line -->
<div class="page-header page-header-light shadow">
</div>
<!-- /breadcrumb line -->
<!-- Page header -->
<div class="page-header">
</div>
<!-- /page header -->
<!-- Page content -->
<div class="page-content pt-0">
<!-- Main sidebar -->
<div class="sidebar sidebar-light sidebar-main sidebar-expand-lg align-self-start">
</div>
<!-- /main sidebar -->
<!-- Secondary sidebar -->
<div class="sidebar sidebar-light sidebar-secondary sidebar-expand-lg align-self-start">
</div>
<!-- /secondary sidebar -->
<!-- Main content -->
<div class="content-wrapper">
<!-- Content area -->
<div class="content-wrapper">
</div>
<!-- /content area -->
</div>
<!-- /main content -->
<!-- Right sidebar -->
<div class="sidebar sidebar-light sidebar-end sidebar-expand-lg align-self-start">
</div>
<!-- /right sidebar -->
</div>
<!-- /page content -->
<!-- Footer -->
<div class="navbar navbar-sm navbar-footer border-top">
</div>
<!-- /footer -->
</body>
<!-- /4 columns layout -->
Fixed width markup
In 3rd layout version, boxed layout needs additional markup
changes. You need to wrap inner content of navbar, page
header and breadcrumb line in <div
class="container" /> wrapper and add
.container class to .page-content
container. In this version body doesn't include
any background images, it uses containers mentioned earlier
to center content in components, but keep components
themself full width.
Boxed layout markup example:
<!-- Fixed layout -->
<body>
<!-- Main navbar -->
<div class="navbar navbar-dark navbar-expand-lg">
<div class="container px-lg-3">
</div>
</div>
<!-- /main navbar -->
<!-- Breadcrumb line -->
<div class="page-header-light shadow">
<div class="page-header-content container d-lg-flex">
</div>
</div>
<!-- /breadcrumb line -->
<!-- Page header -->
<div class="page-header">
<div class="page-header-content container d-lg-flex">
</div>
</div>
<!-- /page header -->
<!-- Page content -->
<div class="page-content container pt-0">
</div>
<!-- /page content -->
</body>
<!-- /fixed layout -->
Layout 4
Overview
Fourth layout structure is the same as in third, the only difference is by default it doesn't have any sidebars and uses multiple navbars for navigation, so called "Horizontal navigation layout". Although by default sidebars aren't presented, the functionality remains the same - sidebars can be used in any page, but the importance is much lower, means they can be used for alternative page navigation or page content. Instead, navbar navigation supports multiple child levels.
Full width markup
Example below demonstrates basic full width - 2 top navbar and main content area:
<!-- Basic layout -->
<body>
<!-- Main navbar -->
<div class="navbar navbar-dark navbar-expand-lg navbar-static">
</div>
<!-- /main navbar -->
<!-- Navigation navbar -->
<div class="navbar navbar-sm shadow">
</div>
<!-- /navigation navbar -->
<!-- Page header -->
<div class="page-header">
</div>
<!-- /page header -->
<!-- Page content -->
<div class="page-content pt-0">
<!-- Main content -->
<div class="content-wrapper">
</div>
<!-- /main content -->
</div>
<!-- /page content -->
<!-- Footer -->
<div class="navbar navbar-sm navbar-footer border-top">
</div>
<!-- /foot
Fixed width markup
In 4th layout version, boxed layout completely replicates 3rd
layout. You need to wrap inner content of navbar, page
header and breadcrumb line in <div
class="container" /> wrapper and add
.container class to .page-content
container. In this version body doesn't include
any background images, it uses containers mentioned earlier
to center content in components, but keep components
themself full width.
Boxed layout markup example:
<!-- Boxed layout -->
<body>
<!-- Main navbar -->
<div class="navbar navbar-dark navbar-expand-lg">
<div class="container px-lg-3">
</div>
</div>
<!-- /main navbar -->
<!-- Navigation navbar -->
<div class="navbar navbar-sm shadow">
<div class="container px-lg-3">
</div>
</div>
<!-- /navigation navbar -->
<!-- Page header -->
<div class="page-header">
<div class="page-header-content container d-lg-flex">
</div>
</div>
<!-- /page header -->
<!-- Page content -->
<div class="page-content container pt-0">
</div>
<!-- /page content -->
</body>
<!-- /boxed layout -->
Layout 5
Overview
Fifth layout is similar to 4th with a few exceptions: main and secondary navbars and page header have dark background color. And floating action button is a part of layout. Markup is slightly different - 2 navbars and floating action button are placed inside page header. Although by default sidebars aren't presented, the functionality remains the same - sidebars can be used in any page, but the importance is much lower, means they can be used for alternative page navigation or page content. Instead, navbar navigation supports multiple child levels.
Full width markup
Example below demonstrates basic full width - 2 top navbar and main content area:
<!-- Basic layout -->
<body>
<!-- Main navbar -->
<div class="navbar navbar-dark navbar-expand-lg navbar-static px-lg-0">
<div class="container-fluid container-boxed justify-content-start">
</div>
</div>
<!-- /main navbar -->
<!-- Page header -->
<div class="page-header page-header-dark text-white">
<div class="page-header-content container-boxed d-lg-flex">
</div>
</div>
<!-- /page header -->
<!-- Secondary navbar -->
<div class="navbar navbar-dark px-lg-0">
<div class="container-fluid container-boxed position-relative">
<!-- Navbar content -->
<div class="flex-fill overflow-auto overflow-lg-visible scrollbar-hidden">
</div>
<!-- /navbar content -->
<!-- Floating menu -->
<div class="fab-menu fab-menu-absolute fab-menu-top fab-menu-top-end d-none d-lg-block"
data-fab-toggle="click" data-fab-state="closed">
</div>
<!-- /floating menu -->
</div>
</div>
<!-- /secondary navbar -->
<!-- Page content -->
<div class="page-content">
<!-- Main content -->
<div class="content-wrapper">
</div>
<!-- /main content -->
</div>
<!-- /page content -->
<!-- Footer -->
<div class="navbar navbar-sm navbar-footer border-top">
<div class="container-fluid container-boxed">
</div>
</div>
<!-- /footer -->
</body>
<!-- /basic layout -->
Fixed width markup
In 5th layout version, boxed layout completely replicates 3rd
and 4th layouts. You need to wrap inner content of navbar,
page header and breadcrumb line in <div
class="container" /> wrapper and add
.container class to .page-content
container. In this version body doesn't include
any background images, it uses containers mentioned earlier
to center content in components, but keep components
themself full width.
Boxed layout markup example:
<!-- Boxed layout -->
<body>
<!-- Main navbar -->
<div class="navbar navbar-dark navbar-expand-lg navbar-static">
<div class="container justify-content-start px-lg-3">
</div>
</div>
<!-- /main navbar -->
<!-- Page header -->
<div class="page-header page-header-dark text-white">
<div class="page-header-content container d-lg-flex">
</div>
</div>
<!-- /page header -->
<!-- Secondary navbar -->
<div class="navbar navbar-dark">
<div class="container position-relative px-lg-3">
<!-- Navbar content -->
<div class="flex-fill overflow-auto overflow-lg-visible scrollbar-hidden">
</div>
<!-- /navbar content -->
<!-- Floating menu -->
<div class="fab-menu fab-menu-absolute fab-menu-top fab-menu-top-end d-none d-lg-block"
data-fab-toggle="click" data-fab-state="closed">
</div>
<!-- /floating menu -->
</div>
</div>
<!-- /secondary navbar -->
<!-- Page content -->
<div class="page-content container">
<!-- Main content -->
<div class="content-wrapper">
</div>
<!-- /main content -->
</div>
<!-- /page content -->
<!-- Footer -->
<div class="navbar navbar-sm navbar-footer border-top">
<div class="container px-lg-3">
</div>
</div>
<!-- /footer -->
</body>
<!-- /boxed layout -->
Layout 6
Overview
Layout 6 is a mix of various section combinations - content area has fixed width, while other parts take all available horizontal space. Navigation is horizontal, but can be combined with vertical in multiple levels. Markup is very much similar to layout 1, but logic of main navbar is completely different. All 5 sidebars can be used on any page, along with other components. Navigation is unique to this layout and is fully responsive and very well thought out. This is by far the most flexible layout.
Full width markup
Example below demonstrates basic full width - 1 top navbar with main navigation and main content area:
<!-- 4 columns layout -->
<body>
<!-- Main navbar -->
<div class="navbar navbar-expand-xl navbar-static shadow">
</div>
<!-- /main navbar -->
<!-- Page content -->
<div class="page-content">
<!-- Main sidebar -->
<div class="sidebar sidebar-light sidebar-main sidebar-expand-lg sidebar-main-resized">
</div>
<!-- /main sidebar -->
<!-- Secondary sidebar -->
<div class="sidebar sidebar-light sidebar-secondary sidebar-expand-lg">
</div>
<!-- /secondary sidebar -->
<!-- Main content -->
<div class="content-wrapper">
<!-- Inner content -->
<div class="content-inner">
<!-- Page header -->
<div class="page-header">
</div>
<!-- /page header -->
<!-- Content area -->
<div class="content container pt-0">
</div>
<!-- /content area -->
<!-- Footer -->
<div class="navbar navbar-sm navbar-footer border-top">
</div>
<!-- /footer -->
</div>
<!-- /inner content -->
</div>
<!-- /main content -->
<!-- Right sidebar -->
<div class="sidebar sidebar-light sidebar-end sidebar-expand-lg">
</div>
<!-- /right sidebar -->
</div>
<!-- /page content -->
</body>
<!-- /4 columns layout -->
Fixed width markup
Boxed layout here is slightly different from others since content container has width width by default. But the entire layout can be boxed as well, some padding adjustments may be required though for the pixel perfect mobile layout. Here is a basic example:
Boxed layout markup example:
<!-- 4 columns layout -->
<body>
<!-- Main navbar -->
<div class="navbar navbar-expand-xl navbar-static shadow">
<div class="container px-sm-3">
</div>
</div>
<!-- /main navbar -->
<!-- Page content -->
<div class="page-content">
<!-- Main content -->
<div class="content-wrapper">
<!-- Inner content -->
<div class="content-inner">
<!-- Page header -->
<div class="page-header">
<div class="page-header-content container d-lg-flex">
</div>
</div>
<!-- /page header -->
<!-- Content area -->
<div class="content container pt-0">
</div>
<!-- /content area -->
<!-- Footer -->
<div class="navbar navbar-sm navbar-footer border-top">
<div class="container px-sm-3">
</div>
</div>