Documentation

Getting started with Clip-Two is easy. Whether you are a master of Sass, building a new app, or making your existing site responsive, we've got you covered.
  1. Documentation
Getting Started

What is Clip-Two?

Clip-Two is an advanced, responsive dashboard template built with Bootstrap 3. This template is mobile friendly and ready for you to customize it any way you want to use it.

For the bootstrap css and components, please check the Bootstrap 3 documentation

Template Structure

This template has a fixed structure, including the following elements:

  • TopBar (Header)
  • Sidebar (with Main Navigation Menu)
  • Sliding Right Sidebar
  • Content
  • Footer
The Sidebar becomes a hidden Sliding Sidebar with a screen resolution of at least 992 pixels

Configurations

Setup Theme

6 different color schemes are available on Clip-Two. If you would like to set your favorite color, you will just need to add it into the head tag. 

<head>
  ...
  <link rel="stylesheet" href="assets/css/themes/theme-2.css" id="skin_color">
  ...
The available color schemes are:
  • theme-1.css
  • theme-2.css
  • theme-3.css
  • theme-4.css
  • theme-5.css
  • theme-6.css

Fixed or Default Header and Footer

A fixed header and a sliding footer belong to the Clip-Two default settings. Yet, if you would like to change these settings, please, proceed as follows:

from fixed to default Header: remove the class app-navbar-fixed to the #app div
from default to fixed Footer: add the class app-footer-fixed to the #app div

You can also combine two or more classes: 

<head>
...
<div id="app" class="app-navbar-fixed app-footer-fixed">
...

Fixed or Default Sidebar

A fixed Sidebar belong to the Clip-Two default settings. Yet, if you would like to change these settings, please, proceed as follows:

from fixed to default Sidebar: remove the class app-sidebar-fixed to the #app div
Clip-Two CSS

Getting Started With Clip-Two CSS

Clip-Two uses Bootstrap CSS that provides global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.

The Grid

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Column width Auto ~62px ~81px ~97px
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes
Example: Stacked-to-horizontal

Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row .

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
Example: Mobile and desktop

Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns. See the example below for a better idea of how it all works.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
Example: Mobile, tablet, desktop

Build on the previous example by creating even more dynamic and powerful layouts with tablet .col-sm-* classes.

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
Offsetting columns

Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
Nesting columns

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

Level 1: .col-sm-9
Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-4 .col-sm-6

CSS Utilities

In addition to the default bootstrap css, Clip-Two includes classes that can help you speed up your development work

