Digency Bootstrap

Thank you for purchasing Digency and the confidence you have placed in Dart Simple Solutions.
In this document, you will find an in-depth description of all Digency's features and functionality. If you have any ques-tions 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/digency

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


Theme Structure


The following files are included in the Digency Bootstrap Theme:

  • x35 HTML Files
  • x5 Main Pages
  • x4 About Us Pages
  • x6 Blog Pages
  • x1 Blog Single Page
  • x2 Checkout Pages
  • x2 Confirmation Pages
  • x2 Shop Pages
  • x1 Cart Page
  • x1 Shop Single Page
  • x1 Shop Action Page
  • x2 Presentation Pages
  • x3 Portfolio Pages
  • x1 Portfolio Single Page
  • x2 Contact Pages
  • x1 404 Page
  • x1 Shortcodes Page

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.

|   404.html
|   about-us-alternative.html
|   about-us-default.html
|   about-us-horizontal.html
|   about-us-secondary.html
|   blog-default-search.html
|   blog-default.html
|   blog-details.html
|   blog-first-featured.html
|   blog-horizontal.html
|   blog-masonry-grid.html
|   blog-sidebar.html
|   contact-default.html
|   contact-secondary.html
|   homepage-billboard.html
|   homepage-default.html
|   homepage-fullwidth-grid.html
|   homepage-fullwidth-secondary.html
|   homepage-horizontal.html
|   portfolio-billboard.html
|   portfolio-default.html
|   portfolio-details.html
|   portfolio-fullwidth-grid.html
|   presentation-default.html
|   presentation-horizontal.html
|   shop-action.html
|   shop-cart.html
|   shop-checkout-2.html
|   shop-checkout.html
|   shop-confirmation-2.html
|   shop-confirmation.html
|   shop-grid-view-sidebar.html
|   shop-grid-view.html
|   shop-single-product.html
|   shortcodes.html
|       blog-grid.html
|       blog-masonry.html
|       shop-grid.html
|       shop-list.html
|   +---fonts
|   |   |   *.ttf, *.woff
|   |   |   
|   |   \---icons
|   |           *.ttf, *.woff
|   |           
|   \---plugins
|       |   autosize.min.js
|       |   bootstrap.min.js
|       |   breakpoint.min.js
|       |   countdown360.min.js
|       |   device.min.js
|       |   hoverintent.min.js
|       |   jcf.min.js
|       |   jquery.min.js
|       |   magnific.min.js
|       |   maskedinput.min.js
|       |   modernizr.min.js
|       |   ofi.min.js
|       |   parsley.min.js
|       |   retina.min.js
|       |   slick.min.js
|       |   superfish.min.js
|       |   ui-slider.min.js
|       |   wow.min.js
|       |   
|       \---isotope
|               imagesloaded.pkgd.min.js
|               isotope.packery.min.js
|               isotope.pkgd.min.js
|       |       
|   |   custom.css
|   |   ds-components.css
|   |   template.css
|   |   
|   +---themes
|   |       theme-blue.css
|   |       theme-green.css
|   |       theme-orange.css
|   |       
|   \---vendors
|           bootstrap.css
|   |   *.png, *.jpg, *.ico
|       ds-custom.js
|       ds-plugins.js
    |   *.scss


Project Folders

Folder Name



Stores all included files like fonts, icons, plugins.


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


Stores all images.


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


Stores all .scss files.




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.

Digency theme 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.

Additionally, we regularly update and expand our templates with useful CSS classes. Digency includes base-sizing.css file, which contains many useful features to help you customize your website and even create additional HTML blocks.


Logo Image

Please use the class "branding-logo" to change the logo image in the template. For example:

<div class="logo">
    <a href="#"><img src="images/logo/logo.png" alt="" data-rjs="2"></a>


Color Schemes

For your convenience, we've prepared three color schemes that were tested to look great in the theme. To change color scheme, please add the CSS file with different color scheme under the template.css file to change the color theme of the template:

<link rel="stylesheet" href="css/template.css">
<link rel="stylesheet" href="css/themes/theme-blue.css"> or
<link rel="stylesheet" href="css/themes/theme-green.css"> or
<link rel="stylesheet" href="css/themes/theme-orange.css">

Full list of color classes with color samples is presented below:


Theme Color








Height Classes

These height classes are all in pixels and they can be adjusted in increments of 10, beginning with 0 and ending with 700px. These heights are generally added to the page-header block, which will use your predefined height. The classes are:

