Appkit

Thank you for purchasing Appkit and the confidence you have placed in Dart Simple Solutions.

In this document, you will find an in-depth description of all Appkit's features and functionality. If you have any questions not attended to by our template documentation, please contact us so our team can assist you. If you like our template, please leave your feedback and join us on Facebook or your other favorite social network! We are looking forward to hearing back from you, and to improving further this and many other templates in our portfolio.

Online documentation is updated regularly and is available online to you free of charge on our website at http://doc.dartsimple.com/appkit

Developer website: http://www.dartsimple.com

Customer service: http://www.dartsimple.com/contact-us/

 

 

Key Features

  • Awesome unique look - make your site stand out from the crowd!
  • 3 unique variations with different features and cool UI elements
  • Gorgeous animation for most memorable user experience
  • 100% responsive – perfect for any device
  • Tested on real devices
  • Flexible customization with many options for every section
  • Flat, modern and clean design
  • Social links
  • Clean & well-commented code
  • Built with Bootstrap 3
  • Valid HTML5 & CSS3 files
  • Full cross-browser compatibility
  • Google fonts

What you will Get with this template

  • 3 Unique Landing Page Variations
  • 5 Main Screen Options
  • 3 Layouts for Features Screen
  • 2 Product Details Layouts
  • 2 Product Demo Options
  • Built-In or Vimeo Video Modules
  • 3 Testomials Layouts
  • 3 Html Files
  • 3 Main Banner Layout
  • 3 Testimonials Layout
  • 4 Color Schemes

About the theme

Appkit is a multipurpose landing page template specially designed to help you showcase your mobile app. It's loaded with a ton of design options, layouts and a diverse UI kit to ensure quick and easy customization that matches your unique brand and style.

Folder Structure

Project structure was carefully thought all throughout early on in the planning stage to ensure  logical flow of all parts. Complete list of all project-related folders, files and documents can be found below.

Documentation/
Name Your Template/
├──assets/
│└──font/
│	└──helvetica-neue-bold
│	└── *.eot, *.svg, *.ttf, *.woff, *.woff2
│	└──helvetica-neue-heavy
│	└── *.eot, *.svg, *.ttf, *.woff, *.woff2
│	└──helvetica-neue-light
│	└── *.eot, *.svg, *.ttf, *.woff, *.woff2
│	└──helvetica-neue-medium
│	└── *.eot, *.svg, *.ttf, *.woff, *.woff2
│	└──helvetica-neue-roman
│	└── *.eot, *.svg, *.ttf, *.woff, *.woff2
│	└──helvetica-neue-thin
│	└── *.eot, *.svg, *.ttf, *.woff, *.woff2
│	└──helvetica-neue-ultralight
│	└── *.eot, *.svg, *.ttf, *.woff, *.woff
│└──icons/
│	└── *.svg, *.png
│└──plugins/
│	└──animate.css
│	└──animate.css
│	└──bootstrap-grid-only
│	└──css
│	└──grid12.css
│	└──jquery
│	└──dist
│	└──jquery.js
│	└──jquery-aniview
│	└──dist
│	└──jquery.aniview.js
│	└──jquery-migrate
│	└──jquery-migrate.js
│	└──jquery-validation
│	└──dist
│	└──jquery.validate.min.js
│	└──normalize-css
│	└──normalize.css
│	└──slick-carousel
│	└──slick
│	└──slick.min.js
│	└──slick.css
│	└──vivus
│	└──dist
│	└──vivus.min.js
│└──sliders/
├──css/
│└──min.css
│└──custom.css
├──images/
│└──banner-1/
│	└──*.png
│└──banner-2/
│	└──*.png
│└──banner-3/
│	└──*.png
│└──temp/
│	└──*.jpg, *.png
│└── *.png, *.ico
├──js/
│└──min.js
│└──ds-scripts.js
│└──ds-custom.js
├──scss/
│└──components/
│	└──*.scss
│└──themes/
│	└──*.scss
│└──template.scss
├──video/
│└── *.mp4, *.webm
├──variation-1.html
├──variation-2.html
├──variation-3.html

 

Project Folders

Folder Name

Description

assets

Stores all included files like fonts, icons, plugins.

css

Stores all .css files generated from .scss files and custom.css.

images

Stores all images.

js

Stores min.js file minified from all plugins, ds-scripts.js and custom.js.

scss

Stores all .scss files.

video

Stores all video files.

HTML Structure

Markup Customization

The HTML structure of all our projects is split in logically organized sections that are easy to navigate. Below you will find listed each HTML section, starting from Header and ending with Footer, referencing the list of customizable settings available for each of them. In cases where additional options or settings are not provided by any given section's customization concept - HTML code and its structure is somewhat simplified. Given intuitive and logical flow of our code, you will be able to further adjust and customize it further with basic knowledge of HTML, CSS, JS.

Appkit Template follows an easy-to-use method of customization via HTML classes, so you can quickly tweak the code and adjust the appearance of your website. All customizable elements, relevant snippets of code and classes to be adjusted are listed below for your convenience.

<header class="ds-header ds-header_fixed">
<div class="container">
<div class="ds-header-inner" id="headerMain">
<div class="ds-header-left">
<a class="ds-header-logo" href="/" title="Logo"></a>
</div><!-- /.ds-header-left -->
<nav class="ds-header-middle">
<ul class="ds-header-menu">
<li>
<a href="#section">Section</a>
</li>
</ul>
</nav><!-- /.ds-header-middle -->
<div class="ds-header-right">
<ul class="ds-social ds-social_grey">
<li>
<a href="#">
<svg></svg>
</a>
</li>
</ul>
</div><!-- /.ds-header-right -->
</div><!-- /.ds-header-inner -->
</div><!-- /.container -->
<a class="ds-mobile-menu" href="#headerMain">
<span class="ds-mobile-menu-bar ds-mobile-menu-bar_top"></span>
<span class="ds-mobile-menu-bar ds-mobile-menu-bar_middle"></span>
<span class="ds-mobile-menu-bar ds-mobile-menu-bar_bottom"></span>
</a>
</header>

