Limitless

Overview

This page explains the migration process from version 3.0 to version 4.0. The biggest challenge here is Bootstrap v.5, since the library has been completely re-written from ground up with the goal to get rid of jQuery dependency and drop IE support. Besides that styling logic differs significantly and uses a new customization logic: main focus is SASS-to-CSS variables that was introduced in v.5. This led to changes in Limitless core to ensure consistency. Key highlights:

Wide use of CSS variables
Vanilla JS
Advanced theming support and customization possibilities
SASS build process is now optional
etc

Limitless layout and core also have some changes in the markup structure, styling is also based on CSS variables. Upgrade can take some time considering the number of changes, the process would normally look like this:

Replace CSS files, take the new one either from full version or from seed
Replace bootstrap.bundle.min.js file
Remove reference to jQuery if you don't use 3rd-party component that require it as dependency
Load "Inter" font family, default path is "assets/fonts/inter/inter.css"
Remove reference to Icomoon icon set if you want to replace it with Phosphor icons
If yes, load "assets/icons/phosphor/styles.min.css" file and use .ph-* icon prefix instead of .icon-*. Refer to https://phosphoricons.com/.
Update markup in your code, mainly relevant for Bootstrap components. Markup in all 3rd-party hasn't changed
Make updates in files listed below
If you need to customize CSS, do it either in SCSS files or create a new CSS file and override default CSS variables on :root or component level
If you customized previous version of Limitless, it's strongly recommended to update SCSS variables instead of CSS variables, compare old values to new values and make necessary corrections
Gulp SCSS compilation process hasn't changed much, the only difference is LibSass compiler (deprecated) that has been replaced with DartSass
You are done.

Bootstrap

Bootstrap website has a very extensive migration guide that explains all key differences between v4 and v5 up to the most recent one, including SASS, CSS, JS and other changes. Please refer to their guide for more information.

Layout

Page layout remained almost the same in all layouts: page header, content containers and overall logic. The only difference would be breadcrumb line and page header components. Find comparison below.

Page header

1. If page header has elements that collapse on mobile, toggler now uses regular button styles

													
														<!-- Old markup -->
														<a href="#" class="header-elements-toggle text-body d-lg-none">
															<i class="icon-more"></i>
														</a>

														<!-- New markup -->
														<a href="#page_header" class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto" data-bs-toggle="collapse">
															<i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
														</a>

2. .header-elements-[breakpoint]-inline in page header content container replaced with .d-[breakpoint]-flex utility class

													
														<!-- Old markup -->
														<div class="page-header-content header-elements-lg-inline">

														<!-- New markup -->
														<div class="page-header-content d-lg-flex">

3. .header-elements container is replaced with Bootstrap Collapse

													
														<!-- Old markup -->
														<div class="header-elements d-none">

														<!-- New markup -->
														<div class="collapse d-lg-block my-lg-auto ms-lg-auto" id="page_header">

4. Bottom border is removed from page header container, use .border-bottom or .shadow (default) utility classes

													
														<!-- Old markup -->
														<div class="page-header page-header-light">

														<!-- New markup -->
														<div class="page-header page-header-light shadow">
														// or
														<div class="page-header page-header-light border-bottom">

5. Image backgrounds are not supported anymore

6. If page header has multiple direct child containers, use .page-header-content is required in all of them. They control internal padding

7. Breadcrumb line inside header also requres .page-header-content class

Breadcrumb line

1. Custom .breadcrumb-line container classes are removed, now they inherit all styles from page header

													
														<!-- Old markup -->
														<div class="breadcrumb-line breadcrumb-line-light header-elements-lg-inline">

														<!-- New markup -->
														<div class="page-header-content d-lg-flex border-top">

2. Collapsible elements on the right hand side are also using Bootstrap Collapse instead of .header-elements container

													
														<!-- Old markup -->
														<div class="header-elements d-none">

														<!-- New markup -->
														<div class="collapse d-lg-block ms-lg-auto" id="breadcrumb_elements">

3. Header elements toggler has different styling and markup

													
														<!-- Old markup -->
														<a href="#" class="header-elements-toggle text-body d-lg-none">
															<i class="icon-more"></i>
														</a>

														<!-- New markup -->
														<a href="#breadcrumb_elements" class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto" data-bs-toggle="collapse">
															<i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
														</a>

