Limitless - Responsive Web Application Kit by Eugene Kopyov

Version

v3.0

SCSS overview

Overview

All Limitless styles are based on SCSS 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 SCSS files. Among them - Bootstrap components core, Bootstrap core overrides, layout and component related files. All files are properly divided into categories and placed inside nested folders:

Screenshot - scss structure

Editing

To edit SCSS files, use any code editor that supports .scss file extensions. To include or exclude components from your project, edit main configuration file _config.scss located in global_assets/scss/ folder. Starting from version 3.*, config file includes only components, layout and theme specific configs are not required anymore, but you can add any custom rule you need and better to use that file, since it's imported by all SCSS files, directly and indirectly.

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 is why all core Bootstrap files remain untouched, all necessary changes need to be done in separate file with the same name in global_assets/scss/themes/[theme]/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 SCSS files, but use files from global_assets/scss/themes/[theme]/bootstrap_limitless/ folder instead. All these files will be overridden in every future update. This will simplify your upgrading process in the future.

Screenshot - Bootstrap overrides

Variables

If you need to change a default theme, you can edit template's variables - all main colors, spacings and other styles are located there and you can change nearly everything. Main template's variables are stored in 2 files: _variables-core.scss and _variables-custom.scss, located in global_assets/scss/[layout]/[theme]/variables/ folder.

_variables-core.scss contains default Bootstrap variables overrides only
_variables-custom.scss contains all other variables used in the template.

All variables are theme-specific, which means if you need to edit styling of certain component, try to change variables first and edit SCSS code in corresponding file only if needed.

Screenshot - variables

Compiling

There are tons of different applications and extensions available for SCSS compiling, but not all of them support all build tools used in Limitless. Previous versions supported desktop apps like Koala or Crunch, starting from version 2.0 onwards desktop applications are not officially supported, so use them at your own risk.

By default, Limitless template uses 5 separate compiled CSS files - all.min.css, bootstrap.css, bootstrap_limitless.css and components.css and layout.css. CSS files have same names as 4 main SCSS files located in global_assets/scss/layouts/[layout]/[theme]/compile/ folder. In fact, these 4 css files are automatically generated from main SCSS files and 1 is a production version that includes all those 4. So to compile CSS files, use only these 4 main scss files:

bootstrap.scss - Bootstrap core
bootstrap_limitless.scss - Bootstrap core overrides
components.scss - all template components and plugins, except Bootstrap ones
layout.scss - layout base

First 3 files are required for proper styling. Do not edit any of these files if you don't need to add something new to them, instead use _config.scss file to include/exclude existing styles from components.css. Starting from version 3.0, color system is not optional anymore and is now a part of the core, all colors can be found in _variables-core.scss file.

Keep in mind that /compile/ folder is sensitive to files - gulp file is configured to dynamically compile all files from this folder into separate CSS files and additionally merges all into 1.

Screenshot - 5 main files

SCSS files

SCSS 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; layouts - all layout-specific styles;shared - styles that are used across all layouts; themes - theme-specific set of files, includes bootstrap-limitless - Limitless overrides of Bootstrap core styling loaded on top of original ones and components - main template components, custom pages and plugins.

4 main files that import all other files are in separate folder - bootstrap.scss, components.scss and bootstrap_limitless.scss and layout.scss. If you need to include or exclude any of existing files, make changes in _config.scss file. But if you need to add a new one, feel free to edit them. Below is the table with categorized SCSS files used in the template:

Bootstrap core

Contains 40 main files, 18 utilities and 31 mixins. File bootstrap.scss exists in 2 locations - in /bootstrap/ and in /layouts/[layout]/[theme]/compile/ folders. Editing any of those 2 files is not recommended since it's a core functionality and it might affect other components.

