Skapp Documentation

Introduction


Thank you for purchasing Skapp HTML Template. Before you get started, please be sure to always check out these documentation files.
If you are unable to find your answer here in the documentation, please contact me directly from my themeforest account.

All images are just used for preview purpose only and not included in the final purchase files.


Please don't forget to rate 5 stars and leave a nice review, it means a lot for me.
Thanks !

Saerox

HTML Files


  • Homepages
  • - homepage-01.html
  • - homepage-02.html
  • - homepage-03.html
  • - homepage-04.html
  • - homepage-05.html
  • - homepage-06.html
  • Blog
  • - blog-grid-full-width.html
  • - blog-grid-left-sidebar.html
  • - blog-grid-right-sidebar.html
  • - blog-list-full-width.html
  • - blog-list-left-sidebar.html
  • - blog-list-right-sidebar.html
  • - blog-single-post-full-width.html
  • - blog-single-post-image.html
  • - blog-single-post-slideshow.html
  • - blog-single-post-video.html
  • - blog-timeline-full-width.html
  • - blog-timeline-left-sidebar.html
  • - blog-timeline-right-sidebar.html

CSS Files


  • Core ( For all pages )
  • ../assets/css/core/
  • - animate.css
  • - bootstrap.css
  • - font-awesome.css
  • - main.css
  • Homepages
  • ../assets/css/homepages/
  • - homepage-01.css
  • - homepage-02.css
  • - homepage-03.css
  • - homepage-04.css
  • - homepage-05.css
  • - homepage-06.css
  • Blog
  • ../assets/css/pages/
  • - blog.css

Javascript Files


  • Core ( For all pages )
  • ../assets/js/core/
  • - jquery-3.1.1.min.js
  • - bootstrap.js
  • - jquery.easing.min.js
  • - main.js
  • Pages
  • ../assets/js/pages/
  • - blog.js
  • - homepage-01.js
  • - homepage-02.js
  • - homepage-03.js
  • - homepage-04.js
  • - homepage-05.js
  • - homepage-06.js

Section Title


Centered Section Title

Section Title

                                    
<div class="section-title">
    <h2>Section Title</h2>
</div>
                                    
                                

Align Left Section Title

Section Title

                                    
<div class="section-title-01">
    <h2>Section Title</h2>
</div>
                                    
                                

Add Gradient

Example with span tag

                                    
<div class="section-title-01">
    <h2>Section Title <span class="gradient-text-01">With Gradient</span></h2>
</div>
                                    
                                

Section Title With Gradient

.gradient-text

Section Title With Gradient

.gradient-text-01

Section Title With Gradient

.gradient-text-02


Add Subtitle

                                    
<div class="section-title-01">
    <div class="subtitle">Subtitle</div>
    <h2>Section Title</h2>
</div>
                                    
                                
Subtitle

Section Title

Divider


Centered Divider


<hr class="hr-title">

Centered Divider With Gradient


<hr class="hr-title-01">

Centered Divider With Icon


<hr class="hr-title hr-icon">

Divider Gradient 01


<hr class="hr-title-02">

Divider Gradient 02


<hr class="hr-title-03">

Centered Divider Gradient 02


<hr class="hr-title-04">

Animations


Section Title Animate


                                    
<div class="section-title-01 os-animation" data-os-animation="zoomInDown">
    <h2>Section Title <span class="gradient-text-02">Animate</span></h2>
</div>
<hr class="hr-title-03 os-animation" data-os-animation="zoomInLeft" data-os-animation-delay="0.4s">
                                    
                                

Visit https://daneden.github.io/animate.css/ for more.

Add the class .os-animation to the element you want to animate.

Add animation data-os-animation="fadeIn".

Choose delay data-os-animation-delay="0.4s".

Enjoy !


Example <div class="anime-me os-animation" data-os-animation="fadeIn" data-os-animation-delay="0.4s">

Infinite Animations

Example <div class="mockup animated infinite bounce>

  • Available classes
  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • swing
  • tada
  • wobble

Example With Section Title

Section Title Bounce Animation

<div class="animated infinite bounce>

Section Title Flash Animation

<div class="animated infinite flash>

Section Title Pulse Animation

<div class="animated infinite pulse>

Section Title RubberBand Animation

<div class="animated infinite rubberBand>

Section Title Shake Animation

<div class="animated infinite shake>

Section Title Swing Animation

<div class="animated infinite swing>

Section Title Tada Animation

<div class="animated infinite tada>

Section Title Wobble Animation

<div class="animated infinite wobble>

Other


Font Awesome Icon

Visit http://fontawesome.io/cheatsheet/ for cheatsheet.

Example <i class="fa fa-icon-name"></i>

Changelog


Version 1.3 (2017-06-18)

- New: added login page
- New: added register page
- Fixed: some minor bugs

Version 1.2.1 (2017-05-18)

- New: added EU cookie law plugin

Version 1.2 (2017-05-15)

- New: added coming soon page
- New: added boxed layout homepage
- New: added new logo style
- Updated: documentation
- Updated: main css file

I recommend that you update the entire template folder.

Version 1.1.1 (2017-05-13)

- New: add button go to top
- New: interactive background plugin replaced by parallax background
- New: added minified css file for 404 pages
- Updated: main js file
- Updated: main css file
- Css code cleanup

I recommend that you update the entire template folder and remove interactive-background folder.

Version 1.1 (2017-05-10)

- New: added 404 page (interactive background)
- New: added 404 page (slideshow background)
- New: added 404 page (ripples effect)
- New: added new header color
- New: added new buttons styles
- New: added ripples plugin
- New: added interactive background plugin
- Updated: documentation
- Updated: main.css
- SEO Optimization

Version 1.0.2 (2017-05-07)

- Added: all css files are minified
- Updated: homepage-06.js
- Updated: main.css
- Fixed: a bug with owl carousel full screen on mobile devices
- Fixed: a bug with timeline on mobile devices
- Fixed: some minor bugs

Version 1.0.1 (2017-05-06)

- Updated: typed plugin to the latest version
- Fixed: some minor bugs

Version 1.0 (2017-05-01)

- First Release!