.hsize-full {height:100% !important;} /* full height */
.hsize-reset {height:0 !important;} /* height zero */
.hsize-10 {height:10px;}
.hsize-20 {height:20px;}
.hsize-100 {height:100px;}
.hsize-110 {height:110px;}
.hsize-120 {height:120px;}
.hsize-200 {height:200px;}
.hsize-210 {height:210px;}
.hsize-220 {height:220px;}
.hsize-300 {height:300px;}
.hsize-310 {height:310px;}
.hsize-320 {height:320px;}
.hsize-400 {height:400px;}
.hsize-410 {height:410px;}
.hsize-420 {height:420px;}
.hsize-500 {height:500px;}
.hsize-510 {height:510px;}
.hsize-520 {height:520px;}
.hsize-600 {height:600px;}
.hsize-610 {height:610px;}
.hsize-620 {height:620px;}
.hsize-700 {height:700px;}


Breakpoint classes listed below are being used to facilitate valid responsive layout on smaller devices:

  • .hsize-md-10 or hsize-md-190 or hsize-md-380 for medium screens (1200px) and below, (covering both small and extra small.)
  • .hsize-sm-10 or hsize-sm-90 or hsize-sm-380 for small screens (991px) and below, (covering extra small too.)
  • .hsize-xs-10 or hsize-xs-90 or hsize-xs-380 for extra small screens (767px) and below.

You can thus enjoy different heights for each breakpoint (and for each different device), like class=”hize-290 hsize-md-150″, meaning it’s 290px in height on large desktops and 150px on medium and smaller screens.

Width Classes

Width classes presets are only added as percentages and range from 10 to 100% until full width. The classes are:

.w-10 {width:10% !important;}
.w-15 {width:15% !important;}
.w-20 {width:20% !important;}
.w-25 {width:25% !important;}
.w-30 {width:30% !important;}
.w-35 {width:35% !important;}
.w-40 {width:40% !important;}
.w-45 {width:45% !important;}
.w-50 {width:50% !important;}
.w-55 {width:55% !important;}
.w-60 {width:60% !important;}
.w-65 {width:65% !important;}
.w-70 {width:70% !important;}
.w-75 {width:75% !important;}
.w-80 {width:80% !important;}
.w-85 {width:85% !important;}
.w-90 {width:90% !important;}
.w-95 {width:95% !important;}
.w-100 {width:100% !important;} /* full width */
.w-init {width:initial !important;} /* initial width */


Additional breakpoint classes are available for smaller devices. For example:

  • .w-md-10 or w-md-90 for medium screens (1200px) and below, covering both small and extra small.
  • .w-sm-10 or w-sm-90 for small screens (991px) and below, covering extra small too.
  • .w-xs-10 or w-xs-90 for extra small screens (767px) and below

Please recall that you can have different widths for each breakpoint, such as,class=”w-90 w-md-50″ which means it’s 90% in width on large desktops and 50% (half) on medium and smaller screens.


Text Align

Text align presets are left, right and center

The classes are as follows:

.text-center {text-align: center;}
.text-right {text-align: right;}
.text-left {text-align: left;}

Further breakpoint classes are available for small and extra-small devices. For example:

.text-xs-center {text-align: center;}
.text-xs-right {text-align: right;}
.text-xs-left {text-align: left;}


Position Classes

Position classes can be used to set element’s position as follows:

.pos-init {position: initial !important;}
.pos-fixed {position: fixed !important;}
.pos-abs {position: absolute !important;}
.pos-rel {position: relative !important;}

You can also set positions even on responsive breakpoints as you’ll see below.

.pos-xs-fixed {position: fixed !important;}
.pos-sm-abs {position: absolute !important;}
.pos-md-rel {position: relative !important;}


Float & Float Clearing Classes

The following codes are from Bootstrap library but they are very useful to know.

.pull-left {float:left}
.pull-right {float:right}
.pull-none {float:none !important;} /* not in bootstrap, added in this template */

Example for small device breakpoint:

.pull-none-sm {float:none !important;}

You can also clear the floats even on responsive breakpoints:

.cleft-sm {clear:left;}
.cright-sm {clear:right;}
.cboth-sm {clear:both;}
.clear-init-sm {clear:initial;}

And, for example, on medium breakpoint see below.

.cleft-md {clear:left;}
.cright-md {clear:right;}
.cboth-md {clear:both;}
.clear-init-md {clear:initial;}