File name	Description
Main files
`_alert.scss`	Alert components
`_badge.scss`	Badges component
`_breadcrumbs.scss`	Breadcrumbs component
`_button-group.scss`	Button groups
`_buttons.scss`	Button stylings
`_card.scss`	Cards component
`_carousel.scss`	Carousel component
`_close.scss`	Close button
`_code.scss`	Inline and blocks of code
`_custom-forms.scss`	Custom CSS form components
`_dropdowns.scss`	Dropdown menus
`_forms.scss`	Basic form components styling
`_functions.scss`	Main SASS functions used in Bootstrap
`_grid.scss`	Responsive mobile-first grid
`_images.scss`	Image styling
`_input-groups.scss`	Input groups component
`_jumbotron.scss`	Jumbotron component
`_list-group.scss`	List group nav component
`_media.scss`	Media lists
`_mixins.scss`	Mixins loading file
`_modals.scss`	Modal dialogs
`_nav.scss`	Tab, pill and other navs
`_navbar.scss`	Navbar
`_pagination.scss`	Pagination component
`_popover.scss`	Popovers component
`_print.scss`	Print styles
`_progress.scss`	Progress bars component
`_reboot.scss`	Reset default CSS
`_root.scss`	Root level styles
`_spinners.scss`	Spinners styling
`_tables.scss`	Tables styling
`_toasts.scss`	Toast messages styling
`_tooltip.scss`	Tooltip component
`_transitions.scss`	Default transitions
`_type.scss`	Typography, page header and contextual backgrounds
`_utilities.scss`	Utilities
`_variables.scss`	Main variables
`bootstrap-grid.scss`	Import files for grid
`bootstrap-reboot.scss`	Import other files for proper reboot
`bootstrap.scss`	Import all files
Bootstrap mixins
`_alert.scss`	Alerts with color options
`_background-variant.scss`	Contextual backgrounds
`_badge.scss`	Badge colors
`_border-radius.scss`	Border radius: top, bottom, left, right
`_box-shadow.scss`	Box shadow config
`_breakpoints.scss`	Breakpoints configuration
`_buttons.scss`	Buttons with color and sizing options
`_caret.scss`	Caret directions
`_clearfix.scss`	Clear and reset floating
`_deprecate.scss`	Deprecated messages
`_float.scss`	Left and right floating, including reset
`_forms.scss`	Form control validation
`_gradients.scss`	Gradient options
`_grid-framework.scss`	Responsive grid system
`_grid.scss`	Grid columns, container and offsets
`_hover.scss`	Hover and focus mixins
`_image.scss`	Responsive and retina images
`_list-group.scss`	List group color variants
`_lists.scss`	List styles
`_nav-divider.scss`	Navigation divider
`_pagination.scss`	Pagination sizes
`_reset-text.scss`	Text reset
`_resize.scss`	Resize elements
`_screen-reader.scss`	Screen reader mixins
`_size.scss`	Sizing shortcuts
`_table-row.scss`	Table row styling variants
`_text-emphasis.scss`	Text colors
`_text-hide.scss`	Text show/hide
`_text-truncate.scss`	Long text truncate
`_transition.scss`	Core transitions
`_visibility.scss`	Visibility mixins
Bootstrap utilities
`_align.scss`	Vertical alignment
`_background.scss`	Contextual backgrounds
`_borders.scss`	Border width, style and radius
`_clearfix.scss`	Clearing floats
`_display.scss`	Responsive display utilities
`_embed.scss`	Responsive embeds
`_flex.scss`	Flexbox utility classes
`_float.scss`	Responsive floating
`_interactions.scss`	Interactions
`_overflow.scss`	Overflow properties
`_position.scss`	Position classes
`_screenreaders.scss`	SR utility classes
`_shadows.scss`	Predefined box shadows
`_sizing.scss`	Width and height classes
`_spacing.scss`	Responsive spacing classes
`_stretched-link.scss`	BLock level links
`_text.scss`	Text style classes
`_visibility.scss`	Visible/invisible classes

Template overrides

Contains 26 modified .scss files from global_assets/scss/_bootstrap/ folder. Most of the files include extended components functionality, options and styles. If you want to make any changes in these files, feel free to do so. If you don't use any of these components, exclude them in _config.scss file.

