Documentation

Here are The instructions to get up and running

Introduction

Infinity is a responsive Bootstrap 3.3.6 Admin Template. It provides you with a vast collection of ready to use code snippets and utilities, many custom pages and a collection of applications and widgets

What you get when you get Infinity:

  • 8 built-in Color Skins And You Can Your Own
  • Light/Dark Sidebar Themes
  • Free Landing Pages For Your Website
  • Multiple Layout
  • Responsive layout
  • Live Skin Customizer
  • Loading progress bar
  • Hundreds of UI Components
  • Dozens of Widgets
  • Hundreds of Utility Classes
  • Font Icons(font-awesome, glyphicons, material design icons)
  • HTML5 & CSS3
  • Bootstrap 3.3.6 Framework
  • Sass for CSS preprocessing (compiled CSS included)
  • Grunt Tasks Manager
  • Bower Dependency Management
  • Clean and Friendly Code

Installation

Zero installation

For zero-installation We include all files to be ready for use

root/
  |-- api
  |-- assets
  |-- default
  |-- topbar
  |-- libs

Put previous folders into your site root directory (use default or topbar).

Using Grunt

We use Grunt for build processes. You can optionally use it, Compiled and ready files are included as mentioned above.

To use grunt you need some tools to be installed:

  • NodeJs For managing our dependences
  • Bower For managing frontend dependences
  • Grunt for task management
Available Commands:

You can use those commands to build dist and test your site:

  • npm install to install grunt and grunt dependencies
  • bower install --force-latest to install dependencies
  • grunt build to build the dist folder with minified CSS JS
  • npm start to start development server

We use assemble to assemble layout files from the templates, if you made changes to the templates and wanted to reassemble layouts:

  • grunt assemble to reassemble both of (default and topbar) layouts
  • grunt assemble:default to reassemble the (default) layout
  • grunt assemble:topbar to reassemble the (topbar) layout
SASS commands
  • grunt sass:app to compile assets/sass/app.scss to assets/css/app.css
Other commands
  • grunt copy:libs to copy bower_components contents to libs/bower directory

File Structure

The following directories and files, contain all files and resources (raw and compiled) you need to get started

root/
  |-- api/
  |-- |-- json/
  |-- assets/
  |-- |-- css/
  |-- |-- fonts/
  |-- |-- images/
  |-- |-- js/
  |-- |-- sass/
  |-- |-- |-- app-sass/
  |-- |-- |-- bootstrap-sass/
  |-- |-- |-- libs-sass/
  |-- libs/
  |-- |-- bower
  |-- |-- misc
  |-- templates/
  |-- |-- apps/
  |-- |-- |-- mailbox/
  |-- |-- charts/
  |-- |-- dashboard/
  |-- |-- forms/
  |-- |-- layouts/
  |-- |-- maps/
  |-- |-- misc/
  |-- |-- pages/
  |-- |-- search/
  |-- |-- tables/
  |-- |-- uikit/
  |-- default/
  |-- topbar/
  |-- dist/ => this folder containes minified (version) of files
  |-- |-- api/
  |-- |-- assets/
  |-- |-- default/
  |-- |-- topbar/
  |-- |-- libs/
  |-- |-- index.html
  |-- Gruntfile.js
  |-- bower.json
  |-- package.json
  |-- index.html

Themes Introduction

Infinity has 8 predefined themes (primary, success, warning, danger, pink, purple, inverse and dark). For each theme we include variants of (buttons, radios, checkboxes, backgrounds, text colors, ...)
In infinity v2.0.0 we introduced the functionality for adding more themes.

There are two types of themes:

Complete Theme:

Those themes change the ( navbar background ) and the ( text and borders coloring in the menubar ) in addition to including variants of (buttons, radios, checkboxes, backgrounds, text colors, ...)

Partial Theme:

Those themes change only the ( navbar background ) and the ( text and borders coloring in the menubar )