4. Links on the right hand side don't require .breadcrumb-elements-item and .breadcrumb classes anymore, any text or button class can be used

													
														<!-- Old markup -->
														<a href="#" class="breadcrumb-elements-item">
															<i class="icon-comment-discussion mr-2"></i>
															Support
														</a>

														<!-- New markup -->
														<a href="#" class="d-flex align-items-center text-body py-2">
															<i class="ph-lifebuoy me-2"></i>
															Support
														</a>

Core

Container class names and structure remained the same, including sidebar, navbar and footer locations. Some minor changes are listed below.

Assets

1. In _layout.scss import ordering is changed, header is loaded now before content

													
														//
														// Old version

														// Content
														@import "../layout/content";

														// Header
														@import "../layout/header";


														//
														// New version

														// Header
														@import "../layout/header";

														// Content
														@import "../layout/content";

2. /global_assets/ folder renamed to /assets/

3. Themes are removed from /scss/ folder, dark theme is now integrated into the main set of SCSS files

4. LTR | RTL folders are removed. HTML files are similar in both versions, CSS files are located in /ltr/ and /rtl/ folders in layout's /assets/ folder

5. /plugins/ folder in assets/js/ renamed to /vendor/

6. /utils/ folder in "scss" moved from "shared" 1 level up

7. Renamed /demo_data/ to /demo/ and re-structured files

8. Added new /fonts/ folder to assets, "Inter" font files are stored there

9. /assets/ folder now contains /icons/ folder with a new "Phosphor" icon set. Moved from "global_assets/css" to "assets/"

10. gulpfile.js and package.json moved from /template/ folder to /template/utils/gulp/

11. Variables in _variables-core.scss and _variables-custom.scss have been either re-written or editted.

Sidebars

1. Light sidebar doesn't require .sidebar-light class anymore

													
														<!-- Old markup -->
														<div class="sidebar sidebar-light sidebar-main sidebar-expand-lg">

														<!-- New markup -->
														<div class="sidebar sidebar-main sidebar-expand-lg">

2. Sidebar navigation - submenu containers don't require .nav and require .collapse for collapsed state and .collapse.show for expanded state

													
														<!-- Old markup -->
														<ul class="nav nav-group-sub">

														<!-- New markup -->
														<ul class="nav-group-sub collapse">
														// or
														<ul class="nav-group-sub collapse show">

3. "Right sidebar" is now called "End sidebar", use .sidebar-right to .sidebar-end

													
														<!-- Old markup -->
														<div class="sidebar sidebar-end sidebar-expand-lg">

														<!-- New markup -->
														<div class="sidebar sidebar-end sidebar-expand-lg">

Same is applicable to toggle buttons:

													
														<!-- Old markup -->
														<button type="button" class="... sidebar-control sidebar-right-toggle">
														<button type="button" class="... sidebar-control sidebar-mobile-right-toggle">

														<!-- New markup -->
														<button type="button" class="... sidebar-control sidebar-end-toggle">
														<button type="button" class="... sidebar-control sidebar-mobile-end-toggle">

4. Content sidebar doesn't require .sidebar-component-left and .sidebar-component-start classes

													
														<!-- Old markup -->
														<div class="sidebar sidebar-light sidebar-component sidebar-component-left sidebar-expand-lg">
														<div class="sidebar sidebar-light sidebar-component sidebar-component-right sidebar-expand-lg">

														<!-- New markup -->
														<div class="sidebar sidebar-component sidebar-expand-lg border rounded shadow-sm">

5. Content sidebar with sections doesn't require .sidebar-sections

													
														<!-- Old markup -->
														<div class="sidebar sidebar-light sidebar-component sidebar-component-left sidebar-sections sidebar-expand-lg">

														<!-- New markup -->
														<div class="sidebar sidebar-component sidebar-expand-lg bg-transparent shadow-none">

6. .sidebar-section-header doesn't include bottom border by default, use .border-bottom utility class

													
														<!-- Old markup -->
														<div class="sidebar-section-header">

														<!-- New markup -->
														<div class="sidebar-section-header border-bottom">

Navbars

1. Footer navbar requires .navbar-footer class if you use back-to-top button

													
														<!-- Old markup -->
														<div class="navbar navbar-expand-lg navbar-light border-bottom-0 border-top">

														<!-- New markup -->
														<div class="navbar navbar-sm navbar-footer border-top">

