Layouts overview
Limitless template uses table CSS layout. This means no extra margins, paddings and hidden overflows. This layout type was chosen not without a reason: it's very flexible in terms of markup and structure - you can easily add as many columns as you need using proper classes. All sidebars and content area use display: table-cell; CSS properties, all sidebars have fixed 260px width, main sidebar can be collapsed or completely hid. Depending on layout type, markup slightly differs.

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 or transparent; breadcrumbs can be placed on top, bottom or as a component.
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 appears as a component by default and placed after page header content.
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.
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 and breadcrumb component appears as a part of page title. Breadcrumb line is removed, but still can be used since functionality remains the same.
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 + opposite sidebar; main sidebar + content + opposite 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 poper 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:

<!-- Liquid layout -->
<body>

	<!-- Main navbar -->
	<div class="navbar navbar-inverse">
		...
	</div>
	<!-- /main navbar -->


	<!-- Page container -->
	<div class="page-container">

		<!-- Page content -->
		<div class="page-content">

			<!-- Main sidebar -->
			<div class="sidebar sidebar-main">
				...
			</div>
			<!-- /main sidebar -->


			<!-- Secondary sidebar -->
			<div class="sidebar sidebar-secondary">
				...
			</div>
			<!-- /secondary sidebar -->


			<!-- Main content -->
			<div class="content-wrapper">

				<!-- Page header -->
				<div class="page-header">
					...
				</div>
				<!-- /page header -->


				<!-- Content area -->
				<div class="content">
					...
				</div>
				<!-- /content area -->

			</div>
			<!-- /main content -->


			<!-- Opposite sidebar -->
			<div class="sidebar sidebar-opposite">
				...
			</div>
			<!-- /opposite sidebar -->

		</div>
		<!-- /page content -->

	</div>
	<!-- /page container -->

</body>
Fixed width markup

Markup of the boxed (or fixed width) layout is the same, the only difference is .layout-boxed class added to the <body> tag. This class adds optional background image to the <body> and sets fixed width for main layout areas: navbar and page container. 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.less file located in assets/less/code/layout/ folder.

Boxed layout markup example:

<!-- Fixed layout -->
<body class="layout-boxed">
	...
</body>
Layout 2
Overview

Second layout uses same markup as the first one. But some components have different default styling: navbar component includes additional .header-highlight class which adds sidebar's background color to navbar header; page header and breadcrumb components have 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:

<!-- Liquid layout -->
<body>

	<!-- Main navbar -->
	<div class="navbar navbar-inverse header-highlight">
		...
	</div>
	<!-- /main navbar -->


	<!-- Page container -->
	<div class="page-container">

		<!-- Page content -->
		<div class="page-content">

			<!-- Main sidebar -->
			<div class="sidebar sidebar-main">
				...
			</div>
			<!-- /main sidebar -->


			<!-- Secondary sidebar -->
			<div class="sidebar sidebar-secondary">
				...
			</div>
			<!-- /secondary sidebar -->


			<!-- Main content -->
			<div class="content-wrapper">

				<!-- Page header -->
				<div class="page-header">
					...
				</div>
				<!-- /page header -->


				<!-- Content area -->
				<div class="content">
					...
				</div>
				<!-- /content area -->

			</div>
			<!-- /main content -->


			<!-- Opposite sidebar -->
			<div class="sidebar sidebar-opposite">
				...
			</div>
			<!-- /opposite sidebar -->

		</div>
		<!-- /page content -->

	</div>
	<!-- /page container -->

</body>
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 class to the <body> tag. This class adds optional background image to the <body> and sets fixed width for main layout areas: navbar and page container. 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.less file located in assets/less/code/layout/ folder.

Boxed layout markup example:

<!-- Fixed layout -->
<body class="layout-boxed">
	...
</body>
Layout 3
Overview

Third layout's structure is different from the first and second variations. Here page header component is moved outside .page-container container and placed right after navbar component. All sidebars remain on the same position, but appear as detached stand-alone components. In this version sidebars don't have a detached option as they are detached by default. Also .content container is useless and has been removed, because basically it was needed to add spacing to main content area.

In first 2 layout options footer component is placed inside <div class="content">...</div> container after all content. Since 3rd layout doesn't have <div class="content" /> container, footer is moved to the parent container and placed after <div class="page-content" /> container.