Line heights

.lh1 {line-height: 1 !important;}
.lh1_1 {line-height: 1.1 !important;}
.lh1_2 {line-height: 1.2 !important;}
.lh1_3 {line-height: 1.3 !important;}
.lh1_4 {line-height: 1.4 !important;}
.lh1_5 {line-height: 1.5 !important;}
.lh1_6 {line-height: 1.6 !important;}


Z-index Classes

.index_-1 {z-index: -1;}
.index__auto {z-index: auto;}
.index__2 {z-index: 2;}
.index__4 {z-index: 4;}
.index__6 {z-index: 6;}
.index__8 {z-index: 8;}
.index__10 {z-index: 10;}
.index__99 {z-index: 99;}
.index__100 {z-index: 100;}
.index__101 {z-index: 101;}
.index__200 {z-index: 200;}
.index__201 {z-index: 201;}


Margins and Paddings

Inside css/base-sizing.css you will find a number of predefined classes. Below we describe margins and paddings.

Predefined classes for margins and paddings are necessary to ensure consistency in spacing while providing customers with sufficient flexibility.

Settings for left/right margins, paddings and negative margins are available in the following increments:

5px, 10px, 15px, 20px, 25px, 30px, 35px, 40px, 45px, 50px

60px, 70px, 80px, 90px, 100px, 110px, 120px, 130px, 140px, 150px

In addition to the above values, top and bottom margins and paddings can be also set to 200px and 250px.

Sample code for margins:

Top: mt-##, example classes: mt-20, mt-40, mt-100 etc.
Bottom: mb-##, eg: mb-20, mb-40, mb-100 etc.
Left: ml-##, eg: ml-20, ml-40, ml-100 etc.
Right: mr-##, eg: mr-20, mr-40, mr-100 etc.


Sample code for paddings:


Top: pt-##, example classes: pt-20 , pt-40, pt-100 etc.
Bottom: pb-##, eg: pb-20, pb-40, pb-100 etc.
Left: ml-##, eg: pl-20, pl-40, pl-100 etc.
Right: pr-##, eg: pr-20, pr-40, pr-100 etc.

Negative margins can be used for extra complex structures and layouts. As follows from their name, these negative margins will add spaces reversely.

Sample code for negative margins:

Top: mnt-##, example classes: mnt-20 , mnt-40, mnt-100 etc.
Bottom: mnb-##, eg: mnb-20, mnb-40, mnb-100 etc.
Left: mnl-##, eg: mnl-20, mnl-40, mnl-100 etc.
Right: mnr-##, eg: mnr-20, mnr-40, mnr-100 etc.
Auto: mg-auto


Responsive Layout

To facilitate fully adaptive layout, we've introduced extra breakpoint classes that will take over when pages are viewed in certain resolutions.

For example, with large screens just leave the default class, eg: class="mt-100", which will add a top margin of 100px automatically.

For other screens, add the screen’s breakpoint classes, which are: md (medium devices), sm (small devices), xs (extra small devices), which can be combined for greater flexibility:

For medium screens and below: use mt-md-100, for example, class="mt-100 mt-md-60", which means that a 60px top margin will take over the default 100px margin whenever browser width is set to 1200px.

For small screens and below: use mt-sm-100, for example class="mt-100 mt-md-60 mt-sm-40", which means that a 40px top margin will take over the default 100px margin whenever browser width is set to 991px.

For extra small screens and below (eg smartphones): use mt-xs-100, for example class="mt-100 mt-md-60 mt-sm-40 mt-xs-20", which means that a 20px top margin will take over the default 100px margin whenever browser width is set to 767px.




Change height custom code


Change with custom code


Change position custom code


Pull element to side


Clear everything left sided from element


Clear everything right sided from element


Clear everything both sided from element

Typography Classes

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

A number of predefined classes can be found inside the CSS/base-sizing.css stylesheet.

Font sizing

Because there’s a wide variety of popular headings and custom font sizes, we've added predefined sizing classes as follows.