Margin
.no-margin margin: 0
.margin-bottom-0 margin-bottom: 0
.margin-bottom-5 margin-bottom: 5px
.margin-bottom-10 margin-bottom: 10px
.margin-bottom-15 margin-bottom: 15px
.margin-bottom-20 margin-bottom: 20px
.margin-bottom-25 margin-bottom: 25px
.margin-bottom-30 margin-bottom: 30px
.margin-top-0 margin-top: 0
.margin-top-5 margin-top: 5px
.margin-top-10 margin-top: 10px
.margin-top-15 margin-top: 15px
.margin-top-20 margin-top: 20px
.margin-top-25 margin-top: 25px
.margin-top-30 margin-top: 30px
.margin-right-0 margin-right: 0
.margin-right-5 margin-right: 5px
.margin-right-10 margin-right: 10px
.margin-right-15 margin-right: 15px
.margin-right-20 margin-right: 20px
.margin-right-25 margin-right: 25px
.margin-right-30 margin-right: 30px
.margin-left-0 margin-left: 0
.margin-left-5 margin-left: 5px
.margin-left-10 margin-left: 10px
.margin-left-15 margin-left: 15px
.margin-left-20 margin-left: 20px
.margin-left-25 margin-left: 25px
.margin-left-30 margin-left: 30px
Padding
.no-padding padding: 0
.padding-bottom-0 padding-bottom: 0
.padding-bottom-5 padding-bottom: 5px
.padding-bottom-10 padding-bottom: 10px
.padding-bottom-15 padding-bottom: 15px
.padding-bottom-20 padding-bottom: 20px
.padding-bottom-25 padding-bottom: 25px
.padding-bottom-30 padding-bottom: 30px
.padding-top-0 padding-top: 0
.padding-top-5 padding-top: 5px
.padding-top-10 padding-top: 10px
.padding-top-15 padding-top: 15px
.padding-top-20 padding-top: 20px
.padding-top-25 padding-top: 25px
.padding-top-30 padding-top: 30px
.padding-right-0 padding-right: 0
.padding-right-5 padding-right: 5px
.padding-right-10 padding-right: 10px
.padding-right-15 padding-right: 15px
.padding-right-20 padding-right: 20px
.padding-right-25 padding-right: 25px
.padding-right-30 padding-right: 30px
.padding-left-0 padding-left: 0
.padding-left-5 padding-left: 5px
.padding-left-10 padding-left: 10px
.padding-left-15 padding-left: 15px
.padding-left-20 padding-left: 20px
.padding-left-25 padding-left: 25px
.padding-left-30 padding-left: 30px
Border
.no-border border: none
.border-right border-right-style: solid; border-right-width: 1px; border-color: inherit;
.border-left border-left-style: solid; border-left-width: 1px; border-color: inherit;
.border-top border-top-style: solid; border-top-width: 1px; border-color: inherit;
.border-bottom border-bottom-style: solid; border-bottom-width: 1px; border-color: inherit;
.border-light border-color: rgba(255, 255, 255, 0.2) (border with light color)
.border-dark border-color: rgba(0, 0, 0, 0.2); (border with dark color)
Radius
.no-radius border-radius: 0
.radius-3 border-radius: 3px;
.radius-5 border-radius: 5px;
.radius-10 border-radius: 10px;
Text
.text-bold font-weight: bold;
.text-extra-small font-size: 11px
.text-small font-size: 12px
.text-extra-small font-size: 11px
.text-large font-size: 16px
.text-extra-large font-size: 18px
.text-orange color: #f58a5c;
.text-green color: #1fbba6;
.text-blue color: #5f8295;
.text-pink color: #dd5a82;
.text-purple color: #dd5a82;
.text-bricky color: #894550;
.text-yellow color: #ffb848;
.text-red color: #e66b6b;
.text-white color: white;
.text-dark color: rgba(44, 47, 59, 0.4);
.text-light color: rgba(255, 255, 255, 0.6);
.text-left text-align: left;
.text-right text-align: right;
.text-light color: rgba(255, 255, 255, 0.6);
.text-left text-align: left;
Height
.height-155 height: 155px
.height-180 height: 180px
.height-200 height: 200px
.height-230 height: 230px
.height-250 height: 250px
.height-270 height: 270px
.height-300 height: 300px
.height-350 height: 350px
.min-height-155 min-height: 155px
.min-height-180 min-height: 180px
.min-height-200 min-height: 200px
.min-height-230 min-height: 230px
.min-height-250 min-height: 250px
.min-height-270 min-height: 270px
.min-height-300 min-height: 300px
.min-height-350 min-height: 350px
Generic Classes
.inline display: inline;
.block display: block;
.inline-block display: inline-block;
.no-display display: none;
.vertical-align-top vertical-align: top
.vertical-align-middle vertical-align: middle;
.vertical-align-bottom vertical-align: bottom;
.float-none float: none;
.noTransform -o-transform: none -moz-transform: none -ms-transform: none -webkit-transform: none transform: none

Colors

You can use these colors to customize buttons, text, backgrounds and more.

Dark Primary
Primary
Light Primary
Dark Azure
Azure
Light Azure
Dark Blue
Blue
Light Blue
Dark Purple
Purple
Light Purple
Dark Red
Red
Light Red
Dark Bricky
Bricky
Light Bricky
Dark Orange
Orange
Light Orange
Dark Yellow
Yellow
Light Yellow
Dark Beige
Beige
Light Beige
Dark Green
Green
Light Green
Dark Grey
Grey
Light Grey
Info
Success
Warning
Danger
Components and Plugins

Plugins

jQuery

Core Javascript library

Official Documentation

Twitter Bootstrap v3.x

Sleek, intuitive, and powerful front-end framework for faster and easier web development

Official Documentation

Font Awesome

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

Official Documentation

Modernizr

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

Official Documentation

Moment.js

Parse, validate, manipulate, and display dates in JavaScript.

Official Documentation

perfect-scrollbar

Tiny but perfect jQuery scrollbar plugin.

Official Documentation

Masked Input Plugin

It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc).

Official Documentation

Datepicker for Bootstrap

Add datepicker picker to field or to any other element.

Official Documentation

Bootstrap Timepicker

Easily select a time for a text input using your mouse or keyboards arrow keys.

Official Documentation

Bootstrap date-time Picker

Add date-time picker to field or to any other element.

Official Documentation

Nestable jQuery Plugin

Nestable is an interactive hierarchical list. You can drag and drop to rearrange the order. It even works well on touch-screens.

Official Documentation

jsTree

jsTree is jquery plugin, that provides interactive trees.

Official Documentation

DataTables

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table

Official Documentation

Smart Wizard

Smart Wizard is a flexible jQuery plug-in for wizard like interface. It allows to group contents into sections and so it saves page space and also gives a neat and stylish interface for users.

Official Documentation

jQuery Validation

This jQuery plugin makes simple clientside form validation easy, whilst still offering plenty of customization options.

