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

Files

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.

Documentation/
Digency/
|   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
|
+---ajax
|       blog-grid.html
|       blog-masonry.html
|       shop-grid.html
|       shop-list.html
|       
+---assets
|   +---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
|       |       
+---css
|   |   custom.css
|   |   ds-components.css
|   |   template.css
|   |   
|   +---themes
|   |       theme-blue.css
|   |       theme-green.css
|   |       theme-orange.css
|   |       
|   \---vendors
|           bootstrap.css
|           
+---images
|   |   *.png, *.jpg, *.ico
|           
+---js
|       ds-custom.js
|       ds-plugins.js
|       
\---scss
    |   *.scss

 

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.

 

Customization

Intro

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>
</div>

 

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:

Class

Theme Color

theme-blue

 

theme-green

 

theme-orange

 

 

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.

Classes

Description

hsize-(number)

Change height custom code

w-(number)

Change with custom code

pos-(init/fixed/abs/rel)

Change position custom code

pull-(left/none/right)

Pull element to side

Cleft

Clear everything left sided from element

Cright

Clear everything right sided from element

Cboth

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

Intro

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">

Stylesheets

The following stylesheets are available in the theme:

File Name

Description

bootstrap.min.css

Default bootstrap style

template.css

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

custom.css

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

Class

Description

.container-wide

.gaps-outside

Wide container with maximum width of 1440 px

15px spaces from each side of the container

Buttons

Class

Description

.btn-default

.btn-primary

.btn-accent

.btn-accent2

.btn-accent3

.wide__md

.wide__lg

.has__arrow1

.has__arrow2

.has__arrow3

.has__line

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

Example:

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

Banner shortcode

Classes

Description

.banner-shortcode

.banner__rounded

.banner__overlay

.banner__style1

.banner__style2

.banner__light

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

Example:

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

 

Grid

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

 

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.

<!-- 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:

Js/
├── 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>

 

Credits

All Plugins

Plugin

Description

Official Web Address

jQuery

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

jQuery UI slider

Drag a handle to select a numeric value

http://jqueryui.com/slider/

Bootstrap

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.

getbootstrap.com

Ofi.js

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

https://www.npmjs.com/package/object-fit-images

JCF

Form elements customization

https://www.psd2html.com/js-custom-forms/

Magnific Popup

Lightbox for images and videos

dimsemenov.com/plugins/magnific-popup/

Masked Input Plugin

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

http://digitalbush.com/projects/masked-input-plugin/

Parsleyjs

Form validation

http://parsleyjs.org/

Retina.js

Serve high-resolution images to devices that support them

http://imulus.github.io/retinajs/

Slick.js

Carousel slider

https://github.com/kenwheeler/slick

Stickyfill

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

https://github.com/wilddeer/stickyfill

WOW.js

Reveals animations on page scrolling

https://wowjs.uk/

Isotope

Filter & sort layouts

http://isotope.metafizzy.co/

Autosize

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

http://www.jacklmoore.com/autosize

Superfish

jQuery menu plugin by Joel Birch

https://superfish.joelbirch.co/

matchMedia() polyfill

Test a CSS media type/query in JS

https://gist.github.com/mariocesar/4666974

countdown360

Circular countdown timer that counts down a number of seconds.

https://github.com/johnschult/jquery.countdown360

 

Frameworks

Framework

Official Web Address

Twitter Bootstrap v3

getbootstrap.com

jQuery

jquery.com

 

JavaScript

  • 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

CSS

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

Images

  • Deposit Photos - depositphotos.com