.fs-9 {font-size:9px !important;}
.fs-11 {font-size:11px !important;}
.fs-12 {font-size:12px !important;}
.fs-13 {font-size:13px !important;}
.fs-14 {font-size:14px !important;}
.fs-15 {font-size:15px !important;}
.fs-16 {font-size:16px !important;}
.fs-17 {font-size:17px !important;}
.fs-18 {font-size:18px !important;}
.fs-20 {font-size:20px !important;}
.fs-22 {font-size:22px !important;}
.fs-24 {font-size:24px !important;}
.fs-26 {font-size:26px !important;}
.fs-28 {font-size:28px !important;}
.fs-30 {font-size:30px !important;}
.fs-32 {font-size:32px !important;}
.fs-34 {font-size:34px !important;}
.fs-36 {font-size:36px !important;}
.fs-38 {font-size:38px !important;}
.fs-40 {font-size:40px !important;}
.fs-42 {font-size:42px !important;}
.fs-44 {font-size:44px !important;}
.fs-46 {font-size:46px !important;}
.fs-48 {font-size:48px !important;}
.fs-50 {font-size:50px !important;}
.fs-52 {font-size:52px !important;}
.fs-54 {font-size:54px !important;}
.fs-56 {font-size:56px !important;}
.fs-58 {font-size:58px !important;}
.fs-60 {font-size:60px !important;}
.fs-62 {font-size:62px !important;}
.fs-64 {font-size:64px !important;}
.fs-66 {font-size:66px !important;}
.fs-68 {font-size:68px !important;}
.fs-70 {font-size:70px !important;}
.fs-72 {font-size:72px !important;}
.fs-74 {font-size:74px !important;}
.fs-76 {font-size:76px !important;}
.fs-78 {font-size:78px !important;}
.fs-80 {font-size:80px !important;}
.fs-100 {font-size:100px !important;}
.fs-120 {font-size:120px !important;}
.fs-150 {font-size:150px !important;}
.fs-200 {font-size:200px !important;}

These classes can be used as follows:

<h4 class="fs-32">I'm a heading and I'm 32px sized </h4>

To facilitate responsive layout and eliminate display errors between various screen sizes, we also introduced breakpoint naming as follows:

.fs-15 {font-size:15px;}
.fs-md-15 --//--
.fs-sm-15 --//--
.fs-xs-15 --//--

This ensures consistency of font sizes relative to screen sizes, while maintaining responsive typography.

For example:

<h4 class="fs-16 fs-md-18 fs-sm-20 fs-xs-22">I'm a heading, Ii normally have 16px on desktops, 18px on medium screens like big tablets, then 20px on small screens like small tablets, and 22px on tiny screens like smart-phones. I'm so flexible!! </h4>

Font Colors

.text-primary {}
.text-accent {}
.text-accent-alt {}
.text-muted {}
.text-muted-alt {}
.text-success {}
.text-error {}
.text-light {}
.text-dark {}

Background colors

.bg-primary {}
.bg-accent {}
.bg-accent-alt {}
.bg-accent-alt2 {}
.bg-muted {}
.bg-muted-alt {}
.bg-lightgrey {}
.bg-lightgrey-alt {}
.bg-light {}
.bg-dark {}


CSS Structure


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

CSS Initialization

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

Plugins and fonts are initialized inside the <head> tag as follows:

<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="css/vendors/bootstrap.css">
<!-- Core template CSS -->
<link rel="stylesheet" href="css/template.css">
<!—Your styles -->
<link rel="stylesheet" href="css/custom.css">


The following stylesheets are available in the theme:

File Name



Default bootstrap style


The main stylesheet which contains almost everything that the template is styled upon


If you would like to make an additional changes to the main styles, attach custom.css which is in the CSS folder

Template.css stylesheet

This is the main stylesheet that contains almost everything that the template is styled upon. Please keep in mind that any changes you make in this file may impact the entire template, and we highly recommend that you don't edit this file. instead, please add your own CSS code into custom.css stylesheet.

The template itself serves as a database of examples of HTML markup and CSS styles applied. In the styles menu pages you can see there is a number of examples of the classes and styles added to the page elements. Please review the file extensively to gain a thorough understanding of its contents before making changes. If you don’t time for such review, you may opt in favor of a simpler copy/paste of the code from existing HTML files and then debugging styles using the Chrome Developer Tools.

Search selectors

For large CSS documents we use a library with specific titles and subtitles designed for each specific section and sub-section 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.

Layout helpers





Wide container with maximum width of 1440 px

15px spaces from each side of the container















Light background

Dark background

Yellow background

Blue background

Lightblue background

Big button

Bigger button

Button with arrow

Button with arrow

Button with arrow

Button with line


<a class=" btn-primary  has__arrow1">…</a>