Classes

Available Settings

Description

class="ds-headerds-header_fixed"

ds-header, ds-header_fixed

ds-header  – Displays header.

ds-header_fixed – Fixed header on top page.

class="ds-header-inner"

ds-header-inner

ds-header-inner – Contains all dropdown’s content on tablet and mobile devices.

class="ds-header-left"

ds-header-left

ds-header-left – Floating to the left logo section.

class="ds-header-logo"

ds-header-logo

ds-header-logo  – Displays logo.

class="ds-header-middle"

ds-header-middle

ds-header-middle  – Centered menu.

class="ds-header-menu"

ds-header-menu

ds-header-menu  – Displays menu.

class="ds-header-right"

 

ds-header-right – Floating to the right socialmedia section.

class="ds-social ds-social_grey"

ds-social, ds-social_grey, ds-social_white

ds-social – Displays socialmedia

ds-social_grey – Changes color scheme to the grey.

ds-social_white – Changes color scheme to the white.

class="ds-mobile-menu"

ds-mobile-menu

ds-mobile-menu – Displays mobile menu button on tablet and mobile devices.

class="ds-mobile-menu-bar ds-mobile-menu-bar_top"

ds-mobile-menu-bar, ds-mobile-menu-bar_top, ds-mobile-menu-bar_middle, ds-mobile-menu-bar_bottom

ds-mobile-menu-bar – Displays mobile menu’s button bar.

ds-mobile-menu-bar_top – Aligns mobile menu’sbutton bar to the top.

ds-mobile-menu-bar_middle – Aligns mobile menu’sbutton bar to the middle.

ds-mobile-menu-bar_top – Aligns mobile menu’sbutton bar to the bottom.

Services Section

<div class="ds-services-body">
<div class="row">
<div class="col-md-3">
<a class="ds-service" href="#">
<div class="ds-service__icon">
<svg></svg>
</div><!-- /.ds-service__icon -->
<h3 class="ds-service__title">Title</h3>
<p class="ds-service__txt hidden-xs">Description</p>
</a><!-- /.ds-service -->
</div><!-- /.col-md-3 -->
</div><!-- /.row -->
</div><!-- /.ds-services-body -->

Classes

Available Settings

Description

class="ds-service"

ds-service

ds-service  – Display service item.

class="ds-service__icon"

ds-service__icon

ds-service__icon – Display service’s icon.

class="ds-service__title"

ds-service__title

ds-service__title – Display service’s title.

class="ds-service__txt"

ds-service__txt

ds-service__txt – Display service’s description.

class="ds-service-body"

ds-service-body

ds-service-body – Display services list.

Features Section

<div class="container">
<div class="row">
<div class="col-md-3 col-md-offset-1">
<div class="ds-features-image">
	<img alt="Image"class="ds-mx-w-39x--xs" src="images/temp/image.png">
</div><!-- /.ds-features-image -->
</div><!-- /.col-md-3 -->
<div class="col-md-8">
<div class="ds-features-header hidden-sm hidden-xs">
<h2>Title</h2>
<p>Text</p>
</div><!-- /.ds-features-header -->
<div class="ds-features-body">
<div class="row">
<div class="col-md-6">
<div class="ds-feature">
<div class="ds-feature-left">
<div class="ds-feature__icon">
<svg></svg>
</div><!-- /.ds-feature__icon -->
</div><!-- /.ds-feature-left -->
<div class="ds-feature-middle">
<h3 class="ds-feature__title">Title</h3>
<p class="ds-feature__txt">Description</p>
</div><!-- /.ds-feature-middle -->
</div><!-- /.ds-feature -->
</div><!-- /.col-md-6 -->
</div><!-- /.row -->
</div><!-- /.ds-features-body -->
</div><!-- /.col-md-8 -->
</div><!-- /.row -->
</div><!-- /.container -->

Classes

Available Settings

Description

class="ds-features-header"

ds-features-header

ds-features-header – Display feature’s header.

class="ds-features-body"

ds-features-body

ds-features-body  – Display feature’s body.

class="ds-feature"

ds-feature

ds-feature  – Display single feature.

class="ds-feature-left"

ds-feature-left

ds-feature-left  – Feature’s left section.

class="ds-feature__icon"

ds-feature__icon

ds-feature__icon – Display feature’s icon.

class=" ds-feature__txt"

ds-feature__txt

ds-feature__txt – Display feature’s description.

 

class="ds-feature-middle"

ds-feature-middle

ds-feature-middle – Features’s middle section.

class=" ds-feature__title"

ds-feature__title

ds-feature__title – Display feature title.

Product Specifications Section

<div class="ds-product-with-specs ds-product-with-specs_third-type">
<div class="ds-product-with-specs__txt ds-product-with-specs__txt_left ds-product-with-specs__txt_top">
<h2 class="ds-product-with-specs__title">Title</h2>
<h3 class="ds-product-with-specs__sub-title">Sub-title</h3>
<ul>
<li>List item</li>
</ul>
<svg class="ds-product-with-specs__line"></svg>
</div><!-- /.ds-product-with-specs__txt_left -->
<div class="ds-product-with-specs__image">
<img alt="Image" class="ds-mx-w-39x--xs" src="images/temp/image.png">
</div><!-- /.ds-product-with-specs__image -->
</div><!-- /.ds-product-with-specs -->

Classes

Available Settings

Description

class="ds-product-with-specs ds-product-with-specs_third-type"

ds-product-with-specs, ds-product-with-specs_second-type, ds-product-with-specs_third-type

ds-product-with-specs  – Display product with specifications.

ds-product-with-specs_second-type – Change default layout.

ds-product-with-specs_third-type – Change default layout.

class="ds-product-with-specs__txt ds-product-with-specs__txt_left ds-product-with-specs__txt_top"