Full width markup

Example below demonstrates basic full width 4 columns layout markup - top navbar, 3 sidebars and main content area:

<!-- Liquid layout -->
<body>

	<!-- Main navbar -->
	<div class="navbar navbar-inverse">
		...
	</div>
	<!-- /main navbar -->


	<!-- Page header -->
	<div class="page-header">
		...
	</div>
	<!-- /page header -->


	<!-- Page container -->
	<div class="page-container">

		<!-- Page content -->
		<div class="page-content">

			<!-- Main sidebar -->
			<div class="sidebar sidebar-main">
				...
			</div>
			<!-- /main sidebar -->


			<!-- Secondary sidebar -->
			<div class="sidebar sidebar-secondary">
				...
			</div>
			<!-- /secondary sidebar -->


			<!-- Main content -->
			<div class="content-wrapper">
				...
			</div>
			<!-- /main content -->


			<!-- Opposite sidebar -->
			<div class="sidebar sidebar-opposite">
				...
			</div>
			<!-- /opposite sidebar -->

		</div>
		<!-- /page content -->


		<!-- Footer -->
		<div class="footer">
			...
		</div>
		<!-- /footer -->

	</div>
	<!-- /page container -->

</body>
Fixed width markup

In 3rd layout version, boxed layout needs additional markup changes. Besides .layout-boxed class added to the <body> tag, you need to wrap navbar inner content in <div class="navbar-boxed" /> container and breadcrumb line inner content in <div class="breadcrumb-boxed" /> container. In this version body doesn't include any background images, but uses containers mentioned earlier to center content in components, but keep components themself full width.

Boxed layout markup example:

<!-- Fixed layout -->
<body class="layout-boxed">

	<!-- Main navbar -->
	<div class="navbar navbar-inverse">
		
		<!-- Boxed container -->
		<div class="navbar-boxed">
			...
		</div>
		<!-- /boxed container -->

	</div>
	<!-- /main navbar -->


	<!-- Page header -->
	<div class="page-header">

		<!-- Breadcrumb line -->
		<div class="breadcrumb-line breadcrumb-line-wide">

			<!-- Boxed container -->
			<div class="breadcrumb-boxed">
				...
			</div>
			<!-- /boxed container -->

		</div>
		<!-- /breadcrumb line -->

	</div>
	<!-- /page header -->

	...

</body>
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 with state saving feature.

Full width markup

Example below demonstrates basic full width - 2 top navbar and main content area:

<!-- Liquid layout -->
<body>

	<!-- Main navbar -->
	<div class="navbar navbar-inverse">
		...
	</div>
	<!-- /main navbar -->


	<!-- Navigation navbar -->
	<div class="navbar navbar-default" id="navbar-second">
		...
	</div>
	<!-- /navigation navbar -->


	<!-- Page header -->
	<div class="page-header">
		...
	</div>
	<!-- /page header -->


	<!-- Page container -->
	<div class="page-container">

		<!-- Page content -->
		<div class="page-content">

			<!-- Main content -->
			<div class="content-wrapper">
				...
			</div>
			<!-- /main content -->

		</div>
		<!-- /page content -->


		<!-- Footer -->
		<div class="footer">
			...
		</div>
		<!-- /footer -->

	</div>
	<!-- /page container -->

</body>
Fixed width markup

In 4th layout version, boxed layout completely replicates 3rd layout. Besides .layout-boxed class added to the <body> tag, you need to wrap navbar inner content in <div class="navbar-boxed" /> container and breadcrumb line inner content in <div class="breadcrumb-boxed" /> container. In this version body doesn't include any background images, but uses containers mentioned earlier to center content in components, but keep components themself full width.

Boxed layout markup example:

<!-- Fixed layout -->
<body class="layout-boxed">

	<!-- Main navbar -->
	<div class="navbar navbar-inverse">
		
		<!-- Boxed container -->
		<div class="navbar-boxed">
			...
		</div>
		<!-- /boxed container -->

	</div>
	<!-- /main navbar -->


	<!-- Navigation navbar -->
	<div class="navbar navbar-inverse">
		
		<!-- Boxed container -->
		<div class="navbar-boxed">
			...
		</div>
		<!-- /boxed container -->

	</div>
	<!-- /navigation navbar -->

	...

</body>