LESS overview

All Limitless styles are based on LESS pre-processor - it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable. In total there are 203 fully commented LESS files in each template layout. Basically, the all are the same, except some files with changes according to the layout type. Among them - Bootstrap components core, overrides for them, layout and components related files. All files are properly divided into categories and placed inside nested folders:

Screenshot - less structure


To edit LESS files, use any code editor that supports .less file types. I prefer to use Sublime Text editor with additional LESS syntax highlight package, it's very flexible and works really fast. Another good one is Visual Studio Code, which has built-in terminal. To include or exclude components from your project, edit 4 main files located in assets/less/_main_full/ or assets/less/_main_seed/ folder if you use starter kit.

Screenshot - main files to edit

Main files

When a new Bootstrap version comes out, it's very important to keep upgrading process as simple as possible. That was the main reason why i've decided to go this way - all core Bootstrap files remain untouched, all necessary changes need to be done in separate file with the same name in /bootstrap-limitless/ folder. This allows us to override default bootstrap CSS file after compiling.

I strongly recommend not to make any changes in default Bootstrap LESS files, but use files from /bootstrap-limitless/ folder. This will simplify your upgrading process in the future. But, of course, feel free to update any of template files if necessary.

Screenshot - Bootstrap overrides


If you need to change a default theme, you can edit template's variables - all main colors, spacings and other styles are located there. Main template's variables are stored in 2 files: variables-core.less and variables-custom.less, located in assets/less/core/variables/ folder.

variables-core.less contains default Bootstrap variables overrides only. variables-custom.less contains all other variables used in the template. Feel free to edit both these files.

Screenshot - variables


There are tons of different applications and extensions available for LESS compiling, i prefer to use Gulp (gulpfile.js is included) in the package. It has a bunch of configuration options, works very fast and effectively.

By default, Limitless template uses 4 separate compiled CSS files - bootstrap.css, core.css, colors.css and component.css (both compressed and uncompressed versions). As you may notice, files have same names as 4 main less files located in assets/less/ folder root. Actually these 4 css files are compiled main less files. In fact, to compile CSS files, you need to use only these 4 main less files:

  • bootstrap.less - Bootstrap core
  • core.less - Bootstrap core overrides
  • components.less - all template components and plugins, except Bootstrap ones
  • colors.less - color system (optional)

The reason why they were divider into 4 files is older versions of IE don't support css files with 10k+ properties. If you don't use some of them or don't care much about IE, feel free to combine those 4 files into 2, try to keep bootstrap.css separately. Color system is completely optional, if you've setup your primary theme, you can exclude this file and re-compile your CSS.

Screenshot - colors.less file

LESS files

LESS folder includes all files responsible for template styling - core, layout, components, plugins, page kits etc. All files are properly structured according to the category: bootstrap - Bootstrap framework core styling; bootstrap-limitless - Limitless overrides of Bootstrap core styling loaded on top of original ones; components - main template components, custom pages and plugins; core - layout structure, Bootstrap variables overrides and additional custom core variables.

4 main files that load all others are in folder root - bootstrap.less, colors.less, components.less and core.less. If you need to include or exclude any files or components, edit one of these files. Below is the table with categorized LESS files used in the template:

Bootstrap core

Contains 41 main files and 30 mixins. File bootstrap.less is actually a part of Bootstrap core, but it was moved to the parent folder for easy access. If you don't want to wait until my updates and want to update Bootstrap versions manually, you need to compile bootstrap.less file separately. But i will do my best to keep it up to date. Also i don't recommend to edit any of these files as new updates will be much painful.