Adding Themes

To add your own theme, there are few steps to follow. This process is divided into two parts as following:

SASS ( CSS )

There are 3 different ways to choose from in this part, you should pick one of theme:

- Adding a complete theme:

If you want to add a complete theme * (1):

  • Go to ( assets/sass/app-sass/_variables.scss ).
  • Define a new variable under the //= contextual colors comment section and assign your color value to it.
  • Assign the newly created variable to a new key ( which will be the theme name ) in the $contextualColors map.
  • Run the command grunt sass:app in your command line to Compile SASS. *(2)
  • Finish the ( javascript ) part as mention below and you are done.

*(1)Note that using this option ( adding a complete theme ) leads to generating a whole bunch of (buttons, radios, checkboxes, backgrounds, text colors, ...) variants, and this mean a lot of generated CSS code which also means much bigger CSS files, so if all you need is to tweak the ( navbar background ) and the ( text and borders coloring in the menubar ) then it would be better to add a ( partial theme ) using one of the next two ways

*(2) Note: you must have SASS installed on your machine to complete this step

- Adding a partial theme using (SASS):

To add a partial theme using SASS:

  • Go to ( assets/sass/app-sass/_themes.scss )
  • Call the mixin @include theme-variant(themeName, color) *(1)
  • Run the command grunt sass:app in your command line to Compile SASS.*(2)
  • Finish the ( javascript ) part as mention below and you are done.

*(1) Important: themeName can't have spaces or any special characters in it, it can have only alphabet and ( -, _ ).

*(2) Note: you must have SASS installed on your machine to complete this step

- Adding a partial theme using (plain CSS):

If you are not using SASS you can include the needed code using vanilla CSS.

Include the following code in your CSS, substituting ( themeName and colorValue ) with your own theme name and color.

.theme-themeName .navbar-brand, .theme-themeName .navbar-brand:hover, .theme-themeName .navbar-brand:focus {
  color: colorValue; }
.theme-themeName .theme-color {
  color: colorValue; }
.theme-themeName .menubar .app-menu li.open, .theme-themeName .menubar .app-menu li.active {
  border-left-color: colorValue; }
.theme-themeName .menubar .app-menu li.open > a, .theme-themeName .menubar .app-menu li.active > a, .theme-themeName .menubar .app-menu li:hover > a, .theme-themeName .menubar .app-menu li.menu-heading > a {
  color: colorValue; }

/* add new variants and helper classes for the new theme */
.radio-themeName input[type="radio"] + label::after {
  background-color: colorValue; }
.radio-themeName input[type="radio"]:checked + label::before {
  border-color: colorValue; }
.radio-themeName input[type="radio"]:checked + label::after {
  background-color: colorValue; }

.text-themeName {
  color: colorValue; }