ds-product-with-specs__txt, ds-product-with-specs__txt_left, ds-product-with-specs__txt_right, ds-product-with-specs__txt_top, ds-product-with-specs__txt_bottom

ds-product-with-specs__txt – Display product’s description.

ds-product-with-specs__txt_left – Positioning product’s description to the left.

ds-product-with-specs__txt_right – Positioning product’s description to the right.

ds-product-with-specs__txt_top – Positioning product’s description to the top.

ds-product-with-specs__txt_bottom – Positioning product’s description to the bottom.

class="ds-product-with-specs__title"

ds-product-with-specs__title

ds-product-with-specs__title – Display title.

class="ds-product-with-specs__sub-title"

ds-product-with-specs__sub-title

ds-product-with-specs__sub-title  – Display sub-title.

class="ds-product-with-specs__line"

ds-product-with-specs__line

ds-product-with-specs__line– Display animated line.

class="ds-product-with-specs__image"

ds-product-with-specs__image

ds-product-with-specs__line  – Display product’s image.

3 Elements Сarousel (Product Details Section)

<div class="ds-three-elements-centered-item-carousel">
<div class="carousel-init">
<div class="slide">
<div class="screends-screen_second-type">
<div class="ds-screen__image">
<img alt="Image" src="images/temp/image.jpg">
</div><!-- /.ds-screen__image -->
<div class="ds-screen__title">Title</div><!-- /.ds-screen__title -->
</div><!-- /.screen -->
</div><!-- /.slide -->
</div><!-- /.carousel-init -->
</div><!-- /.ds-three-elements-centered-item-carousel -->

Classes

Available Settings

Description

class="ds-three-elements-centered-item-carousel"

ds-three-elements-centered-item-carousel, ds-three-elements-carousel

ds-three-elements-centered-item-carousel  – Displayscarousel with zoomed and centered slide.

ds-three-elements-carousel  – Displays carousel with 3 slides.

class="carousel-init"

carousel-init

carousel-init – Carousel initialization.

class="slide"

slide

slide – Single slide.

class="screends-screen_second-type"

screen, ds-screen_second-type

screen  – Display screen.

ds-screen_second-type  – Change default layout.

class="ds-screen__image"

ds-screen__image

ds-screen__image  – Screen’s image container.

class="ds-screen__title"

ds-screen__title

ds-screen__title  – Display screen’s title.

Video Section (Product Demo Section)

<div class="ds-video-full">
<video height="100%" id="bgVideo" width="100%">
<source src="video/video.webm" type="video/webm">
<source src="video/video.mp4" type="video/mp4">
</video>
<div class="ds-video-banner__content">
<div class="ds-pos_abs ds-top_100 ds-w-100x">
<h2>Title</h2>
</div><!-- /.ds-va_middle -->
</div><!-- /.ds-video-banner__content -->
<div class="ds-video__play-pause is-played">
<svg data-name="Pause"></svg>
<svg data-name="Play"></svg>
</div><!-- /.ds-video__play-pause -->
<div class="ds-video__volume is-muted">
<svg data-name="Muted"></svg>
<svg data-name="Unmuted"></svg>
</div><!-- /.ds-video__volume -->
<div class="ds-video__play">
<svg data-name="Play"></svg>
<svg data-name="Restart"></svg>
</div><!-- /.ds-video__play -->
</div><!-- /#bgVideo -->

Classes

Available Settings

Description

class="ds-video-full"

ds-video-full,ds-video-responsive

ds-video-full  – Displays full width video.

ds-video-responsive  – Displays responsive video.

class="ds-video-banner__content"

ds-video-banner__content

ds-video-banner__content  – Displays banner’s content (title, short description).

class="ds-video__play-pause is-played"

ds-video__play-pause, is-played

ds-video__play-pause  – Displays play/pause button.

is-played  – Boolean class. If has video is played.

class="ds-video__volume is-muted"

ds-video__volume, is-muted

ds-video__volume  – Displays mute/unmute button.

is-muted  – Boolean class. If has volume off.

class="ds-video__play"

ds-video__play

ds-video__play  – Display start play/restart button.

Pricing Section

<div class="ds-plans-body">
<div class="row">
<div class="col-md-4">
<div class="ds-plan ds-plan_special">
<h3 class="ds-plan__title">Title</h3>
<div class="ds-plan__price">
<span class="ds-plan__price__currency">$</span>
	<span>0.99</span>
	<span class="ds-plan__price__period">/mounth</span>
</div><!-- /.ds-plan__price -->
<ul class="ds-plan__features">
<li>4 TB Storage</li>
<li>8 GB RAM</li>
<li>Unlimited Bandwidth</li>
</ul>
	<a class="ds-btn ds-btn_md" href="#">
	<span class="ds-btn__txt">Text</span>
	</a>
</div><!-- /.ds-plan -->
</div><!-- /.col-md-4 -->
</div><!-- /.row -->
</div><!-- /.ds-plan-body -->

Classes

Available Settings

Description

class="ds-plans-body"

ds-plans-body

ds-plans-body – Contains all plan’s items.

class="ds-plands-plan_special"

ds-plan, ds-plan_special

ds-plan  – Displays plan.

ds-plan_special  – Adds special style to the centered plan.

class="ds-plan__title"

ds-plan__title

ds-plan__title  – Displays plan’s title.

class="ds-plan__price"

ds-plan__price

ds-plan__price  – Displays mute/unmute button.

class="ds-plan__price__currency"

ds-plan__price__currency

ds-plan__price__currency – Adds special styles to the  currency sign.

class="ds-plan__features"

ds-plan__features

ds-plan__features – Displays plan’s features.

Ratings Segment

<ul class="ds-rating">
<li class="active">
<svg></svg>
</li>
<li>
<svg></svg>
</li>
<li>
<svg></svg>
</li>
<li>
<svg></svg>
</li>
<li>
<svg></svg>
</li>
</ul>

