Getting started
Overview

Limitless template includes 5 layouts - 1 main and 4 child (3 with vertical navigation and 2 with horizontal navigation). All layouts are placed inside 5 different folders with related name. First layout is a main one - it includes a complete set of pages, all possible variations and examples. All other layouts include only layout specific pages, components are not included and can be cherry picked from the main one since components are the same in all layouts.

Screenshot

Dependencies

Limitless template has 2 dependencies: jQuery and Bootstrap libraries, all functinoality are based on these 2 libraries. Current jQuery library version used in the template - 3.*, Bootstrap version - 4.*. Since Limitless is based on flexbox, minimum supported IE version is 10. Main dependency paths are:

<!-- jQuery library -->
<script type="text/javascript" src="../../../../global_assets/js/main/jquery.min.js"></script>

<!-- Bootstrap library -->
<script type="text/javascript" src="../../../../global_assets/js/main/bootstrap.bundle.min.js"></script>
Please keep in mind, that jQuery must be loaded before Bootstrap as BS is a jQuery dependent library.
Files structure
Each layout includes a bunch of different files responsible for core and optional functionality. All files related to components and content are the same in all layouts: SCSS files, plugins, extensions, libraries, charts, CSS files, files with demo data etc. Only layout parts are different in all layouts: sidebars, navbars, page header and breadcrumbs. To keep it simple, i've decided to change them, because in different layouts default look of breadcrumbs and page headers, as well as sidebars and navbar positions are different and you won't need to overload markup with additional classes. See the table below for more information about files included to the package:
What Quantity Description
Core files
HTML files 328 In main layout. Additional layouts have from 60 to 90 files
CSS files 7 5 main CSS files, 1 CSS for icon fonts and 1 optional animate.min.css animation library
SCSS files 377 All SCSS files, including Bootstrap core
JS files 744 All JS files, excluding starter kit and CKEditor folders
Other files
JSON files 30 Different demo data sources. For demo purposes
CSV files 11 Mainly for charts based on D3.js library. For demo purposes
TSV files 13 Mainly for charts based on D3.js library. For demo purposes
SWF files 3 Additional files for datatables extension and Plupload file uploader
Folders structure
Root folders

By default, Limitless includes HTML, SCSS, compiled CSS, SWF, JS, JSON/TSV/CSV, fonts and image files. All these files are properly commented and placed inside separate folders, so if you know what you are looking for, it won't take too much time to find it. Template package root includes 6 main folders. Each folder includes related folders and files, that correspond to their purpose. Main folders are:

Folder name Description
global_assets/ all template assets: SCSS/JS files, common CSS files, fonts, images, demo data files etc.
layout_1/ main layout, includes all components and layout options
layout_*/ optional layouts, includes layout specific pages only
LTR/ template in left-to-right direction
RTL/ template in right-to-left direction
default/ default CSS theme. If changed, make sure gulpfile and _config.scss are aligned
material/ material CSS theme. If changed, make sure gulpfile and _config.scss are aligned
full/ includes HTML files with a complete set of examples, mainly for demo purposes
seed/ starter kit for developers
assets/ layout specific assets - CSS and JS files

Screenshot

Global assets folder

Assets folder contains 7 sub folders, each folder includes a bunch of subfolders with related files. /demo_data and /locales are used for demo purposes only, they contain JSON/TSV/CSV files with demo data for multi level tree, maps, typeahead, file uploaders, wizard, charts and internationalization. Main asset subfolders are:

Folder name Description
/css folder with icon fonts and other common CSS files that can be used in all layouts
/demo_data all JSON/TSV/CSV files with remote data used in data tables, charts, dynamic trees etc.
/images folder with images, doesn't include any demo images from live preview as it's not allowed
/js all core libraries, extensions, plugins and separate page files are placed inside this folder
/locales demo files with translations of main navigation, used in live preview for demo purposes only
/scss all SCSS files, divided by category and purpose
/swf a couple of swf files used in datatables extension and Plupload library

Screenshot

CSS folder

Global assets folder contains CSS files that are shared across layouts - font files and styles, 3rd party extensions etc. Each layout also contains assets folder with layout specific CSS files. icons/ folder includes 3 icon sets, each set is inside separate folder. extras/ folder includes extra css files, such as animate.css library. Main structure:

Folder name Description
/extras all existing and upcoming extra css files, such as animations and those that haven't been included to SCSS
/icons 3 icon font sets: default Icomoon icon font, Font Awesome and Summernote and Material. Icomoon is a main set used in all template layouts; Summernote is required for Summernote text editor; Font Awesome is completely optional

Screenshot

Demo data folder

Demo data folder includes all file types with remote data sets: JSON/TSV/CSV file types used in charts, maps, dynamic multi level tree, data tables, tag inputs, typeahead extension, multiple file uploader, form wizard. All these files are for demonstration purposes only. Children folders structure:

Folder name Description
/alpaca Remote file with demo data set used by Alpaca form generator
/d3 Majority of charts that are based on d3.js library use remote data sources. All of them are placed here
/dashboard Dashboard charts - areas, heatmap, streamgraph, bullet charts. Also built with D3.js library
/fancytree Dynamic multi level tree. Single JSON file contains multiple levels of data, used to build a file tree without markup
/jquery_ui Some random data for jQuery UI Autocomplete component
/maps Demo data for vector maps
/tables Data table demo data sources: simple JSON data source, nested object data and source with 2500 entries for scroller extension
/tags_input JSON data source used in tags input plugin to fetch city names
/typeahead Remote data sources for typeahead extension
/uploader Empty JSON file required for Plupload uploader queue
/wizard HTML files used as wizard steps in Stepy wizard

Screenshot

Images folder

Images folder mostly needed for live preview to store brands and other demo images. But in the template package it doesn't have any of those, but only a set of flags for language switcher, colored icons for pnotify desktop notifications, custom map marker, jQuery UI datepicker trigger, logos, signature for invoice and background image for boxed layouts. Other images are moved according to Envato Market rules.

Folder name Description
/backgrounds Background images on boxed layout in 1st and 2nd layouts only
/flags Set of 16x16 flag icons set, includes 247 icon objects. Remove unnecessary if needed
/pnotify 5 images for demo purposes, used in PNotify library for desktop notifications
/ui Other images. Currently contains 2 - custom marker for google maps and jQuery UI Datepicker component trigger image

Screenshot

JS folder

JS folder includes all files responsible for template functionality - jQuery plugins, extensions, separate pages codes, core template functionality and libraries. Charts and maps folders are located in /demo_pages/ folder, because they are mostly used for demo purposes - demo charts, google and vector maps setup and can be easily removed. Layout assets folder doesn't include any shared JS files, but includes layout specific files only - app.js file which is used in all template pages and contains basic template functionality.

Folder name Description
/demo_pages Almost all pages have different additional JS files loaded on top of app.js, with specific settings according to the page functionality. Also includes demo charts setup for C3.js, D3.js, Dimple, ECharts and Google Charts libraries
/main Core template files - libraries and main dependencies
/plugins All jQuery plugins and extensions in separate folders

Screenshot

SCSS folder

SCSS folder includes all files responsible for template styling - core, layout, components, plugins, page kits etc. All files are properly structured and commented. Includes all themes, layouts, shared files used in all layouts, specific overrides of Bootstrap styles and everything else. The main file that needs to be edited first - _config.scss. This file contains core styling configuration.

Folder name Description
/_bootstrap All native Bootstrap LESS files, without changes
/layouts Layout specific set of files: variables, layout and main files for compilation
/layouts/layout_*/[theme] Each layout and theme has its own set of files, for easy customization
/layouts/layout_*/[theme]/compile This folder contains main files that need to be compiled. Gulp file picks up all SCSS files within this folder and generates CSS files. Keep in mind that the more SCSS you have in this folder, the more CSS files you get.
/layouts/layout_*/[theme]/layout Includes core layout styling: sidebar, page header, layout and boxed layout.
/layouts/layout_*/[theme]/variables Set of variables: _variables-core.scss includes overrides of default Bootstrap variables, _variables-custom.scss includes all other variables related to components and layouts.
/shared Set of SCSS files that don't have any layout specific changes and can be used in all layouts and themes: charts, maps, page loader, helpers, utilities, page kits etc.
/themes Each theme has different set of SCSS files related to components and Bootstrap overrides. This folder also includes colors that can be adjusted separately. If you need to adjust something or update existing styles, try variables first.
/themes/[theme]/bootstrap_limitless Set of Bootstrap overrides. I'd strongly suggest not to edit any of these files since if something is missing, fallback is default Bootstrap styles. Unless you are 100% sure.
/themes/[theme]/colors Includes main color palette (color variables) and color helper classes configuration
/themes/[theme]/components All components, properly structured and commented. Feel free to edit, no exceptions or special notes here.