2. Top and bottom navbars don't have borders, use .border-top or .border-bottom utility classes

													
														<!-- Old markup -->
														<div class="navbar navbar-dark navbar-expand-lg navbar-static">

														<!-- New markup -->
														<div class="navbar navbar-dark navbar-expand-lg navbar-static border-bottom border-bottom-white border-opacity-10">

3. Navbars now have vertical padding by default. Edit --navbar-padding-y variable if you want to change it

Components

Markup of 3rd-party components hasn't changed, but using the files from v4.0 is strongly recommended, almost all of them have been updated to the most recent versions. All changes in Bootstrap components can be viewed and compared in Bootstrap migration guide.

All widgets that use updated Bootstrap markup have been adjusted accordingly. Refer to examples available in the template. Some custom changes are listed below:

1. Title in card header doesn't use .card-title, use .mb-0 instead

													
														<!-- Old markup -->
														<div class="card">
															<div class="card-header">
																<h5 class="card-title">Card title</h5>
															</div> 
														</div>

														<!-- New markup -->
														<div class="card">
															<div class="card-header">
																<h5 class="mb-0">Card title</h5>
															</div> 
														</div>

2. Card actions have been renamed

													
														<!-- Old markup -->
														<div class="header-elements">
															<div class="list-icons">
																<a class="list-icons-item" data-action="collapse"></a>
															</div>
															<div class="list-icons">
																<a class="list-icons-item" data-action="reload"></a>
															</div>
															<div class="list-icons">
																<a class="list-icons-item" data-action="remove"></a>
															</div>
															<div class="list-icons">
																<a class="list-icons-item" data-action="move"></a>
															</div>
															<div class="list-icons">
																<a class="list-icons-item" data-action="fullscreen"></a>
															</div>
															<div class="list-icons">
																<a href="#settings" class="list-icons-item" data-action="modal" data-toggle="modal"></a>
															</div>
														</div>

														<!-- New markup -->
														<div class="hstack gap-2 ms-auto">
															<a class="text-body" data-card-action="collapse">
																<i class="ph-caret-down"></i>
															</a>
															<a class="text-body" data-card-action="reload">
																<i class="ph-arrows-clockwise"></i>
															</a>
															<a class="text-body" data-card-action="remove">
																<i class="ph-x"></i>
															</a>
															<a class="text-body cursor-move" data-card-action="sort">
																<i class="ph-arrows-out-cardinal"></i>
															</a>
															<a class="text-body" data-card-action="fullscreen">
																<i class="ph-corners-out"></i>
															</a>
															<a href="#settings" class="text-body" data-bs-toggle="modal">
																<i class="ph-gear"></i>
															</a>
														</div>

3. Card header elements markup has changed

													
														<!-- Old markup -->
														<div class="card-header header-elements-lg-inline">

														<!-- New markup -->
														<div class="card-header d-lg-flex align-items-lg-center">

4. .list-icons styles have been removed, use hstack with text/link color classes instead

													
														<!-- Old markup -->
															<div class="list-icons">
																<a class="list-icons-item">
																	<i class="icon-user"></i>
																</a>
															</div>

														<!-- New markup -->
														<div class="hstack gap-2">
															<a href="#" class="text-body">
																<i class="ph-user"></i>
															</a>
														</div>

5. Use .navbar-nav-link-icon in navbar navigation if your link contains only an icon

													
														<!-- Old markup -->
														<a href="#" class="navbar-nav-link">
															<i class="icon-bell"></i>
														</a>

														<!-- New markup -->
														<a href="#" class="navbar-nav-link navbar-nav-link-icon rounded-pill">
															<i class="ph-bell"></i>
														</a>

6. Media list component markup replaced with flex utility classes

													
														<!-- Old markup -->
														<ul class="media-list">
															<li class="media">
																<div class="mr-3">
																	<a href="#">
																		<img src="user.jpg" class="rounded-circle" width="40" height="40" alt="">
																	</a>
																</div>

																<div class="media-body">
																	<a href="#" class="media-title d-block font-weight-semibold">Walking away fallaciously</a>
																	Wise that some and before yellow thus yikes mandrill one luxuriantly other fashionably much
																</div>
															</li>
														</ul>

														<!-- New markup -->
														<div class="d-flex mb-3">
															<a href="#" class="me-3">
																<img src="user.jpg" width="40" height="40" class="rounded-pill" alt="">
															</a>
															<div class="flex-fill">
																<a href="#" class="fw-semibold">Walking away fallaciously</a>
																Wise that some and before yellow thus yikes mandrill one luxuriantly other fashionably much
															</div>
														</div>