File name Description
Main files
alerts.less Alert components
badges.less Badges component
breadcrumbs.less Breadcrumbs component
button-groups.less Button groups
buttons.less Button stylings
carousel.less Carousel component
close.less Close button
code.less Inline and blocks of code
component-animations.less Animations
dropdowns.less Dropdown menus
forms.less Basic form components styling
glyphicons.less Glyphicons icon font
grid.less Responsive mobile-first grid
input-groups.less Input groups component
jumbotron.less Jumbotron component
labels.less Labels component
list-group.less List group nav component
media.less Media lists
mixins.less Mixins loading file
modals.less Modal dialogs
navbar.less Navbar
navs.less Tab, pill and other navs
normalize.less General reset
pager.less Pager component
pagination.less Pagination component
panels.less Content panels
popovers.less Popovers component
print.less Print styles
progress-bars.less Progress bars component
responsive-embed.less Responsive embeds
responsive-utilities.less Responsive utility classes
scaffolding.less General scaffolding
tables.less Tables styling
theme.less Optional theme file
thumbnails.less Thumbnails component
tooltip.less Tooltip component
type.less Typography, page header and contextual backgrounds
utilities.less Utilities
variables.less Main variables
wells.less Well blocks component
Bootstrap mixins
alerts.less Alerts with color options
background-variant.less Contextual backgrounds
border-radius.less Border radius: top, bottom, left, right
buttons.less Buttons with color and sizing options
center-block.less Centered blocks
clearfix.less Clear and reset floating
forms.less Form control validation
gradients.less Gradient options
grid-framework.less Responsive grid system
grid.less Grid columns, container and offsets
hide-text.less Text visibility
image.less Responsive and retina images
labels.less Label color options
list-group.less List group color variants
nav-divider.less Navigation divider
nav-vertical-align.less Vertical navigation alignment
opacity.less Opacity mixin
pagination.less Pagination sizes
panels.less Panels with contextual variants
progress-bar.less Progress bars colors
reset-filter.less Gradient reset for IE
reset-text.less Text reset
resize.less Resize elements
responsive-visibility.less Responsive utilities
size.less Sizing shortcuts
tab-focus.less WebKit-style focus
table-row.less Table row styling variants
text-emphasis.less Text colors
text-overflow.less Text overflow
vendor-prefixes.less Animations, box shadow, transitions and other vendor prefixes
Template overrides

Contains 28 modified .less files from /less/bootstrap/ folder. I don't remember what exactly has been changed as it took pretty much time, but i've described briefly what was changed and where. Most of the files include extended components functionality, options and styles. If you want to make any changes in these files, go ahead. If you don't use any of these components, exclude them in core.less file.

File name Description
Main files
alerts.less Alert component - color and other options
badges.less Badges component - size and color options
breadcrumbs.less Breadcrumbs component - added new options, changed default styles and added new
button-groups.less Button groups - styling changes
buttons.less Button styles - added button layouts and changed defaults
close.less Close button - updated close button size and position
code.less Inline and blocks of code - slightly modified default styles
dropdowns.less Dropdown menus - sizes, colors, components
forms.less Basic form components styling - general form components updates
glyphicons.less Glyphicons icon font - changed paths to font files
input-groups.less Input groups component - Added options and sizes, changed defaults
labels.less Labels component - sizes, styles and additinoal options
list-group.less List group nav component - changed colors, sizes, default options
media.less Media lists - added and changed a lot of different stuff
modals.less Modal dialogs - additional styling options
navbar.less Navbar - oh, a lot of things, almost re-coded
navs.less Tab, pill and other navs - here as well, completely changed tabs and pills layouts and default options
pager.less Pager component - added sizes and updated default options
pagination.less Pagination component - additional pagination styles with differnet options
panels.less Content panels - extended defaults, updated general look and feel
popovers.less Popovers component - additional styles and changed defaults
progress-bars.less Progress bars component - added sizes and slightly changed defaults
scaffolding.less General scaffolding - a couple of changes
tables.less Tables styling - extended default views and styles, added a lot of different options
thumbnails.less Thumbnails component - extended default functionality
tooltip.less Tooltip component - extended default functionality and added new styles
type.less Typography, page header and contextual backgrounds - a LOT of new code
wells.less Well blocks component - background colors, paddings, colors etc.

Contains 105 .less files. In fact, all these files are responsible for template layout, styling and functionality: plugins, extensions, custom page kits, charts, layout, core, variables etc. Feel free to edit any of these files, in future releases i'll provide detailed explanations in changelog about edited files and pieces of code that needs to be updated.