Screenshot

Locales folder

Locales folder contains 3 .json files with translations of main navigation. These files are added for demonstration purposes, so you'll be able to take them as a base. They can be combined into 1 main file with all languages inside, but i decided to divide them to make it more understandable. Please check Internationalization pages console to see how they load on the page.

Screenshot

SWF folder

Yes, unfortunately we have these files as well. SWF folder contains a couple of .swf files used in datatables library and extensions. These files allow you save table data as CSV, XLS or PDF files. Please check datatable_extension_buttons_flash.html file to see it in action.

Folder name Description
/datatables Datatables library TableTools extension

Screenshot

Main HTML files
Total number of main HTML files in all layouts - 986. First layout contains 249 files, second layout - 249 files, third layout - 244 files and fourth layout - 244 files. In some layouts a couple of pages were renamed to match the navigation category. Each file has a prefix according to the navigation category, so you can quickly find what you need. Each HTML page has its own JS file with, in most cases, the same name. These files are located in assets/js/pages/ folder. So if you need a specific functionality that you found on some page, just go this folder and open necessary file. Each file is properly commented and structured. File list:
File name Description
Main category
index.html Template's main page
colors_*.html Set of pages with colored components and usage examples
changelog.html Version history
Layouts
layout_fixed_navbar.html Layout with fixed navbar
layout_fixed_sidebar_custom.html Fixed navbar and sidebar with custom scrollbar
layout_fixed_sidebar_native.html Fixed navbar and sidebar with native scrollbar
layout_fixed_hideable_navbar.html Layout with navbar that hides on scroll
layout_fixed_footer.html Layout with fixed footer
layout_boxed_default.html Boxed layout with expanded main sidebar
layout_boxed_mini.html Boxed layout with collapsed main sidebar
layout_boxed_full.html Boxed layout without sidebar
layout_boxed_content.html Layout with boxed content area
Forms
form_inputs.html Basic form inputs
form_checkboxes_radios.html Checkboxes, radios and switchers
form_select2.html Select2 - single and multiple select component
form_multiselect.html Single and multiple Bootstrap selects
form_input_groups.html Input groups with options
form_controls_extended.html Extended form controls
form_floating_labels.html Floating labels
form_tag_inputs.html Tag inputs components
form_dual_listboxes.html Dual select boxes component
form_validation.html Form elements validation
form_wizard.html Steps wizard component with options
form_actions.html Form actions with various display options
form_inputs_grid.html Optional grid of input fields
form_layout_horizontal.html Horizontal form layout
form_layout_vertical.html Vertical form layout
alpaca_basic.html Basic Alpaca examples
alpaca_advanced.html More complex Alpaca examples
alpaca_controls.html Control types
Editors
editor_ckeditor.html CKEditor text editor with options
editor_code.html Ace code editor with language options
editor_summernote.html Summernote text editor
editor_trumbowyg.html Trumbowyg editor
Pickers
picker_color.html Spectrum color picker with options
picker_date.html jQuery UI, daterange, pick-a-date, anytime date and time pickers
picker_location.html Location picker, with Google maps
Components
components_alerts.html Alert component with options and styling
components_collapsible.html Collapsible and accordion components
components_breadcrumbs.html Breadcrumb component with placement, elements and styling options
components_buttons.html Available button styles
components_dropdowns.html Dropdown menu component with options
components_badges.html Badges and badge pills styling
components_progress.html Progress bars, area and page loaders
components_media.html Media lists component with styling options
components_modals.html Modal dialogs with options and styling
components_navs.html Accordions, collapsible components and other navigation options
components_pagination.html Pagination and pager with options
components_pills.html Pills nav component with styling and other options
components_popups.html Tooltips, popovers with options
components_tabs.html Nav tabs component with different options
components_scrollspy.html Scrollspy component with sticky sidebar
Content styling
page_header.html Page header styling, components and other options
content_cards.html Cards component - basic styling
content_cards_content.html Cards component - supported content
content_cards_layout.html Cards component - layouts
content_cards_header.html Card header elements
content_cards_footer.html Card footer elements
content_cards_draggable.html Draggable and sortable cards
content_text_styling.html Available text styling
content_typography.html.html Template's typography - lists, headings, blockquotes etc.
content_helpers.html Content utility classes
content_helpers_flex.html Flexbox utility classes
content_syntax_highlighter.html Syntax highlighter extension with options
content_grid.html Responsive grid system
Extra components
extra_pnotify.html PNotify notification library
extra_jgrowl_noty.html jGrowl and Noty notification libraries
extra_sweetalert.html SweetAlert notification library
extra_sliders_noui.html NoUI sliders
extra_sliders_ion.html ION range sliders
extra_trees.html Dynamic multi level trees with available options
extra_context_menu.html Custom context menu with options
extra_fab.html Floating action buttons
extra_idle_timeout.html Idle timeout extension demo
extra_session_timeout.html Session timeout extension demo
Animations
animations_css3.html CSS3 animations based on animate.min.css library
animations_velocity_basic.html Velocity.js animations - basic examples
animations_velocity_ui.html Velocity.js animations - UI pack effects
animations_velocity_examples.html Velocity.js animations - more advanced examples
Icons
icons_fontawesome.html Font Awesome icon set demo
icons_material.html Material Design icon set demo
icons_icomoon.html Custom Icomoon icon set demo. Main icon set used in Limitless
Sidebars
sidebar_components.html Available components to use in sidebar
sidebar_default_collapse.html Default sidebar collapsible
sidebar_default_hide.html Default sidebar hideable
sidebar_default_hidden.html Hidden by default
sidebar_mini_collapse.html Mini sidebar collapsible
sidebar_mini_hide.html Mini sidebar hideable
sidebar_mini_hidden.html Hidden by default
sidebar_default_color_light.html Light color option
sidebar_default_color_custom.html Custom colors
sidebar_secondary_after.html Secondary sidebar, after main
sidebar_secondary_before.html Secondary sidebar, before main
sidebar_secondary_hidden.html Secondary sidebar, hidden by default
sidebar_secondary_color_dark.html Light color option
sidebar_secondary_color_custom.html Custom colors
sidebar_right_default_collapse.html Right sidebar: collapse main
sidebar_right_default_hide.html Right sidebar: hide main
sidebar_right_default_toggle.html Right sidebar: fix default width
sidebar_right_mini_toggle.html Right sidebar: fix mini width
sidebar_right_secondary_hide.html Right sidebar: hide secondary
sidebar_right_visible.html Right sidebar: visible by default
sidebar_right_color_dark.html Light color option
sidebar_right_color_custom.html Custom colors
sidebar_content_left.html Content sidebar: left alignment
sidebar_content_left_stretch.html Content sidebar: left stretched
sidebar_content_left_hidden.html Content sidebar: left hidden
sidebar_content_right.html Content sidebar: right alignment
sidebar_content_right_stretch.html Content sidebar: right stretched
sidebar_content_right_hidden.html Content sidebar: right hidden
sidebar_content_sections.html Content sidebar: sections
sidebar_content_color_dark.html Light color option
sidebar_content_color_custom.html Custom colors
sidebar_content_color_sections_custom.html Custom section colors
Navbars
navbar_colors.html Available navbar color options
navbar_components.html Set of components that can be used inside navbar
navbar_hideable.html Hide navbar on scroll
navbar_sizes.html Availabel navbar sizing options
navbar_single_top_static.html Single navbar - top static
navbar_single_top_fixed.html Single navbar - top fixed
navbar_single_bottom_static.html Single navbar - bottom static
navbar_single_bottom_fixed.html Single navbar - bottom fixed
navbar_single_header_before.html Single navbar - before page header
navbar_single_header_after.html Single navbar - after page header
navbar_single_content_after.html Single navbar - after page content
navbar_multiple_top_static.html Multiple navbars - top static
navbar_multiple_top_fixed.html Multiple navbars - top fixed
navbar_multiple_bottom_static.html Multiple navbars - bottom static
navbar_multiple_bottom_fixed.html Multiple navbars - bottom fixed
navbar_multiple_top_bottom.html Multiple navbars - top and bottom positions
navbar_multiple_secondary_sticky.html Multiple navbars - stick secondary navbar on scroll
navbar_component_single.html Single content navbar
navbar_component_multiple.html Multiple content navbars
Vertical navigation
navigation_vertical_collapsible.html Sidebar navigation with collapsible functionality
navigation_vertical_accordion.html Sidebar navigation with accordion functionality
navigation_vertical_bordered.html Bordered navigation style
navigation_vertical_right_icons.html Navigation with right aligned icons
navigation_vertical_badges.html Vertical navigation with badges
navigation_vertical_disabled.html Vertical navigation with disabled links
Horizontal navigation
navigation_horizontal_click.html Open horizontal navigation levels on click
navigation_horizontal_hover.html Open horizontal navigation levels on hover
navigation_horizontal_elements.html Horizontal navigation with components
navigation_horizontal_tabs.html Tabbed horizontal navigation
navigation_horizontal_disabled.html Horizontal navigation with disabled links
navigation_horizontal_mega.html Horizontal navigation with mega menu
Data visualization
c3_advanced.html Advanced C3 charts examples
c3_axis.html C3 library - chart axis options
c3_bars_pies.html C3 library - bars and pies examples
c3_grid.html C3 library - chart grid options
c3_lines_areas.html C3 library - line and area charts examples
d3_bars_advanced.html D3 library - advanced bar charts examples
d3_bars_basic.html D3 library - basic bar charts examples
d3_circle_diagrams.html D3 library - circle diagrams examples: chords, Venn diagram, sunburst
d3_lines_advanced.html D3 library - advanced line chart examples
d3_lines_basic.html D3 library - basic line chart examples
d3_other.html D3 library - other examples: streamgraph, waterfall, bubble charts, zoomable treemap
d3_pies.html D3 library - pie and donut charts examples
d3_tree.html D3 library - tree layouts: clusters, dendrograms, collapsible trees etc.
echarts_lines.html ECharts library - line chart examples with options
echarts_bars_areas.html ECharts library - area chart examples with options
echarts_columns_waterfalls.html ECharts library - vertical bar and waterfall charts examples
echarts_bars_tornados.html ECharts library - bar and tornado charts examples
echarts_scatter.html ECharts library - scatter chart example with options
echarts_pies_donuts.html ECharts library - pie and donut charts examples
echarts_funnels_calendars.html ECharts library - funnel and calendar examples
echarts_candlesticks_others.html ECharts library - candlestick and other charts examples
google_bars.html Google charts - bar chart examples
google_lines.html Google charts - line chart examples
google_other.html Google charts - other chart examples: geo, trendlines, candlesticks, diff charts
google_pies.html Google charts - pie and donut charts examples
google_scatter_bubble.html Google charts - bubble chart examples
Maps
maps_google_basic.html Google Maps - basic setup and examples
maps_google_controls.html Google Maps - map controls
maps_google_drawings.html Google Maps - map drawings
maps_google_layers.html Google Maps - available map layers
maps_google_markers.html Google Maps - map marker options
maps_vector.html Vector maps examples
Extensions
extension_blockui.html BlockUI extension with options and styling
extension_image_cropper.html Image cropper with a bunch of avaiable options
extension_dnd.html Dragula extension for sorting stuff
fullcalendar_advanced.html Fullcalendar - advanced examples: RTL support and external events
fullcalendar_formats.html Fullcalendar - date and time format examples
fullcalendar_styling.html Fullcalendar - styling options
fullcalendar_views.html Fullcalendar - available views
jqueryui_interactions.html jQuery UI - interactions
jqueryui_forms.html jQuery UI - form components
jqueryui_components.html jQuery UI - content components
jqueryui_sliders.html jQuery UI - vertical and horizontal sliders
jqueryui_navigation.html jQuery UI - navigation components
File uploaders
uploader_bootstrap.html Single and multiple file uploader for Bootstrap
uploader_dropzone.html Dropzone - single and multiple file uploader
uploader_plupload.html Plupload - multiple file uploader with multiple runtimes
Internationalization
internationalization_callbacks.html i18next - callback examples
internationalization_fallback.html i18next - set fallback language
internationalization_switch_direct.html i18next - change language without page reload
internationalization_switch_query.html i18next - change language with page reload using query string
Basic tables
table_basic.html Static tables - basic examples and basic styling
table_borders.html Static tables - table borders options
table_elements.html Static tables - set of component to use inside tables
table_responsive.html Static tables - responsive static tables
table_sizing.html Static tables - optional table cell sizing
table_styling.html Static tables - available styling options
Data tables
datatable_advanced.html Data tables - advanced examples
datatable_api.html Data tables - API usage
datatable_basic.html Data tables - examples with basic options
datatable_data_sources.html Data tables - different data sources
datatable_responsive.html Data tables - responsive tables
datatable_sorting.html Data tables - available sorting options
datatable_styling.html Data tables - available styling options
datatable_extension_reorder.html Data tables - columns reorder extension
datatable_extension_row_reorder.html Data tables - row reorder extension
datatable_extension_fixed_columns.html Data tables - fixed columns extension
datatable_extension_fixed_header.html Data tables - fixed header extension
datatable_extension_autofill.html Data tables - autofill extension
datatable_extension_key_table.html Data tables - key table extension
datatable_extension_scroller.html Data tables - scroller extension
datatable_extension_select.html Data tables - select extension
datatable_extension_buttons_*.html Data tables - buttons extension with multiple examples
datatable_extension_colvis.html Data tables - columns visibility extension
Page kits
general_feed.html Feed styling
general_embeds.html Responsive embeds
general_faq.html Frequently asked questions template
general_knowledgebase.html Knowledgebase template
blog_classic_v.html Blog - classic vertical layout
blog_classic_h.html Blog - classic horizontal layout
blog_grid.html Blog - grid view
blog_single.html Blog - single page
blog_sidebar_left.html Blog - left sidebar alignment
blog_sidebar_right.html Blog - right sidebar alignment
timelines_left.html Timelines - left alignment
timelines_right.html Timelines - right alignment
timelines_center.html Timelines - centered layout
gallery_grid.html Gallery - media grid
gallery_titles.html Gallery - media with titles
gallery_description.html Gallery - media with descriptions
gallery_library.html Gallery - media library
service_sitemap.html Sitemap template
invoice_template.html Invoice - template options
invoice_grid.html Invoice - grid view
invoice_archive.html Invoice - archive view
login_simple.html Simple login form
login_advanced.html Advanced login form
login_registration.html Simple registration form
login_registration_advanced.html Advanced registration form
login_unlock.html Unlock user form
login_password_recover.html Password recovery form
login_hide_navbar.html Page without navbar
login_transparent.html Form with transparent background
login_background.html Form with custom background
login_validation.html Login and registration form validation
login_tabbed.html Tabbed form
login_modals.html Login and registraion forms inside modal
error_403.html 403 error page
error_404.html 404 error page
error_405.html 405 error page
error_500.html 500 error page
error_503.html 503 error page
error_offline.html Offline page
user_pages_cards.html User pages - user cards
user_pages_list.html User pages - user list
user_pages_profile_cover.html User pages - user profile with cover image
user_pages_profile.html User pages - simple user profile with tabbed nav
user_pages_profile_cover.html User pages - tabbed user profile
task_manager_detailed.html Task manager - detailed view
task_manager_grid.html Task manager - grid view
task_manager_list.html Task manager - table list view
mail_list.html Inbox - mail list
mail_list_detached.html Inbox - detached mail list
mail_read.html Inbox - read layout
mail_write.html Inbox - write layout
chat_layouts.html Chat layouts
chat_options.html Chat options
search_basic.html Search - basic search results
search_images.html Search - image search results
search_users.html Search - people search results
search_videos.html Search - video search results
job_list_cards.html Job search - grid view
job_list_list.html Job search - list view
job_detailed.html Job search - detailed job layout
job_apply.html Job search - apply template layout
learning_list.html Learning - list view
learning_grid.html Learning - grid view
learning_detailed.html Learning - detailed learning layout
ecommerce_product_list.html ECommerce - product list view
ecommerce_product_grid.html ECommerce - product grid view
ecommerce_orders_history.html ECommerce - orders history layout
ecommerce_customers.html ECommerce - customers list
ecommerce_pricing.html ECommerce - pricing tables
widgets_content.html Set of content widgets
widgets_stats.html Set of statistics widgets