Docs - Getting started
Getting started
Overview
Limitless template includes 6 layouts - 1 main and 5 child (3 with vertical navigation and 3 with horizontal navigation). All layouts are located in 6 different folders with corresponding name. First layout is the 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 since the latter 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 the file structure as simple as possible and make code maintenance simpler, all child layouts include only layout specific pages, 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 in the package:| What | Quantity | Description |
|---|---|---|
| Core files | ||
| HTML files | 328 | In main layout. Additional layouts have from 60 to 90 files |
| CSS files | 8 | 5 main CSS files, 1 CSS for icon fonts and 1 optional animate.min.css animation library. And all.min.css that includes everything |
| 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/named and placed inside separate folders, so if you know what you are looking for, should be relatively easy 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 |
dark/ |
dark CSS theme. If changed, make sure gulpfile and _config.scss are aligned |
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 |
/panels |
Demo data for sliding content panels |
/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 |
/brands |
Some brand logos for demo preview. In vector format |
/browsers |
Browser logos in vector format |
/lang |
Basic set of country flang in .png format. And a link to download more |
/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_charts |
Includes demo charts setup for C3.js, D3.js, ECharts and Google Charts libraries |
/demo_maps |
Includes demo maps config for vector and Google maps. Make sure you have active Google billing account |
/demo_pages |
Almost all pages have different additional JS files loaded on top of app.js, with specific settings according to the page functionality |
/main |
Core template files - libraries and main dependencies |
/plugins |
All jQuery plugins and extensions in separate folders |
/polyfills |
SweetAlert files. Required to support IE11 |
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 SASS 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. And since version 3.0 gulpfile also generates 1 single concatenated and compressed file (all.min.css) that includes everything. |
/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 and color system, _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: page loaders, helpers, utilities, page kits etc. |
/themes |
Each theme has different set of SCSS files related to components and Bootstrap overrides. 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% certain. |
/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 if you wish. 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