Official Documentation

Jcrop

Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

Official Documentation

jQuery File Upload

File Upload widget with multiple file selection, drag&drop support, progress bars, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing.

Official Documentation

jQuery Autosize

A plugin to automatically adjust textarea height.

Official Documentation

Select2

Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results

Official Documentation

Ladda

Buttons with built-in loading indicators.

Official Documentation

FullCalendar

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop event calendar like the one below. It uses AJAX to fetch events on-the-fly and is easily configured to use your own feed format. It is visually customizable with a rich API.

Official Documentation

Sweet Alert

A beautiful replacement for Javascript's "Alert"

Official Documentation

Chart.js

Simple, clean and engaging charts for designers and developers

Official Documentation

jQuery Sparklines

This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript. .

Official Documentation

Changelog Entries

version 2.1 - Nov 11, 2015

  • NEW Angular Notification Icons

    Add notification popups to any element.

  • UPGRADE AngularJS and Related Extras

    Version 1.4.7

  • UPGRADE Angular UI Bootstrap

    Version 0.14.3

  • UPGRADE Angular-aside

    Version 1.3.0

  • FIXED CSS Bug in the main menu in Safari browser

    AngularJs Version and HTML Version

  • FIXED Bug in message search

    AngularJs Version

  • FIXED Optimizing the process of printing pages

    AngularJs Version and HTML Version

  • FIXED Improvements & Minor Bug Fixes

    AngularJs Version and HTML Version

version 2.0 - Sep 15, 2015

  • NEW Dynamic Tables

    Rremove/delete a table row dynamically

  • NEW Css3 Select Boxes with dynamic options

    Angularjs - dynamic ng-options.

  • NEW HTML5 Frontend Version

    Bootstrap based Powerful Template

    • HTML5 and CSS3
    • Bootstrap 3
    • 40+ Fully responsive HTML template files
    • Grid System and Responsive Design
    • Touch Swipe Support
    • Multi-column "mega-menu"
    • Mobile Optimization

  • UPGRADE AngularJS and Related Extras

    Version 1.4.x

  • UPGRADE Angular UI Router

    Version 0.2.15

  • UPGRADE Angular UI Bootstrap

    Version 0.13.3

  • UPGRADE Angular Translate

    Version 2.7.2

  • UPGRADE V-Accordion

    Version 1.2.7

  • FIXED bug in the closed sidebar

version 1.3.1 - Mar 27, 2015

  • FIXED scroll issue in small devices

version 1.3 - Mar 26, 2015

  • NEW Grunt build steps

    Grunt is a "JavaScript Task Runner". "Tasks" are small file operations that you might want to do as a front-end developer or designer when you build a website. For instance, once you are done programming your CSS you might want to concatenate all your files so that you only have one file to serve as you go live.

  • NEW Bower dependency management

    Bower is a package manager for client side technologies. It can be used to search , install, uninstall web assets like JavaScript, HTML, and CSS.

  • UPGRADE Change folder name and references

    The folder "vendor", which contained all the dependencies, now called "bower_components"

  • UPGRADE AngularJS and Related Extras

    Version 1.3.15

  • FIXED Improvements & Minor Bug Fixes

version 1.2 - Mar 14, 2015

  • NEW

    HTML version

    Clip-Two HTML Version with Bootstrap 3 & jQuery

    View

  • NEW

    Right To Left HTML version

    Clip-Two HTML Version RTL with Bootstrap 3 & jQuery

    View

  • FIXED

    Improvements & Minor Bug Fixes

version 1.1 - Feb 25, 2015

  • NEW

    Chat Directive

    An AngularJS Chat Directive exclusively for Clip-Two
    N.b. for best performance from version 1.0 you must replace style.css (assets/css/style.css) and _chat.scsss (master/sass/partials/_chat.scsss)

    Open off-sidebar for demo and click a name in the list.

  • NEW

    RTL version of Clip-Two

    RTL is the writing system known as right-to-left (RTL) in which script runs from the right-hand side of a page and concludes on the left-hand side, such as in Arabic, Hebrew and Urdu.

    View

  • NEW

    X-Editable Elements

    Angular-xeditable is a bundle of AngularJS directives that allows you to create editable elements. Such technique is also known as click-to-edit or edit-in-place.

    View

  • UPGRADE

    AngularJS and Related Extras

    Version 1.3.13

  • UPGRADE

    UI Bootstrap

    Version 0.12.1

  • FIXED

    Mouse wheel scroll problem in IE

    From version 1.0 you must replace style.css (assets/css/style.css) and _top-navbar.scsss (master/sass/partials/layout-elements/_top-navbar.scsss)

  • FIXED

    Improvements & Minor Bug Fixes