Banner shortcode









Main style for the Portfolio/Blog item

Rounded corners

Banner with color overlay

Content placement style 1

Content placement style 2

Text text of the banner


<div class="banner-shortcode banner__style1 banner__rounded">



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



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.

<!-- Personal Meta tags-->
<meta charset="UTF-8">
<meta name="title"content=""><!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
<meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1">
<!-- Meta descriptions-->
<meta name="keywords"content="premium template, ds template, dart simple">
<meta name="description"content="Dart Simple Solutions - Premium template">
<!-- Restrict google from scanning info from Dmoz or YahooDir-->
<meta name="robots"content="noodp,noydir">
<!-- Author markup-->
<meta name="author"content="Dart Simple Solutions - Premium Wordpress template">
<meta name="copyright"content="Dart Simple Solutions">


JavaScript Structure

When creating the project, 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 File and Folder Structure:

├── ds-custom.js
├── ds-plugins.js


Plugin Initialization

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

        <!-- jQuery -->
        <script src="assets/plugins/jquery.min.js"></script>
        <!-- Bootstrap core JavaScript -->
        <script src="assets/plugins/bootstrap.min.js"></script>
        <!-- JavaScript plugins -->
        <script src="assets/plugins/isotope/isotope.pkgd.min.js"></script>
        <script src="assets/plugins/isotope/isotope.packery.min.js"></script>
        <script src="assets/plugins/isotope/imagesloaded.pkgd.min.js"></script>
        <script src="assets/plugins/ofi.min.js"></script>
        <script src="assets/plugins/hoverintent.min.js"></script>
        <script src="assets/plugins/superfish.min.js"></script>
        <script src="assets/plugins/breakpoint.min.js"></script>
        <script src="assets/plugins/magnific.min.js"></script>
        <script src="assets/plugins/parsley.min.js"></script>
        <script src="assets/plugins/slick.min.js"></script>
        <script src="assets/plugins/jcf.min.js"></script>
        <script src="assets/plugins/ui-slider.min.js"></script>
        <script src="assets/plugins/autosize.min.js"></script>
        <script src="assets/plugins/maskedinput.min.js"></script>
        <script src="assets/plugins/countdown360.min.js"></script>
        <script src="assets/plugins/retina.min.js"></script>
        <script src="assets/plugins/device.min.js"></script>
        <script src="assets/plugins/wow.min.js"></script>
        <!-- Custom JavaScript -->
        <script src="js/ds-plugins.js"></script>



All Plugins



Official Web Address


jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.


jQuery UI slider

Drag a handle to select a numeric value



Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.



Polyfill object-fit and object-position on images on IE9, IE10, IE11, Edge, Safari



Form elements customization


Magnific Popup

Lightbox for images and videos


Masked Input Plugin

Form validation improvements: patterns for correct filling the form input field



Form validation



Serve high-resolution images to devices that support them



Carousel slider



Position:sticky polyfill for browsers that don't support this CSS property natively



Reveals animations on page scrolling



Filter & sort layouts



A small, stand-alone script to automatically adjust textarea height.



jQuery menu plugin by Joel Birch


matchMedia() polyfill

Test a CSS media type/query in JS



Circular countdown timer that counts down a number of seconds.





Official Web Address

Twitter Bootstrap v3






  • jQuery - jquery.com
  • Bootstrap 3 - getbootstrap.com
  • jQuery UI slider - jqueryui.com/slider
  • Ofi.js - npmjs.com/package/object-fit-images
  • JCF - psd2html.com/js-custom-forms
  • Magnific Popup - dimseme-nov.com/plugins/magnific-popup
  • Masked Input Plugin - digitalbush.com/projects/masked-input-plugin
  • Parsleyjs - parsleyjs.org
  • Retina.js - imulus.github.io/retinajs
  • Slick.js - github.com/kenwheeler/slick
  • Stickyfill - github.com/wilddeer/stickyfill
  • WOW.js - wowjs.uk/
  • Isotope - isotope.metafizzy.co/
  • Autosize - www.jacklmoore.com/autosize
  • Superfish - superfish.joelbirch.co/
  • matchMedia() polyfill - gist.github.com/mariocesar/4666974
  • countdown360 - github.com/johnschult/jquery.countdown360


  • Bootstrap 3 - getbootstrap.com
  • Font Awesome - fontawesome.io
  • IonIcons - ionicons.com


  • Deposit Photos - depositphotos.com