Classes

Available Settings

Description

class="ds-rating"

ds-rating

ds-rating – Displays rating.

class="active"

active

active  – Filled rating items.

Testimonials Section

<div class="ds-testimonialds-testimonial_third-type">
<div class="ds-testimonial__ava">
<img alt="Image" src="images/temp/image.jpg">
</div><!-- /.ds-testimonial__ava -->
<div class="ds-testimonial__content">
<div class="ds-testimonial__content-inner">
<div class="ds-testimonial__content__header">
<h4 class="ds-testimonial__name">Name</h4>
<ul class="ds-rating">
<li class="active">
<svg></svg>
</li>
<li class="active">
<svg></svg>
</li>
<li class="active">
<svg></svg>
</li>
<li class="active">
<svg></svg>
</li>
<li>
<svg></svg>
</li>
</ul>
</div><!-- /.ds-testimonial__content__header -->
<p class="ds-testimonial__txt">Testimonial</p>
</div><!-- /.ds-testimonial__content-inner -->
</div><!-- /.ds-testimonial__content -->
</div><!-- /.ds-testimonial -->

Classes

Available Settings

Description

class="ds-testimonialds-testimonial_third-type"

ds-testimonial, ds-testimonial_second-type, ds-testimonial_third-type

ds-testimonial  – Displays testimonial.

ds-testimonial_second-type  – Change default layout.

ds-testimonial_third-type  – Change default layout.

class="ds-testimonial__ava"

ds-testimonial__ava

ds-testimonial__ava  – Displays user’s photo.

class="ds-testimonial__content"

ds-testimonial__content

ds-testimonial__content  – Displays testimonial’s content.

class="ds-testimonial__content-inner"

ds-testimonial__content-inner

ds-testimonial__content-inner  – Centered testimonial’s content.

class="ds-testimonial__content__header"

ds-testimonial__content__header

ds-testimonial__content__header  – Display testimonial’s header.

class="ds-testimonial__name"

ds-testimonial__name

ds-testimonial__name  – Display user’s name.

class="ds-testimonial__txt"

ds-testimonial__txt

ds-testimonial__txt  – Display testimonial’s text.

Contact form

<form class="js-validate">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input class="form-control_white" name="name" placeholder="name" type="text">
</div><!-- /.form-group -->
</div><!-- /.col-md-6 -->
<div class="col-md-6">
<div class="form-group">
<input class="form-control_white" name="email" placeholder="email" type="text">
</div><!-- /.form-group -->
</div><!-- /.col-md-6 -->
</div><!-- /.row -->
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input class="form-control_white" name="subject" placeholder="subject" type="text">
</div><!-- /.form-group -->
</div><!-- /.col-md-12 -->
</div><!-- /.row -->
<div class="row">
<div class="col-md-12">
<div class="form-group">
<textarea class="form-control_white" cols="30" name="message" placeholder="message" rows="7"></textarea>
</div><!-- /.form-group -->
</div><!-- /.col-md-12 -->
</div><!-- /.row -->
<div class="ds-form-btn-wrap">
<button class="ds-btn ds-btn_xlg ds-btn_full">
<span class="ds-btn__txt">Send Message</span>
</button>
</div><!-- /.ds-form-btn-wrap -->
</form>

Classes

Available Settings

Description

class="js-validate"

js-validate

js-validate – Adds validation to the form.

class="form-group"

form-group

form-group – Contains form’s control elements.

class="form-control_white"

form-control_white

form-control_white  – Displays whiteoutline fileds.

class="ds-form-btn-wrap"

ds-form-btn-wrap

ds-form-btn-wrap  – Contains buttons.

<footer class="ds-footer">
<div class="container">
<div class="ds-footer-left">
<small class="ds-footer-copy">Copyright</small>
</div><!-- /.ds-footer-left -->
<div class="ds-footer-right">
<ul class="ds-social ds-social_white">
<li>
<a href="#">
<svg></svg>
</a>
</li>
<li>
<a href="#">
<svg></svg>
</a>
</li>
</ul>
</div><!-- /.ds-footer-right -->
</div><!-- /.container -->
</footer>

Classes

Available Settings

Description

class="ds-footer"

ds-footer

ds-footer  – Displays footer.

class="ds-footer-left"

ds-footer-left

ds-footer-left  – Floating to the right copyright section.

class="ds-footer-right"

ds-footer-right

ds-footer-right  – Floating to the leftsocialmedia.

Social Media Icons

<ul class="ds-social ds-social_white">
<li>
<a href="#">
<svg></svg>
</a>
</li>
<li>
<a href="#">
<svg></svg>
</a>
</li>
</ul>

Classes

Available Settings

Description

class="ds-socialds-social_white"

ds-social, ds-social_white

ds-social  – Displays socialmedia.

ds-social_white – Change color scheme to the white.

<div class="ds-popup" id="successPopup">
<div class="ds-popup-inner">
<div class="ds-pos_rel ds-txt_center ds-va_middle">
<h3 class="ds-popup__title">Title</h3>
<p class="ds-popup__text">Text</p>
</div>
</div>
</div>

Classes

Available Settings

Description

class="ds-popup"

ds-popup

ds-popup  – Displays popup.

class="ds-popup-inner"

ds-popup-inner

ds-popup-inner  – Contains popup’s content.

class="ds-popup__title"

ds-popup__title

ds-popup__title  – Displays popup’s title.

class="ds-popup__text"

ds-popup__text

ds-popup__text  – Displays popup’s text.

 

Color Schemes

When customizing the template, you will be able to utilize a number of predefined color schemes. All available color schemes are presented below for your convenience. To apply a particular color scheme to the template, please use the class attribute in the <body> tag and set it to any of the values as listed in the table below.

Sample Code:

<link rel="stylesheet" href="css/min.css">
<link rel="stylesheet" href="css/themes/theme-blue.css">
<link rel="stylesheet" href="css/themes/theme-blue-2.css">
<link rel="stylesheet" href="css/themes/theme-green.css">
<link rel="stylesheet" href="css/themes/theme-green-2.css">
<link rel="stylesheet" href="css/themes/theme-orange.css">
<link rel="stylesheet" href="css/themes/theme-pink.css">
<link rel="stylesheet" href="css/themes/theme-violet.css">
<link rel="stylesheet" href="css/themes/theme-violet-2.css">

 

Internet Explorer Compatibility

Appkit theme is fully responsive and looks fantastic in all modern browsers, on tablets and mobile devices. Our projects are designed to accommodate large audiences with varied preferences, so we adapt every template to ensure correct display even in older browser versions, such as IE8 and others. To ensure proper display of your website in older browsers, please check that the below snippet of code to facilitate compatibility with legacy versions of Internet Explorer.

<!--[if IE]>
<meta http-equiv='X-UA-Compatible' content=‘IE=edge,chrome=1'>
<![endif]-->

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if gte IE 8]>
<script src="assets/plugins/html5shiv/dist/html5shiv.js"></script>
<script src="assets/plugins/respond/dest/respond.min.js"></script>
<![endif]-->

 

Metatags

In each page’s head section you will see a comprehensive list of meta tags that may come in handy down the road in helping Google crawlers make sense of your web-pages, thus improving your pages' relevance and consequently helping your website rank better in search results. Please uncomment those meta tags that you deem relevant and applicable to your website.

<!-- UTF-8 charset support -->
<meta charset="UTF-8"/>

<!--To control layout on mobile browsers -->
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 minimum-scale=1.0 user-scalable=no"/>

 

Grid Markup