File name	Description
Main files
`_alert.scss`	Alert components
`_badge.scss`	Badges component
`_breadcrumbs.scss`	Breadcrumbs component
`_button-group.scss`	Button groups
`_buttons.scss`	Button stylings
`_card.scss`	Cards component
`_close.scss`	Close button
`_code.scss`	Inline and blocks of code
`_custom-forms.scss`	Custom CSS form components
`_dropdowns.scss`	Dropdown menus
`_forms.scss`	Basic form components styling
`_input-group.scss`	Input groups component
`_list-group.scss`	List group nav component
`_media.scss`	Media lists
`_mixins.scss`	Mixins loading file
`_modal.scss`	Modal dialogs
`_nav.scss`	Tab, pill and other navs
`_navbar.scss`	Navbar
`_pagination.scss`	Pagination component
`_popover.scss`	Popovers component
`_progress.scss`	Progress bars component
`_reboot.scss`	Reset default CSS
`_tables.scss`	Tables styling
`_toasts.scss`	Toasts component
`_tooltip.scss`	Tooltip component
`_type.scss`	Typography, page header and contextual backgrounds
`_utilities.scss`	Utilities

Components

Contains 94 .scss files. All these files are responsible for 3rd party libraries styling and functionality: plugins, extensions, custom page kits, charts etc. Feel free to edit any of these files. It also includes demo styles that are included by default for demonstration purposes only. I would suggest you to remove _demo.scss file in production.

File name	Description
Charts
`charts.scss`	Charts base
`c3.scss`	C3.js visualization library
`d3.scss`	D3.js visualization library
jQuery UI
`interactions.scss`	Interactions and other elements
`widgets.scss`	Widgets library
Maps
`google-maps.scss`	Google maps
`jvectormap.scss`	Vector maps
Pace loader
`theme-default.scss`	Default thin line
`pace-demo.scss`	Pace demonstration
`theme-bar-lg.scss`	Large progress bar theme
`theme-bar-sm.scss`	Small progress bar theme
`theme-bar.scss`	Default progress bar theme
`theme-corners.scss`	Corners theme
`theme-perspective.scss`	Perspective theme
`theme-radar.scss`	Radar theme
`theme-squares.scss`	Rotating squares theme
`theme-tail-circle.scss`	Tail and background circle theme
`theme-tail.scss`	Tail theme
`theme-xbox-lg.scss`	Large Xbox theme
`theme-xbox-sm.scss`	Small Xbox theme
`theme-xbox.scss`	Default Xbox theme
Page kits
`chats.scss`	Chat layouts and options
`blog.scss`	Blog pages
`ecommerce.scss`	Set of ecommerce pages
`error.scss`	Error pages
`inbox.scss`	Mail system templates
`login.scss`	Login and registration pages
`profile.scss`	User profiles
`task-manager.scss`	Task manager grid and detailed view
`timelines.scss`	Timeline directions and styles
Plugins
`_ace.scss`	Ace code editor
`_summernote.scss`	Summernote text editor
`_trumbowyg.scss`	Trumbowyg text editor
`_contents.scss` `_dialog.scss` `_editor.scss`	CKEditor text editor
`_typeahead.scss`	Typeahead extension
`_alpaca.scss`	JSON forms
`_validation.scss`	Form validation
`_passy.scss`	Password checker and generator
`_floating-labels.scss`	Floating labels component
`_dual-listbox.scss`	Dual multiple select boxes
`_touchspin.scss`	Touchspin spinners for Bootstrap
`_wizard.scss`	Form wizard
`_select2.scss`	Single and multiple Select2 selects
`_multiselect.scss`	Bootstrap multiselect
`_tokenfield.scss`	Tokenfield for Bootstrap
`_tags-input.scss`	Tags input plugin
`_fancybox.scss`	Lightbox plugin
`_image-cropper.scss`	Image cropper extension
`_fab.scss`	Floating action buttons
`_progress-buttons.scss`	Ladda - buttons with spinner and progress bar
`_dragula.scss`	Drang and drop library
`_slinky.scss`	Multilevel horizontal mega menu navigation
`_fullcalendar.scss`	Fullcalendar - event calendar extension
`_fancytree.scss`	Fancytree - dynamic multi level tree view
`_prism.scss`	Prism - syntax highlighter
`_headroom.scss`	Headroom - hideable navbars
`_sweet-alerts.scss`	Nice looking alerts and dialogs
`_jgrowl.scss`	jGrowl - growl-like notifications
`_noty.scss`	Noty - yet another notification library
`_pnotify.scss`	PNotify - powerful notification library
`_noui-slider.scss`	NoUI slider library
`_ion-range-slider.scss`	ION range slider library
`_slider-pips.scss`	Pips and tooltip for jQuery UI sliders
`_daterange.scss`	Date range picker
`_spectrum.scss`	Spectrum - color picker
`_pickadate/base.scss`	Pick-a-date - basic styling
`_pickadate/date.scss`	Pick-a-date - date picker
`_pickadate/time.scss`	Pick-a-date - time picker
`_dropzone.scss`	Dropzone - HTML5 single and multiple file uploader
`_file-input.scss`	Bootstrap file input - single and multiple file uploader
`_plupload.scss`	Plupload - file uploader with multiple runtimes
`_datatable-autofill.scss`	Datatable extension - autofill
`_datatable-buttons.scss`	Datatable extension - buttons
`_datatable-columns-reorder.scss`	Datatable extension - columns reorder
`_datatable-fixed-columns.scss`	Datatable extension - fixed columns
`_datatable-keytable.scss`	Datatable extension - keytable
`_datatable-responsive.scss`	Datatable extension - responsive table
`_datatable-rows-reorder.scss`	Datatable extension - rows reorder
`_datatable-scroller.scss`	Datatable extension - scroller
`_datatable-select.scss`	Datatable extension - select
`_datatables.scss`	Datatables base
`_footable.scss`	Footable - responsive static tables
`_header-elements.scss`	Page and card header components
`_demo.scss`	Styles used in live preview
`_fouc.scss`	Flashing of unstyled content fix
`_helpers.scss`	Helper classes
Core
`_variables-core.scss`	Bootstrap variables overrides
`_variables-custom.scss`	Additional variables
`_ll_functions.scss`	Custom template functions
`_ll_mixins.scss`	Custom template mixins
`_content.scss`	Template content's base
`_header.scss`	Page header
`_boxed.scss`	Boxed layout
`_sidebar.scss`	Sidebars with navigation
Main files for compilation
`_bootstrap.scss`	Main bootstrap SCSS file, moved from `_/_bootstrap/` folder
`_bootstrap-limitless.scss`	Bootstrap overrides
`_layout.scss`	Layout base
`_components.scss`	Template components