.bg-themeName, .themeName {
  background-color: colorValue;
  color: #fff; }

Javascript

Regardless the way you have chosen to add the ( CSS ), there is one way to accomplish the ( javascript ) part:
In any place in your javascript code files ( that are preceded by: app.js file ) you can do the following actions:

- Adding a new theme:

Call the following function passing the new theme's name * (1) to it:

addNewTheme( 'themeName' );

*(1) Note: the ( theme name must ) be the same as the one you used in SASS/CSS

- Removing an existing theme:

Call the following function passing the name of the theme you want to remove * (1, 2):

removeTheme( 'themeName' );

*(1) Note: the ( primary ) theme is protected against removal

*(2) Note: to completely remove a theme ( That you have added ) you have to undo any changes you made to SASS/CSS in the previous steps.

- Adding/Removing using browser's console:

You can - for testing purpose - use the previously mentioned methods addNewTheme( 'themeName' ); and removeTheme( 'themeName' ); from the browser's console* (1):

*(1) Note: do that for testing purpose only because you will see the affect only on your own machine and the website visitors will not see any changes until you deploy them in your javascript code.

Utility Classes

There are many SASS variables you can config to build the css file. many classes are extended from bootstrap css.bootstrap utilities documentation

padding

/* Padding all: (padding-top, padding-right, padding-bottom, padding-left) */

  .p-xs{ padding: $padding-xs !important; }
  .p-sm{ padding: $padding-sm !important; }
  .p-md{ padding: $padding-md !important; }
  .p-lg{ padding: $padding-lg !important; }
  .p-xl{ padding: $padding-xl !important; }
  .p-0{ padding: 0 !important; }

/* Horizontal padding: (padding-top, padding-bottom) */

  .p-h-0{ padding-top: 0 !important; padding-bottom: 0!important; }
  .p-h-xs{ padding-top: $padding-xs !important; padding-bottom: $padding-xs !important; }
  .p-h-sm{ padding-top: $padding-sm !important; padding-bottom: $padding-sm !important; }
  .p-h-md{ padding-top: $padding-md !important; padding-bottom: $padding-md !important; }
  .p-h-lg{ padding-top: $padding-lg !important; padding-bottom: $padding-lg !important; }
  .p-h-xl{ padding-top: $padding-xl !important; padding-bottom: $padding-xl !important; }

/* Vertical padding: (padding-left, padding-right) */

  .p-v-0{ padding-left: 0 !important; padding-right: 0!important; }
  .p-v-xs{ padding-right: $padding-xs !important; padding-left: $padding-xs !important; }
  .p-v-sm{ padding-right: $padding-sm !important; padding-left: $padding-sm !important; }
  .p-v-md{ padding-right: $padding-md !important; padding-left: $padding-md !important; }
  .p-v-lg{ padding-right: $padding-lg !important; padding-left: $padding-lg !important; }
  .p-v-xl{ padding-right: $padding-xl !important; padding-left: $padding-xl !important; }

/* Top padding: (padding-top) */

  .p-t-0{ padding-top: 0 !important; }
  .p-t-xs{ padding-top: $padding-xs !important; }
  .p-t-sm{ padding-top: $padding-sm !important; }
  .p-t-md{ padding-top: $padding-md !important; }
  .p-t-lg{ padding-top: $padding-lg !important; }
  .p-t-xl{ padding-top: $padding-xl !important; }

/* Right padding: (padding-right) */

 .p-r-0{ padding-right: 0 !important; }
 .p-r-xs{ padding-right: $padding-xs !important; }
 .p-r-sm{ padding-right: $padding-sm !important; }
 .p-r-md{ padding-right: $padding-md !important; }
 .p-r-lg{ padding-right: $padding-lg !important; }
 .p-r-xl{ padding-right: $padding-xl !important; }

/* Bottom padding: (padding-bottom) */

  .p-b-0{ padding-bottom: 0 !important; }
  .p-b-xs{ padding-bottom: $padding-xs !important; }
  .p-b-sm{ padding-bottom: $padding-sm !important; }
  .p-b-md{ padding-bottom: $padding-md !important; }
  .p-b-lg{ padding-bottom: $padding-lg !important; }
  .p-b-xl{ padding-bottom: $padding-xl !important; }

/* Left padding: (padding-left) */

  .p-l-0{ padding-left: 0 !important; }
  .p-l-xs{ padding-left: $padding-xs; }
  .p-l-sm{ padding-left: $padding-sm !important; }
  .p-l-md{ padding-left: $padding-md !important; }
  .p-l-lg{ padding-left: $padding-lg !important; }
  .p-l-xl{ padding-left: $padding-xl !important; }

Margin

/* Margin all: (margin-top, margin-right, margin-bottom, margin-left) */

  .m-0{ margin: 0 !important; }
  .m-xs{ margin: $margin-xs !important; }
  .m-sm{ margin: $margin-sm !important; }
  .m-md{ margin: $margin-md !important; }
  .m-lg{ margin: $margin-lg !important; }
  .m-xl{ margin: $margin-xl !important; }

/* Horizontal margin: (margin-top, margin-bottom) */

  .m-h-0{ margin-top: 0!important; margin-bottom: 0!important; }
  .m-h-xs{ margin-top: $margin-xs !important; margin-bottom: $margin-xs !important; }
  .m-h-sm{ margin-top: $margin-sm !important; margin-bottom: $margin-sm !important; }
  .m-h-md{ margin-top: $margin-md !important; margin-bottom: $margin-md !important; }
  .m-h-lg{ margin-top: $margin-lg !important; margin-bottom: $margin-lg !important; }
  .m-h-xl{ margin-top: $margin-xl !important; margin-bottom: $margin-xl !important; }

/* Vertical margin: (margin-left, margin-right) */

  .m-v-0{ margin-left: 0!important; margin-right: 0!important; }
  .m-v-xs{ margin-left: $margin-xs !important; margin-right: $margin-xs !important; }
  .m-v-sm{ margin-left: $margin-sm !important; margin-right: $margin-sm !important; }
  .m-v-md{ margin-left: $margin-md !important; margin-right: $margin-md !important; }
  .m-v-lg{ margin-left: $margin-lg !important; margin-right: $margin-lg !important; }
  .m-v-xl{ margin-left: $margin-xl !important; margin-right: $margin-xl !important; }

/* Top padding: (padding-top) */

  .m-t-0{ margin-top: 0 !important; }
  .m-t-xs{ margin-top: $margin-xs !important; }
  .m-t-sm{ margin-top: $margin-sm !important; }
  .m-t-md{ margin-top: $margin-md !important; }
  .m-t-lg{ margin-top: $margin-lg !important; }
  .m-t-xl{ margin-top: $margin-xl !important; }

/* Right padding: (padding-right) */

  .m-r-0{ margin-right: 0 !important; }
  .m-r-xs{ margin-right: $margin-xs !important; }
  .m-r-sm{ margin-right: $margin-sm !important; }
  .m-r-md{ margin-right: $margin-md !important; }
  .m-r-lg{ margin-right: $margin-lg !important; }
  .m-r-xl{ margin-right: $margin-xl !important; }

/* Bottom padding: (padding-bottom) */

  .m-b-0{ margin-bottom: 0 !important; }
  .m-b-xs{ margin-bottom: $margin-xs !important; }
  .m-b-sm{ margin-bottom: $margin-sm !important; }
  .m-b-md{ margin-bottom: $margin-md !important; }
  .m-b-lg{ margin-bottom: $margin-lg !important; }
  .m-b-xl{ margin-bottom: $margin-xl !important; }

/* Left padding: (padding-left) */

  .m-l-0{ margin-left: 0 !important; }
  .m-l-xs{ margin-left: $margin-xs !important; }
  .m-l-sm{ margin-left: $margin-sm !important; }
  .m-l-md{ margin-left: $margin-md !important; }
  .m-l-lg{ margin-left: $margin-lg !important; }
  .m-l-xl{ margin-left: $margin-xl !important; }

Font size

  .fz-xs{ font-size: $font-size-xs !important; }
  .fz-sm{ font-size: $font-size-sm !important; }
  .fz-md{ font-size: $font-size-md !important; }
  .fz-lg{ font-size: $font-size-lg !important; }
  .fz-xl{ font-size: $font-size-xl !important; }

Font weight

  .fw-300{ font-weight: 300 !important; }
  .fw-400{ font-weight: 400 !important; }
  .fw-500{ font-weight: 500 !important; }
  .fw-600{ font-weight: 600 !important; }
  .fw-700{ font-weight: 700 !important; }
  .fw-800{ font-weight: 800 !important; }
  .fw-800{ font-weight: 900 !important; }

Line Height

  .lh-xs, .lh-1{ line-height: 1; }
  .lh-sm{ line-height: 1.3; }
  .lh-md{ line-height: 1.6; }
  .lh-lg{ line-height: 1.8; }
  .lh-xl{ line-height: 2; }

Text Alignment

  .text-right{ text-align: right !important; }
  .text-center{ text-align: center !important; }
  .text-left{ text-align: left !important; }

Text color

  .text-primary{ color: $primary !important; }
  .text-success{ color: $success !important; }
  .text-info{ color: $info !important; }
  .text-warning{ color: $warning !important; }
  .text-danger{ color: $danger !important; }
  .text-pink{ color: $pink !important; }
  .text-purple{ color: $purple !important; }
  .text-inverse{ color: $inverse !important; }
  .text-dark{ color: $dark !important; }
  .text-white{ color: $text-white !important; }
  .text-color{ color: $text-color !important; }
  .title-color{ color: $title-color !important; }
  .watermark{ color: $watermark; }
  .text-muted{ color: inherit; opacity: .6; }

Backgrounds

  .bg-primary, .primary{ background-color: $brand-primary; color: #fff; }
  .bg-success, .success{ background-color: $brand-success; color: #fff; }
  .bg-info, .info{ background-color: $brand-info; color: #fff; }
  .bg-warning, .warning{ background-color: $brand-warning; color: #fff; }
  .bg-danger, .danger{ background-color: $brand-danger; color: #fff; }
  .bg-pink, .pink{ background-color: $pink; color: #fff; }
  .bg-purple, .purple{ background-color: $purple; color: #fff; }
  .bg-inverse, .inverse{ background-color: $inverse; color: #fff; }
  .bg-dark, .dark{ background-color: $dark; color: #fff; }
  .bg-white, .white, .light{ background-color: #fff !important; color: $text-color; }

Lazyload

You can dynamically call jquery plugins on DOM elements using data-pluginattribute:

Example:
<div data-plugin="counterUp" data-options="{delay: 10, time: 1000}"></div>
This is equivalent to $('selector').counterUp({delay: 10, time: 1000})
You can config the plugins in assets/js/library.js

Change Log

- Release V2.0.0

This is a major update ( new version ) of Infinity. Many changes have been made to core files of the template so if you already have the previous release integrated withe your own code be careful when upgrading to this version

  • Adding third dashboard
  • Introducing a free landing page
  • Adding the functionality for adding/removing themes
  • Highlighting the open link in the ( menubar )
  • New look and feel for small devices
  • Centering navbar-brand for small screens
  • Showing the name of the fold menu item on hover
  • Menubar submenus now can be nested to any level
  • The superfish plugin is removed
  • Renaming app-aside to menubar
  • Fixing the scrolling issue in the fold ( menubar )
  • Fixing the ( topbar ) layout issues for small screens
  • Fixing many issues and adding more power to the responsiveness
  • Folding/unfolding the ( menubar ) and change the layout based on the screen size
  • Readjusting the ( menubar ) when resize and orientationchange events occurs
  • Adjusting the app-user component based on the current layout and screen size
  • Refactoring the HTML, SASS and Javascript code to maximize performance and cleanness
  • Splitting app.scss into two files: core.scss and app.scss
  • Renaming assets/sass/app-sass/components to Renaming assets/sass/app-sass/ui-components
  • And many internal code modifications

- Release V1.0.1

This is the First Update

  • Rebuilding the second Dashboard
  • Rebuilding Buttons Demo Page
  • Rebuilding Panels Demo Page

- Release V1.0.0

This is the Initial Release

Buy Now

Friends

John Doe
active now
John Doe
active now
Adam Kiti
active now
Jane Doe
away
Sara Adams
away
Smith Doe
away
Dana Dyab
away
Jeffry Way
2 hours ago
Jane Doe
5 hours ago
Adam Khoury
22 minutes ago
Sara Smith
2 days ago
Donia Dyab
3 days ago