7. Top and Bottom tabs renamed to overline and underline

													
														<!-- Old markup -->
														<ul class="nav nav-tabs nav-tabs-top">
														<ul class="nav nav-tabs nav-tabs-bottom">

														<!-- New markup -->
														<ul class="nav nav-tabs nav-tabs-overline">
														<ul class="nav nav-tabs nav-tabs-underline">

8. Alerts with icons have new markup

													
														<!-- Old markup -->
														<div class="alert alert-primary alert-styled-left alert-dismissible">
															<button type="button" class="close" data-dismiss="alert"><span>×</span></button>
															<span class="font-weight-semibold">Morning!</span> We're glad to <a href="#" class="alert-link">see you again</a> and wish you a nice day.
														</div>

														<!-- New markup -->
														<div class="alert alert-primary alert-icon-start alert-dismissible fade show">
															<span class="alert-icon bg-primary text-white">
																<i class="ph-bell-ringing"></i>
															</span>
															<span class="fw-semibold">Morning!</span> We're glad to <a href="#" class="alert-link">see you again</a> and wish you a nice day.
															<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
														</div>

9. New button style has been added - flat icon

													
														<!-- Flat button markup -->
														<button type="button" class="btn btn-flat-primary">Flat button</button>

10. Labeled button got updated markup, .btn-labeled-left renamed to btn-labeled-start and .btn-labeled-right to .btn-labeled-end

													
														<!-- Old markup -->
														<button type="button" class="btn btn-primary btn-labeled btn-labeled-left">
															<b><i class="icon-reading"></i></b>
															Labeled
														</button>

														<!-- New markup -->
														<button type="button" class="btn btn-primary btn-labeled btn-labeled-start">
															<span class="btn-labeled-icon bg-black bg-opacity-20">
																<i class="ph-check-square-offset"></i>
															</span>
															Labeled
														</button>

11. Markup of form controls with icon has been updated; .form-group-feedback-left renamed to .form-control-feedback-start and .form-group-feedback-right to .form-control-feedback-end

													
														<!-- Old markup -->
														<div class="form-group form-group-feedback form-group-feedback-left">
															<input type="text" class="form-control" placeholder="Left icon, input default">
															<div class="form-control-feedback">
																<i class="icon-droplets"></i>
															</div>
														</div>

														<!-- New markup -->
														<div class="form-control-feedback form-control-feedback-start mb-3">
															<input type="text" class="form-control" placeholder="Left icon, input default">
															<div class="form-control-feedback-icon">
																<i class="ph-at"></i>
															</div>
														</div>

12. Removed .dropdown-content, .dropdown-content-header and .dropdown-content-body, use data-bs-auto-close="outside" and padding utility classes instead

													
														<!-- Old markup -->
														<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Menu</a>
														<div class="dropdown-menu dropdown-content">
															<div class="dropdown-content-body">
																...
															</div>
														</div> 

														<!-- New markup -->
														<a href="#" class="navbar-nav-link dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside">Menu</a>
														<div class="dropdown-menu p-3">
															...
														</div>

13. Removed all mega menu related classes: .mega-menu-full and .mega-menu-left, use .start-* and .end-* classes in dropdown container instead

													
														<!-- Old markup -->
														<li class="nav-item mega-menu-left">
															<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Left aligned</a>
															<div class="dropdown-menu dropdown-content w-xl-50">
																...
															</div>
														</li> 

														<li class="nav-item mega-menu-left">
															<a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">Left aligned</a>
															<div class="dropdown-menu dropdown-content">
																...
															</div>
														</li> 


														<!-- New markup -->
														<li class="nav-item dropdown">
															<a href="#" class="navbar-nav-link dropdown-toggle rounded" data-bs-toggle="dropdown">Left aligned</a>
															<div class="dropdown-menu wmin-xl-500">
																...
															</div>
														</li>

														<li class="nav-item">
															<a href="#" class="navbar-nav-link dropdown-toggle rounded" data-bs-toggle="dropdown">Left aligned</a>
															<div class="dropdown-menu start-0 end-0 p-0 mx-xl-3">
																...
															</div>
														</li>

14. Sliding panels in v3.0 were based on modal component, in v4.0 they are replaced with Offcanvas component that was released in Bootstrap v5.0

Migration guide