CSS files

Files overview

Limitless template includes 4 mandatory compiled CSS files and 1 additional concatenated file, which is included in all pages. You can use them either separately or all together, but bear in mind that file ordering matters. Limitless layouts include both compressed and uncompressed CSS files.

bootstrap.css, *.min.css - Bootstrap core, always use minified
bootstrap_limitless.css, *.min.css - Bootstrap core overrides
layout.css, *.min.css - layout base
components.css, *.min.css - all template components and plugins
all.min.css - everything

Note: both minified and unminified CSS files are inside same folder, because paths to images and font files are similar 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 SCSS files instead to avoid problems with upgrading to newer versions. If you need any help with compiling CSS, raise a support request.

Screenshot

CSS editing

Since main styling source is SCSS files kit, I strongly recommend to use minified versions of all CSS files included in the package and not to change CSS files directly. Edit SCSS files instead, this will help you to keep all your changes in future updates, because changes are getting added to SCSS files first, then SCSS files need to be re-compiled and detailed instructions about what needs to be changed and where it should be done in SCSS files only are provided. CSS files are generated dynamically from SCSS files. If you prefer CSS over SCSS, create a new CSS file, store your code in there and include a link to it after other files.

Icon fonts

Although editing of main files is not recommended, icon font files can be edited. If you need to add any changes to the icon styles.css files, feel free to do so. Icon sets are rarely get an update, but if you need to edit Icomoon set, selection.json file for IcoMoon app is included in the package.