To ensure our templates are 100% responsive, we use Bootstrap grid and framework (http://getbootstrap.com/css/)

 

CSS Structure

CSS Customization

You are often able to further customize the template by enabling or disabling many of Appkit's stylesheets as necessary. You can do so by commenting out the code or deleting relevant lines altogether. List of stylesheets available in Appkit follows below:

<!-- Normalize CSSstylesheet -->
<link rel="stylesheet" href="assets/plugins/normalize-css/normalize.css">

<!-- Bootstrap (Gird only)framework stylesheet -->
<link rel="stylesheet" href="assets/plugins/bootstrap-grid-only/css/grid12.css">

<!-- Animate CSSframework stylesheet -->
<link rel="stylesheet" href="assets/plugins/animate.css/animate.min.css">

<!-- Slick carousel plugin default stylesheet -->
<link rel="stylesheet" href="assets/plugins/slick-carousel/slick/slick.css">

 

Files

Our projects maintain extended file structure with intuitive hierarchy of CSS documents and Appkit is no exception to this rule. Full list of stylesheet files is available below for your review.

Stylesheets Listing

File Name

Description

animate.min.css

Is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

grid12.css

Bootstrap's responsive grid and responsive utility classes only, without any extras.Include one of the precompiled grids (grid12.css, grid24.css, grid30.css, grid100.css) in your site, or customize and compile grid.css.less with command line lessc or LessPHP (no extends are used).

normalize.css

Makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

slick.css

Default slick carousel css.

template.css

All template styles.

min.css

All template and plugins styles minified in one file.

custom.css

Users custom styles.

theme-blue.css

Adds blue color scheme on website.

theme-blue-2.css

Adds second blue color scheme on website.

theme-green.css

Adds green color scheme on website.

theme-green-2.css

Adds second green color scheme on website.

theme-orange.css

Adds orange color scheme on website.

theme-pink.css

Adds pink color scheme on website.

theme-violet.css

Adds violet color scheme on website.

theme-violet-2.css

Adds second violet color scheme on website.

Stylesheet Table of Contents and Search Selectors

For large CSS documents we use a library with specific titles and subtitles designed for each specific section and subsection to simplify your searches throughout the code. To find any specific part of the code, please do a search for any of the titles and subtitles, which are listed below in-full for your convenience.

├──scss/
│└──components/
│	└──animation.scss
│	└──bg-video.scss
│	└──carousel.scss
│	└──feature.scss
│	└──fonts.scss
│	└──footer.scss
│	└──header.scss
│	└──icons.scss
│	└──main-banner.scss
│	└──main-wrapper.scss
│	└──mixins.scss
│	└──plan.scss
│	└──popup.scss
│	└── product-with-specifications.scss
│	└──rating.scss
│	└──reset.scss
│	└──screen.scss
│	└──sections.scss
│	└──service.scss
│	└──social.scss
│	└── testimonial.scss
│	└──typography.scss
│	└──variables.scss
│	└──video-banner.scss

 

Miscellaneous Classes

Additional Style Options and Future Updates

We regularly update and expand our templates with additional useful CSS classes. Appkit includes base-sizing.css file, which contains many useful features to help you customize your website and even create additional HTML blocks.  Below you will find a detailed description of the classes available to you to customize to further refine and adjust the look and feel of your website.

Relevant Snippet of Code

//Alignment Elements
.ds-txt_center {text-align: center !important;}
.ds-txt_left {text-align: left !important;}
.ds-txt_right {text-align: right !important;}
.ds-va_middle {top: 50%; transform: translateY(-50%);}

//Paddings and margins
.ds-pa-5-0-105--md {padding: 5px 0 105px;}
.ds-pa-40-0-0--md {padding: 40px 0 0;}
.ds-pa-40-0-165--md {padding: 40px 0 165px;}
.ds-pa-50-0-70--md {padding: 50px 0 70px;}
.ds-pa-55-0-35--md {padding: 55px 0 35px;}
.ds-pa-70-0-75--md {padding: 70px 0 75px;}
.ds-pa-75-0-140--md {padding: 75px 0 140px;}
.ds-pa-80-0-0--md {padding: 80px 0 0;}
.ds-pa-80-0-125--md {padding: 80px 0 125px;}
.ds-pa-80-0-140--md {padding: 80px 0 140px;}
.ds-pa-80-0-95--md {padding: 80px 0 95px;}
.ds-pa-95-0-75--md {padding: 95px 0 75px;}
.ds-pa-95-0-85--md {padding: 95px 0 85px;}
.ds-pa-95-0-95--md {padding: 95px 0;}
.ds-pa-100-0-60--md {padding: 100px 0 60px;}
.ds-pa-100-0-70--md {padding: 100px 0 70px;}
.ds-pa-105-0-0--md {padding: 105px 0 0;}
.ds-pa-105-0-55--md {padding: 105px 0 55px;}
.ds-pa-105-0-60--md {padding: 105px 0 60px;}
.ds-pa-105-0-80--md {padding: 105px 0 80px;}
.ds-pa-110-0-50--md {padding: 110px 0 50px;}
.ds-pa-110-0-60--md {padding: 110px 0 60px;}
.ds-pa-110-0-100--md {padding: 110px 0 100px;}
.ds-pa-115-0-0--md {padding: 115px 0 0;}
.ds-pa-135-0-65--md {padding: 135px 0 65px;}
.ds-pa-135-0-105--md {padding: 135px 0 105px;}
.ds-pa-140-0-55--md {padding: 140px 0 55px;}
.ds-pa-145-0-90--md {padding: 145px 0 90px;}
.ds-pa-145-0-200--md {padding: 145px 0 200px;}
.ds-pa-150-0-0--md {padding: 150px 0 0;}
.ds-pa-150-0-75--md {padding: 150px 0 75px;}
.ds-pa-150-0-205--md {padding: 150px 0 205px;}
.ds-pa-170-0-165--md {padding: 170px 0 165px;}
.ds-pa-115-0-0--md {padding: 115px 0 0;}
.ds-title_has-mb_lg {margin-bottom: 69px;}

@media (max-width: 992px) {
  .ds-pa-10-0-0--sm {padding: 10px 0 0;}
  .ds-pa-0-0-100--sm {padding: 0 0 100px;}
}

@media (max-width: 768px) {
  .ds-pa-0-0-15--xs {padding: 0 0 15px;}
  .ds-pa-30-0-0--xs {padding: 30px 0 0;}
  .ds-pa-35-0-0--xs {padding: 35px 0 0;}
  .ds-pa-35-0-45--xs {padding: 35px 0 45px;}
  .ds-pa-35-0-70--xs {padding: 35px 0 70px;}
  .ds-pa-40-0-25--xs {padding: 40px 0 25px;}
  .ds-pa-40-0-80--xs {padding: 40px 0 80px;}
  .ds-pa-45-0-35--xs {padding: 45px 0 35px;}
  .ds-pa-45-0-55--xs {padding: 45px 0 55px;}
  .ds-pa-60-0-0--xs {padding: 60px 0 25px;}
  .ds-pa-60-0-25--xs {padding: 60px 0 25px;}
  .ds-pa-60-0-50--xs {padding: 60px 0 50px;}
  .ds-pa-65-0-15--xs {padding: 65px 0 15px;}
  .ds-pa-65-0-20--xs {padding: 65px 0 20px;}
  .ds-pa-70-0-0--xs {padding: 70px 0 0;}
  .ds-pa-70-0-25--xs {padding: 70px 0 25px;}
  .ds-pa-70-0-45--xs {padding: 70px 0 45px;}
  .ds-pa-70-0-55--xs {padding: 70px 0 55px;}
  .ds-pa-85-0-85--xs {padding: 85px 0 85px;}
  .ds-pa-85-0-40--xs {padding: 85px 0 40px;}
  .ds-pa-95-0-65--xs {padding: 95px 0 65px;}
.mb-0--xs {margin-bottom: 0 !important;}
  .mb-40--xs {margin-bottom: 40px !important;}
}

//Width
.ds-w-100x {width: 100%;}
.ds-w-270--xs {width: 270px;}
.ds-mx-w-39x--xs {max-width: 39% !important;}
.ds-mx-w-55x--xs {max-width: 55% !important;}
.ds-mx-w-75x--xs {max-width: 75% !important;}
.ds-mn-w-220--xs {min-width: 220px !important;}

@media (min-width: 767px) {
  .ds-mx-w-75x--xs, .ds-mx-w-55x--xs, .ds-mx-w-39x--xs {max-width: 100% !important;}
  .ds-mn-w-220--xs {min-width: 0 !important;}
}

//Height
.ds-h-365--xs {height: 365px;}
.ds-h-565--xs {height: 565px;}
.ds-h-595--xs {height: 595px;}
.ds-h-895--xs {height: 895px;}
.ds-h-890--xs {height: 890px;}

@media (min-width: 767px) {
.ds-h-530--sm {height: 530px;}
  .ds-h-785--sm {height: 785px;}
  .ds-h-880--sm {height: 880px;}
  .ds-h-890--sm {height: 890px;}
}

@media (min-width: 1200px) {
  .ds-h-960--lg {height: 960px;}
}

//Background styles
.ds-has_bg-image {background-repeat: no-repeat; background-position: center; background-size: cover;}

//Overlay
.ds-has_layout {position: relative; z-index: 3;}
.ds-has_layout:before, .ds-has_layout:after {content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.ds-has_layout:before {z-index: 8; background-color: rgba(0, 0, 0, 0.42);}
.ds-has_layout:after {z-index: 9;}
.ds-overhid {overflow: hidden;}

//Responsive image
.ds-img_fluid {max-width: 100%;

//Type of positioning for an element
.ds-pos_rel {position: relative;}
.ds-pos_fixed {position: fixed;}
.ds-pos_abs {position: absolute;}
.ds-top_100 {top: 100px;}

//Button’s margins
@media (max-width: 560px) {
.ds-btn-group_centered--xs {width: 280px; margin-left: auto; margin-right: auto;}
}

Classes

Description

ds-text_center, ds-text_left, ds-text_right

Changestext alignment

ds-pa-*--md

Changes element’s paddings on laptop

ds-pa-*--sm

Changes element’s paddings on tablet

ds-pa-*--xs

Changes element’s paddings

mb-*--xs

Changes element’s bottom

ds-title_has-mb_lg

Sets large bottom margin to the title

ds-va_middle

Aligns element vertically

ds-w*--xs

Changes element’s width

ds-mx-w*--xs

Changes element’s max-width

ds-mn-w*--xs

Changes element’s min-width

ds-h*--xs

Changes element’s height

ds-h*--sm

Changes element’s height on tablet

ds-h*--lg

Changes element’s height on laptop

ds-has_bg-image

Sets some properties for the correct view of background

ds-has_layout

Adds overlay to the section

ds-img_fluid

Adds responsivity to the image

ds-pos_*

Sets type of positioning

ds-top_*

Sets top space to the element

ds-btn-group_centered--xs

Centered group of buttons

ds-btn_xs, ds-btn_md, ds-btn_lg, ds-btn_xlg

Changes button sizes

Typography Classes

We pay special attention to typography. In our opinion, it is one of the key qualities of an effective template. Appkit comes with a truly impressive package of typography elements, which we cover below.

Classes

Description

 

.ds-btn_transparent

Transparent button with grey dark text

 

.ds-btn_transparent_white

Transparent button with white text

 

.ds-btn_grey

Grey outline button with aligned to the right text colored with main accent color of the theme

 

.ds-btn_black-full

Small black button

 

.ds-btn_white

White outline button with aligned to the right text colored with main accent color of the theme

 

.ds-btn_full

Button filled with main accent color of the theme

 

JS Structure

When designing a theme or a template, we rely both on our own code, as well as on open-source plugins developed by third-parties. In this section, you will find detailed information on relevant plugins and their functions.

JavaScript folder structure:

assets/
│└──plugins/
│	└──jquery
│	└──dist
│	└──jquery.min.js
│	└──jquery-migrate
│	└──jquery-migrate.min.js
│	└──jquery-aniview
│	└──dist
│	└──jquery.aniview.js
│	└──jquery-validation
│	└──dist
│	└──jquery.validate.min.js
│	└──additional-methods.min.js
│	└──slick-carousel
│	└──slick
│	└──slick.min.js
│	└──vivus
│	└──dist
│	└──vivus.min.js
│	└──html5shiv
│	└──dist
│	└──html5shiv.min.js
│	└──respond
│	└──dest
│	└──respond.min.js
js/
├──min.js
├──ds-scripts.js
├──ds-custom.js

 

Plugins are initialized and can be edited in the lower part of the code for each HTML file.

<!-- jQueryplugin -->
<scripttype="text/javascript" src="assets/plugins/jquery/dist/jquery.min.js"></script>

<!-- jQuery Migrateplugin -->
<scripttype="text/javascript" src="assets/plugins/jquery-migrate/jquery-migrate.min.js"></script>

<!-- Aniviewdefault js -->
<scripttype="text/javascript" src="assets/plugins/jquery-aniview/dist/jquery.aniview.js"></script>

<!-- jQuery Validationplugin -->
<scripttype="text/javascript" src="assets/plugins/jquery-validation/dist/jquery.validate.min.js"></script>
<scripttype="text/javascript" src="assets/plugins/jquery-validation/dist/additional-methods.min.js"></script>

<!-- Slick carouselplugin -->
<scripttype="text/javascript" src="assets/plugins/slick-carousel/slick/slick.min.js"></script>

<!-- Vivusplugin -->
<scripttype="text/javascript" src="assets/plugins/vivus/dist/vivus.min.js"></script>

 

Plugins (JavaScript)

Slick Carousel

Used for Brands Section Carousel

http://kenwheeler.github.io/slick

Aniview

A jQuery plugin that works in harmony with animate.css in order to enable animations only when content comes into view.

https://github.com/jjcosgrove/jquery-aniview

Vivus

Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn.

https://maxwellito.github.io/vivus

html5shiv

The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x.

https://github.com/aFarkas/html5shiv

respond

A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more).

https://github.com/scottjehl/Respond

Callback Functions

Listed below are available callback functions and their relevant settings. Plugins are initialized and can be edited in the lower part of the code for each HTML file.

//Calculate mobile navigation height
function mobileNavH() {

  //Snippet's variables
  var windW, windH, headerTopH, headerBottomH, menuH, summaryH;

  //Calculates document's width
  windW = $(window).width();

  //Calculates document's height
  windH = $(window).height();

  //Calculates header top section's height
  headerTopH = $('.ds-header-left').outerHeight();

  //Calculates header bottom section's height
  headerBottomH = $('.ds-header-right').outerHeight();

  //Calculates header's menu height
  menuH = $('.ds-header-menu').outerHeight();
  
//Calculates common height
  summaryH = menuH + headerBottomH + headerTopH;
  if (windH <= summaryH && windW <= 992) {
    //Sets header height equal document's height on tablet and mobile devices
    $('.ds-header-middle').css('height', windH - (headerTopH + headerBottomH));
  } else {
    //Sets header's auto height on laptop
    $('.ds-header-middle').css('height', 'auto');
  }
}

//Runson scroll function
function onScroll(event) {

  //Snippet's variables
  var scrollPos, headerH;

  //Calculates document's position from top
  scrollPos = $(document).scrollTop();

  //Calculates header's height
  headerH = $('.ds-header').outerHeight();
  if (scrollPos >= 10) {
    //Adds stickie class to header
    $('.ds-header').addClass('ds-header_scroll');
  } else {

    //Removes stickie class from header
    $('.ds-header').removeClass('ds-header_scroll');
  }

  //Searches current section class
  $('.ds-header-menu a').each(function() {

    //Snippet variables
    var currLink, refElement, refElementH, refElementPos;

    //Detects current link hash
    currLink = $(this);

    //Gets current link hash
    refElement = $(currLink.attr('href'));

    //Calculates current section's top position
    refElementPos = refElement.offset().top - headerH;

    //Calculates current section's height
    refElementH = refElementPos + refElement.outerHeight();
    if (refElementPos <= scrollPos) {

      //Removes 'current' class from all links
      $('.ds-header-menu a').removeClass('current');

      //Adds 'current' class to current link
      currLink.addClass('current');
    } else {

      //Removes 'current' class from all links
      currLink.removeClass('current');
    }
  });
}

//Show menu function
function showMenu() {

  //Adds class for animation's start
  $('body').addClass('ds-start-menu-animation');
  $mobileMenu.addClass('ds-header_compact');
  setTimeout(function() {
    $mobileMenu.addClass('ds-header_white');
    $('.ds-header-right, .ds-header-middle').show();
    $('.ds-mobile-menu-layout').fadeIn(200);
  }, 400);
  setTimeout(function() {
    mobileNavH();
    $mobileMenu.addClass('ds-header_height-auto');
  }, 800);
  setTimeout(function() {
    $('.ds-header-right, .ds-header-middle').addClass('ds-header-section_width-auto');
  }, 1200);
  setTimeout(function() {
    $('.ds-header-menu, .ds-header .ds-social').addClass('ds-header-section_visible');
    $('body').removeClass('ds-start-menu-animation');
  }, 1600);
}

//Hide menu function
function hideMenu() {
  $('body').addClass('ds-start-menu-animation');
  $('.ds-header-menu, .ds-header .ds-social').removeClass('ds-header-section_visible');
  setTimeout(function() {
    $('.ds-header-right, .ds-header-middle').removeClass('ds-header-section_width-auto');
  }, 400);
  setTimeout(function() {
    $mobileMenu.removeClass('ds-header_height-auto');
  }, 800);
  setTimeout(function() {
    $('.ds-header-right, .ds-header-middle').hide();
    $mobileMenu.removeClass('ds-header_white');
    $('.ds-mobile-menu-layout').fadeOut(200);
  }, 1200);
  setTimeout(function() {
    $mobileMenu.removeClass('ds-header_compact');
    $('body').removeClass('ds-start-menu-animation');
  }, 1600);
}
$('.ds-mobile-menu').click(function(e) {
  e.preventDefault();
 
 //Toggles open class
  $(this).toggleClass('ds-menu_opened');
});
$('.ds-mobile-menu').click(function() {
  if ($(this).hasClass('ds-menu_opened')) {
    showMenu();
  } else {
    hideMenu();
  }
});

//Closes menu on layout clicked
$('.ds-mobile-menu-layout').click(function() {
  hideMenu();
  $('.ds-mobile-menu').removeClass('ds-menu_opened');
});

//Scrolls to current section
$(document).on('scroll', onScroll);
$('.ds-header-menu a').on('click', function(e) {
  e.preventDefault();
  var headerH, target, menu, $target;
  headerH = $('.ds-header').outerHeight();
  target = this.hash;
  menu = target;
  $target = $(target);
  $(document).on('scroll');
  $('.ds-header-menu a').each(function() {
    $(this).removeClass('current');
  });
  $(this).addClass('current');
  $('html, body').stop().animate({
    'scrollTop': $target.offset().top - headerH
  }, 800, 'swing', function() {
    window.location.hash = target;
    $(document).on('scroll', onScroll);
  });
});

//Slick carousel
var slick = $('.carousel-init');
slick.slick({

  //Add dots
  dots: true,

  //Prev/next arrows
  arrows: false,

  //Slide/fade animation speed
  speed: 300,

  //Number of slides to show
  slidesToShow: 3,

  //Number of slides to scroll
  slidesToScroll: 1,

  //Side padding when center mode (px or %)
  centerPadding: '0',

  //Allows you to select a node or customize the HTML for the “Previous” arrow
  prevArrow: '<a class="slick-prev">' + arrowLeft + '</a>',


  //Allows you to select a node or customize the HTML for the “Next” arrow
  nextArrow: '<a class="slick-next">' + arrowRight + '</a>',

  //Object containing breakpoints and settings objects (see demo). Enables settings sets at given screen width. Set settings to "unslick" instead of an object to disable slick at a given breakpoint.
  responsive: [{
    breakpoint: 992,
    settings: {
      slidesToShow: 3
    }
  }, {
    breakpoint: 768,
    settings: {
      centerMode: false,
      slidesToShow: 1
    }
  }]
});


//Animated blocks
var options = {
  //+ve numbers delay the animation sequence until the specified number of pixels have come into view. -ve numbers will trigger the animation sequence prior to the element coming into view.
  animateThreshold: 100,
  //The frequency at which user scrolling is 'polled' i.e. tested. This is in milliseconds (ms) and is an extension to jQuery's in-built 'scroll' event/handler.    
  scrollPollInterval: 20
};
$('.js-anim').AniView(options);

//Validation
$('.js-validate').validate({
  rules: {
    name: {
      required: true
    },
    email: {
      required: true,
      email: true
    },
    subject: {
      required: true,
      minlength: 5
    },
    message: {
      required: true,
      minlength: 10
    }
  },

  // Do not change code below
  errorPlacement: function(error, element) {
    return true;
  },
  submitHandler: function() {
    $('#successPopup').fadeIn(400);
    setTimeout(function() {
      $('#successPopup').fadeOut(400);
    }, 2500);
  }
});

 

Credits

Framework used

Twitter Bootstrap (Grid only)

https://github.com/zirafa/bootstrap-grid-only

jQuery v3.1.1

http://jquery.com/


JavaScript

  • jQuery
  • jQuery Migrate
  • jQuery Aniview
  • Slick Carousel
  • Vivus
  • jQuery Validation

 

CSS

  • Animate.css
  • Bootstrap(Grid Only)
  • Normalize CSS

Images