Documentation
Getting started with ClipTwo is easy. Whether you are a master of Sass, building a new app, or making your existing site responsive, we've got you covered.What is ClipTwo?
ClipTwo is an advanced, responsive dashboard template built with Bootstrap. 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 4 documentation
Getting Started
Install Compass
WINDOWS
Install Ruby rubyinstaller.org/downloads
Open MS-DOS prompt with Ruby
Install Gem
$ gem update –system
$ gem install compass-
Check if compass is properly installed and run the command
$ compass -v
OS X / LINUX
For Linux and OS X folks, depending on your setup, you may or may not need to install gems under thesudo user.
Ok, I know what you're thinking. I just said that we are going to install Sass, but at the same time I just told you to install Compass based on that directive. The truth is that Compass requires Sass and, when you run that command, you should see something like this: $ sudo gem install compass
Install Node.js
To install Node.js you need to download the application directly from the manufacturer nodejs.org and continue with the installation.
Install Gulp
Gulp and its plugins are installed and managed via npm, the Node.js package manager.
gulp v4.0.0
npm install gulp@next
Install Bower
Bower is a command line utility. Install it with npm.
$ npm install -g bower
Bower requires Node.js, npm and git link to dowload: git-scm.com.
Run theme
- Open command prompt
- type:
cd c:\folder-thme - run the command:
gulp run:server
shows the theme built in the folder theme_build
Task to build the theme
Build theme in theme_build
gulp build --prod
Inject partial html and build html pages
gulp build --html
Build SASS files, concatenate CSS files and inject partial html and build html pages
gulp build --css
To concatenate the downloaded libraries and inject partial html and build html pages
gulp build --js
Template Structure
This template has a fixed structure, including the following elements:
- TopBar (Header)
- Sidebar (with Main Navigation Menu)
- Sliding Right Sidebar
- Content
- Footer
Configurations
Setup Theme
6 different color schemes are available on ClipTwo. 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"> ...
- 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 ClipTwo default settings. Yet, if you would like to change these settings, please, proceed as follows:
app-navbar-fixed
to the
#app
div
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 ClipTwo default settings. Yet, if you would like to change these settings, please, proceed as follows:
app-sidebar-fixed
to the
#app
div
ClipTwo CSS
Getting Started With ClipTwo CSS
ClipTwo uses Bootstrap CSS that provides global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.
The Grid
While Bootstrap uses ems or rems for defining most sizes, pxs are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size.
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
|
Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra large ≥1200px |
|
|---|---|---|---|---|---|
| Max container width | None (auto) | 540px | 720px | 960px | 1140px |
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| # of columns | 12 | ||||
| Gutter width | 30px (15px on each side of a column) | ||||
| Nestable | Yes | ||||
| Column ordering | Yes | ||||
Auto-layout columns
Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like .col-sm-6.
Equal-width
For example, here are two grid layouts that apply to every device and viewport, from xs to xl. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
Equal-width columns can be broken into multiple lines, but there was a Safari flexbox bug that prevented this from working without an explicit flex-basis or border. There are workarounds for older browser versions, but they shouldn’t be necessary if you’re up-to-date.
Setting one column width
Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.
Variable width content
Use col-{breakpoint}-auto classes to size columns based on the natural width of their content.
Equal-width multi-row
Create equal-width columns that span multiple rows by inserting a .w-100 where you want the columns to break to a new line. Make the breaks responsive by mixing the .w-100 with some responsive display utilities.
Responsive classes
Bootstrap’s grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.
All breakpoints
For grids that are the same from the smallest of devices to the largest, use the .col and .col-* classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to .col.
Stacked to horizontal
Using a single set of .col-sm-* classes, you can create a basic grid system that starts out stacked before becoming horizontal with at the small breakpoint (sm).
Mix and match
Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.
CSS Utilities
In addition to the default bootstrap css, ClipTwo 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.
Components and Plugins
Plugins
jQuery
Core Javascript library
Bootstrap
Build responsive, mobile-first projects on the web with the world's most popular front-end component library. Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
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.
Modernizr
Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
Moment.js
Parse, validate, manipulate, and display dates in JavaScript.
Animate.css
Just-add-water CSS animations
Themify Icons
Themify Icons is a complete set of icons for use in web design and apps, consisting of 320+ pixel-perfect, hand-crafted icons that draw inspiration from Apple iOS 7 - available to the public, 100% FREE! You may use or distribute it for any purpose, whether personal or commercial. This icon set is a must have tool for web designers and developers.
perfect-scrollbar
Minimalistic but perfect custom scrollbar plugin
Chart.js
Simple yet flexible JavaScript charting for designers & developers
Sweet Alert
A beautiful replacement for warning modals
DataTables
Add advanced interaction controls to your HTML tables the free & easy way
Select2
The jQuery replacement for select boxes
CKEditor 4
The battle-tested WYSIWYG HTML editor, when you need even more features and legacy compatibility.
FullCalendar
A JavaScript event calendar. Customizable and open source.
