CLIP TWO FRONTEND DOCUMENTATION

Getting Started

What is Clip-Two Frontend?

Clip-Two Frontend is an advanced, responsive multipurpose HTML5 template built with Bootsrap. This template is mobile friendly and ready for you to customize it any way you want to use it.

Installation

To get started with Clip-Two Frontend Template follow the steps below:

1. Download the latest version of Clip-Two
2. Extract the Front-End Folder to your computer
3. Upload all files and folders as listed below to your web directory via FTP
4. Make sure you upload the required files/folders listed below (don't upload the master folder):
   • HTML/bower_components - jQuery plugins Folder
   • HTML/assets/css - Custom style sheet and layout Folder
   • HTML/assets/images - Images Folder
   • HTML/assets/js - Javacripts Folder
   • HTML/index.html - Home-Page and other site html pages
5. Start adding your Content and show off your Brand New Beautiful Website in style
6. Enjoy

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.

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 .

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.

Example: Mobile, tablet, desktop

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

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.

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).

CSS Utilities

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

Colors

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

Animation Elements

Animate elements when they appear on the screen

To animate an element when it appears on the screen, the thing to do is very simple:

1. Select the desired animation from the following classes:
   • bounce
   • flash
   • pulse
   • rubberBand
   • shake
   • swing
   • tada
   • wobble
   • bounceIn
   • bounceInDown
   • bounceInLeft
   • bounceInRight
   • bounceInUp
   • bounceOut
   • bounceOutDown
   • bounceOutLeft
   • bounceOutRight
   • bounceOutUp
   • fadeIn
   • fadeInDown
   • fadeInDownBig
   • fadeInLeft
   • fadeInLeftBig
   • fadeInRight
   • fadeInRightBig
   • fadeInUp
   • fadeInUpBig
   • fadeOut
   • fadeOutDown
   • fadeOutDownBig
   • fadeOutLeft
   • fadeOutLeftBig
   • fadeOutRight
   • fadeOutRightBig
   • fadeOutUp
   • fadeOutUpBig
   • flip
   • flipInX
   • flipInY
   • flipOutX
   • flipOutY
   • lightSpeedIn
   • lightSpeedOut
   • rotateIn
   • rotateInDownLeft
   • rotateInDownRight
   • rotateInUpLeft
   • rotateInUpRight
   • rotateOut
   • rotateOutDownLeft
   • rotateOutDownRight
   • rotateOutUpLeft
   • rotateOutUpRight
   • hinge
   • rollIn
   • rollOut
   • zoomIn
   • zoomInDown
   • zoomInLeft
   • zoomInRight
   • zoomInUp
   • zoomOut
   • zoomOutDown
   • zoomOutLeft
   • zoomOutRight
   • zoomOutUp

2. Add the following code to the item you want to animate:

   <div data-appears-class="bounceIn" data-appears-delay="300">...</div>

   The data-appears-delay attribute allows you to use delay in milliseconds for the animation

To animate a group of elements in a row, however, proceed as follows:

1. Enclose the elements you want to animate in a tag like this:

   <div data-appears-group-delay="0" data-appears-delay-increase="300">...</div>

   The data-appears-group-delay attribute allows you to use delay in milliseconds for all the animations within the tag

   The data-appears-delay-increase attribute allows you to set the delay to be added consecutively to all elements within the tag.

2. Inside the tag, add the attribute data-appears-class to the elements to be animated:

   <div data-appears-group-delay="0" data-appears-delay-increase="300">
   <div data-appears-class="fadeIn">...</div>
   <div data-appears-class="fadeIn">...</div>
   ...
   </div>

Changelog Entries

version 2.2 - July 6, 2016

• NEW Angular Spectrum Colorpicker

  This module bases on the spectrum color picker and can be embedded in any angular project via dependency injection

• UPGRADE AngularJS and Related Extras

  Version 1.5.7

• UPGRADE Angular UI Bootstrap

  Version 1.3.3

• FIXED Improvements & Minor Bug Fixes

  AngularJs Version and HTML Version

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"

• 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)

• 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.

• 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.

• 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