File name Description
charts.less Charts base
c3.less C3.js visualization library
d3.less D3.js visualization library
sparklines.less Sparklines library
jQuery UI
autocomplete.less Autocomplete extension
datepicker.less Datepicker extension
menu.less Menu extension
sliders.less Vertical and horizontal sliders
sortable.less Sortable and draggable extensions
google-maps.less Google maps
jvectormap.less Vector maps
maps.less Maps base
Pace loader
default.less Default thin line
pace-demo.less Pace demonstration
theme-bar-sm.less Small progress bar theme
theme-bar-xs.less Mini progress bar theme
theme-bar.less Default progress bar theme
theme-corners.less Corners theme
theme-perspective.less Perspective theme
theme-radar.less Radar theme
theme-squares.less Rotating squares theme
theme-tail-circle.less Tail and background circle theme
theme-tail.less Tail theme
theme-xbox-sm.less Small Xbox theme
theme-xbox-xs.less Mini Xbox theme
theme-xbox.less Default Xbox theme
Page kits
chats.less Chat layouts and options
error.less Error pages
invoice.less Invoice template
login.less Login and registration pages
profile.less User profiles
search.less Search pages with options
task-manager.less Task manager grid and detailed view
timelines.less Timeline directions and styles
user-list.less User list
bootstrap-switch.less Bootstrap toggle switches
switchery.less Switchery toggles
uniform.less Custom checkboxes, radios and file input styling
ace.less Ace code editor
summernote.less Summernote text editor
wysihtml5.less WYSIHTML5 text editor
typeahead.less Typeahead extension
validation.less Form validation
passy.less Password checker and generator
editable.less Editable form elements
dual-listbox.less Dual multiple select boxes
touchspin.less Touchspin spinners for Bootstrap
bootstrap-select.less Bootstrap single and multiple selects
selectbox.less SelectBoxIt selects
select2.less Single and multiple Select2 selects
multiselect.less Bootstrap multiselect
tokenfield.less Tokenfield for Bootstrap
tags-input.less Tags input plugin
form.less Form wizard
steps.less Steps wizard
stepy.less Stepy wizard
fancybox.less Lightbox plugin
image-cropper.less Image cropper extension
progress-buttons.less Ladda - buttons with spinner and progress bar
fullcalendar.less Fullcalendar - event calendar extension
fancytree.less Fancytree - dynamic multi level tree view
prism.less Prism - syntax highlighter
headroom.less Headroom - hideable navbars
sweet-alerts.less Nice looking alerts and dialogs
jgrowl.less jGrowl - growl-like notifications
noty.less Noty - yet another notification library
pnotify.less PNotify - powerful notification library
noui-slider.less NoUI slider library
slider-pips.less Pips and tooltip for jQuery UI sliders
anytime.less Anytime - date and time picker
bootstrap-datepicker.less Datepicker for Bootstrap
date-paginator.less Date paginator - dates with date picker
daterange.less Date range picker
spectrum.less Spectrum - color picker
pickadate/base.less Pick-a-date - basic styling
pickadate/date.less Pick-a-date - date picker
pickadate/time.less Pick-a-date - time picker
dropzone.less Dropzone - HTML5 single and multiple file uploader
file-input.less Bootstrap file input - single and multiple file uploader
plupload.less Plupload - file uploader with multiple runtimes
datatable-columns-reorder.less Datatable extension - columns reorder
datatable-columns-visibility.less Datatable extension - columns visibility
datatable-fixed-columns.less Datatable extension - fixed columns
datatable-responsive.less Datatable extension - responsive table
datatable-scroller.less Datatable extension - scroller
datatable-tabletools.less Datatable extension - tabletools
datatables.less Datatables base
footable.less Footable - responsive static tables
heading-elements.less Page and panel heading components
helpers.less Helper classes
snippets.less Different snippets
demo.less Styles used in live preview
variables.less Bootstrap variables overrides
core-variables.less Additional core variables
nav-vertical-align.less Extended vertical nav alignment mixin
palette.less Color palette
colors.less Color classes
content.less Template content's base
footer.less Footer
boxed.less Boxed layout
sidebar.less Sidebars with navigation
utils.less Utilities
Main files for compile
bootstrap.less Main bootstrap LESS file, moved from /bootstrap/ folder
colors.less Color system
components.less Template components
core.less Bootstrap overrides
CSS files
Files overview

Limitless template includes 3 main and 1 optional compiled CSS files included in all pages. All files have commented sections with information about dates of latest update, version and brief description. All other comments that can be found in LESS files are removed during compilation to reduce the size of CSS files. bootstrap.css is always minified, because i didn't make any changes in Bootstrap core. colors.css is also minified, because there is actually nothing to change inside, all color values can be found in palette.less file. Minified files are included as well.

  • bootstrap.css, *.min.css - Bootstrap core, always use minified
  • core.css, *.min.css - Bootstrap core overrides
  • components.css, *.min.css - all template components and plugins
  • colors.css, *.min.css - color classes, always use minified

Note: both minified and unminified CSS files are inside same folder, because paths to images and font files are equal in both versions. If you want to place source or minified files into different folders, don't forget to change those paths. Also feel free to remove unnecessary CSS files if you don't use them. I strongly suggest not to make changes directly in CSS, but do it in LESS files instead to avoid difficulties in upgrade to newer versions. If you need any help with compiling CSS, let me know and i'll help you out.


CSS editing

Since main styling source is LESS files kit, i strongly recommend to use minified versions of all CSS files, that are included to the package and not to change CSS files directly. Edit LESS files instead, it will help you to keep all your changes in future updates, because i will add changes to LESS files first, re-compile all CSS and provide a detailed instructions about what needs to be changed and where it should be done in LESS files only.

Icon fonts

Although main files editing is not recommended, icon font files can be edited. I didn't convert them to LESS files, as there is no need actually, because there are quite few CSS properties for them - general font reset and icon codes. If you need to add any changes to the icon styles.css files, feel free to do it. In all future updates i'll do my best to update icon package and main file with styles if necessary.