Uplist Multi-Purpose Directory

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

In this document, you will find an in-depth description of all Uplist 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

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

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

 

 

Features

  • 404 Error Page
  • All Files Are Well Commented
  • Based On 1170px Grid System
  • Body Typography Option
  • Built On Bootstrap 3x
  • Carefully Handpicked Google Fonts
  • Clean Simple Design
  • Clean Source Code
  • Coded With Care Valid Html5 / Css3
  • Cross Browser Compatibility Ie8+
  • Css3 Animations
  • Custom Background Images
  • Custom Shortcodes
  • Customer Support
  • Demo Content
  • Drag And Drop Layout
  • Easily Customizable Photoshop Files
  • Easy Installation Easy Updates
  • Easy To Customize
  • Extended MenuFree Google Fonts
  • Free Support Updates
  • Free Vector Icons Used
  • Full Width Blog Index
  • Full Width Parallax Sections
  • Fully Responsive Layout
  • Google Fonts
  • Google Map Integrated
  • H1 - H6 Typography Option
  • Heading Typography Option
  • Help And Documentation
  • Hide Show Most Post Elements
  • Html5 / YouTube / Video Support
  • Html5 /Css3 / Java Script Coded
  • Mobile Overlay Navigation
  • Modern Technologies
  • One Click Demo Import
  • One Click Import Sample Data
  • Option Panel
  • Over 580 Icons With Font Awesome 4Page Layouts
  • Pixel Perfect Design
  • Post Layout
  • Post Page With Sidebar Right And Left
  • Post Social Share
  • Psd Files Included
  • Related Posts
  • Retina Ready
  • Seo Friendly
  • Smooth Animation
  • Sticky Menu
  • Super Clear And Clean Layout
  • Tons Of Features
  • Unique And Modern Style
  • Use For Any Website
  • Very Well Site Performance
  • W3C Valid Code
  • Well Document Organized

 

Files

  • Typography page
  • 6 Homepage layouts
  • 3 Listing types
  • 3 Blog types
  • Post Page
  • Order Page Order action
  • Order confirmation
  • 404 Page
  • Contact Page
  • Privacy Page
  • Support Page 5 Posts Formats: Standard, Video, Audio, Gallery, Link
  • Profile Main
  • Profile Bookings
  • Profile Reviews
  • Profile Support
  • Profile Wishlist

 

About the theme

Uplist is the ultimate, advanced multi-purpose directory template that will impress anyone with its clean UI and intuitive UX. Uplist’s innovative design facilitates exceptional user experience to help you successfully open up or expand your website across dozens of niches. Whether your focus is on local travel, international tourism, business listings, restaurant reviews and hospitality, or vacation resorts and tours, Uplist has got you covered. Easy to list and effortless to search, your visitors can find local businesses or fly off to exotic international destinations quickly and easily!

Guided by the principles of ease-of-use and maximum functionality, the Uplist template stands as your best ally in helping your website visitors find the next perfect vacation spot, their new favorite restaurant or even book an appointment with a local business in no time. User-centered functionality of Uplist adds a number of interactive features and brilliant maps that transform a routine search exercise in a joyful, quick and efficient experience that is sure to turn your visitors into loyal returning customers!

We designed this template as flexible and customizable as possible. With its massive UI toolkit, you can personalize the site even further, making sure it looks and feels just how you’ve envisioned it. Uplist is 100% responsive and fully cross-browser.

Free Subscriber Email Management Tool
Uplist also includes custom-developed subscriber email management tool that saves and keeps track of all emails provided by your subscribers. You can use a dashboard also provided to you for free, to review and export email data to CSV or to your MailChimp account.

MailChimp Ready
The template is ready for MailChimp integration. With a click of a button, you can easily export all emails to your MailChimp account.

 

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

.
|— _src/ (project sources)
|—— jade/ (jade templates/includes and mixins)
|—— less/ (less sources)
|——— basic/
|———— fonts.less (adding google fonts)
|———— reset.less (default styles like text-rendering type, basic styles for html, body tags)
|——— colors/ (custom theme colors)
|———— {color}.less (@import styles.less, and @brand-primary variable color)
|——— components/
|———— animation.less (custom animations like scale for listing blocks)
|———— block.less
|———— blog.less (blog styles for different types)
|———— comment.less
|———— content.less
|———— flex.less (custom styles for elements using flex, for vertical-align etc.)
|———— forms.less (custom form elements)
|———— gallery.less
|———— grid.less
|———— ico.less (base64 icons, example ico.ico-search)
|———— indents.less (custom indents example .m-b-lg, like in bootstrap 4)
|———— mansory.less (custom blog type)
|———— nav.less (custom navs, example social-nav)
|———— options.less (styles for theme customization block)
|———— order.less (custom styles for order page)
|———— page.less (custom styles for elements like page-wrap, page-header etc.)
|———— review.less
|———— search.less
|——— plugins/ (custom styles for plugins)
|———— fotorama.less
|———— google-map.less
|———— offcanvas.less
|———— rating.less
|————swiper.less
|——— reference/ (read-only folder imports bootstrap and font-awesome less files with (reference) type, best way to use variables and mixins without inserting extra code)
|———— bootstrap/
|———— font-awesome/
|———— reference.less (include bootstra and fonawesome)
|——— theme/ (bootstrap customization template)
|———— mixins/
|————— button-outline.less (new mixin for outline buttons like in bootstrap 4)
|———— breadcrumb.less
|———— buttons.less
|———— dropdowns.less
|———— forms.less
|———— input-groups.less
|———— labels.less
|———— media.less
|———— mixins.less
|———— modals.less
|———— navbar.less
|———— pager.less
|———— pagination.less
|———— scaffolding.less
|———— thumbnails.less
|———— tooltip.less
|———— type.less
|———— variables.less
|———— wells.less
|——— styles.less (import all files and table of content)
|— assets/

 

Project Folders

Folder Name

Description

Css

Folder with style files

Fonts

Folder with fonts files

Images

Folder with images

Js

Folder with JavaScript files

*.html

Different one page demos

 

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.

Template's header can be customized to suit many tastes and styles, including variations of color, background, font and transparency. Please refer to an outline of options below.

 

Default value of transparent background, has transparent background and all styles such as .navbar-transparent-white, as an example: links, brand, buttons, form controls.

Usage:

<nav class=”nav nav-transparent-white”>
  <div class=”navbar-header”>...</div>
  <div class=”navbar-offcanvas”>...</div>
</nav>

Custom value of transparent background, makes navbar background transparent and all links, form controls, buttons dark colored.

Usage:

<nav class=”nav nav-transparent-dark”>
  <div class=”navbar-header”>...</div>
  <div class=”navbar-offcanvas”>...</div>
</nav>


Custom value of transparent background, makes navbar background transparent and all links, form controls, buttons  primary(it depends on the color theme selected earlier) colored.

Usage:

<nav class=”nav nav-transparent-primary”>
  <div class=”navbar-header”>...</div>
  <div class=”navbar-offcanvas”>...</div>
</nav>

 

Summary of classes used in the Navigation Bar follows below

  • .navbar-transparent-primary transparent navbar with primary color elements
  • .navbar-transparent-dark transparent navbar with dark color elements
  • .navbar-transparent-white transparent navbar with white color elements
  • .bg-white white background class
  • .bg-primary primary background class
  • .bg-dark dark background class

Custom switch

<span class="switch">
         <input type="checkbox" id="switch_map" class="switch-map switch-input">
         <label for="switch_map" class="switch-label"></label>
</span>

 

Custom checkbox

<span class="switch">
         <input type="checkbox" id="switch_map" class="switch-map switch-input">
         <label for="switch_map" class="switch-label"></label>
</span>

 

Custom radio

<span class="custom-radio">
   <input type="checkbox" name="radio_example" id="radio_example" class="custom-radio-input">
   <label for="radio_example" class="custom-radio-label">Radio example</label>
</span>

 

Category Elements

Based on the Bootstrap thumbnail element, adjusted to match the style of Uplist, this Categories section is fully customizable and available to you in a number of predefined layouts described below.

Type 1

<div class="thumbnail same-height animation-scale">
 <a href="post.html" class="thumbnail-img"><img src="images/preview/category-type1-1.jpg" alt="img" class="img-responsive"></a>
 <div class="caption">
   <h5 class="text-regular clearfix"><a href="post.html">Many desktop</a><span class="pull-right"><i class="fa small fa-bed"></i></span></h5>
 </div>
</div>

 

Type 2

<div class="thumbnail same-height animation-scale">
 <a href="post.html" class="thumbnail-img"><img src="images/preview/category-type2-1.jpg" alt="img" class="img-responsive">
   <div class="thumbnail-fade text-center flex-center-vertically"><i class="text-white fa fa-bed"></i><span class="thumbnail-count square-100 merriweather-font text-primary bg-white img-circle">48</span>
     <p class="text-white">It is a long
     </p>
   </div>
 </a>
</div>

 

Blog Elements

The template contains 5 layouts for its deeply customizable Blog section, including variations of video, image and text content. Based on the Bootstrap's thumbnail element, adjusted to match Uplist's style, these elements also follow HTML5 tags to improve page semantics.

Blog type 1 (video)

<article class="thumbnail text-center same-height animation-scale">
 <a href="post.html" class="thumbnail-img"><img src="images/preview/blog-list-1.jpg" alt="img" class="img-responsive"><span class="icon-play thumbnail-img-type"></span></a>
 <div class="caption">
   <p class="text-muted smaller merriweather-font">October 7, 2016</p>
   <h5 class="text-regular"><a href="post.html" class="text-dark">Various versions have evolved </a></h5>
   <p class="text-muted small">Culture</p>
 </div>
</article>

 

Blog type 2 (image)

<article class="thumbnail text-center same-height animation-scale">
 <a href="post.html" class="thumbnail-img"><img src="images/preview/blog-list-2.jpg" alt="img" class="img-responsive"></a>
 <div class="caption">
   <p class="text-muted smaller merriweather-font">October 7, 2016</p>
   <h5 class="text-regular"><a href="post.html" class="text-dark">Lorem ipsum has been </a></h5>
   <p class="text-muted small">Culture</p>
 </div>
</article>

 

Blog type 3 (text)

<article class="thumbnail text-center same-height animation-scale">
 <header class="thumbnail-header"><span class="label label-primary">Featured</span></header>
 <div class="caption">
   <p class="text-muted smaller merriweather-font">October 7, 2016</p>
   <h5 class="text-regular"><a href="post.html" class="text-dark">Various versions have evolved </a></h5>
   <p class="small">It has survived not only five centuries but also the leap into electronic typesetting remaining essentially unchanged lorem ipsum has been the industry's standard dummy
   </p>
   <p class="text-muted small">Culture</p>
 </div>
</article>

 

Blog type 4 (image)

<article class="thumbnail text-center bg-gray">
 <a href="post.html" class="thumbnail-img"><img src="images/preview/blog-type2-1.jpg" alt="img" class="img-responsive"></a>
 <div class="caption">
   <p class="text-muted smaller merriweather-font">October 7, 2016</p>
   <h5 class="text-regular"><a href="post.html" class="text-dark">It has survived not </a></h5>
   <p class="text-muted small">Culture</p>
 </div>
</article>

 

Blog type 5 (text):

<article class="thumbnail text-center bg-gray">
 <div class="text-center"><span class="label label-primary">Featured</span></div>
 <div class="caption">
   <p class="text-muted smaller merriweather-font">October 7, 2016</p>
   <h5 class="text-regular"><a href="post.html" class="text-dark">The point of using </a></h5>
   <p class="small">It was popularised in the 1960s with the release of letraset sheets containing lorem ipsum passages and more recently with desktop publishing software like aldus
   </p>
   <p class="text-muted small">Culture</p>
 </div>
</article>

 

Directory item listing elements

Template contains 4 listing types described below.

 

Hotel listing vertical type 1

<article class="thumbnail listing-item animation-scale">
 <a href="listing-item.html" style="" class="thumbnail-img"><img src="images/preview/listing-detailed-1.jpg" width="360" height="200" alt="img" class="img-responsive">
   <div class="thumbnail-info smaller text-right"><span class="label label-primary label">Featured</span></div>
 </a>
 <div class="caption">
   <div class="same-height">
     <h5 class="text-regular clearfix"><a href="listing-item.html" class="text-dark">Various versions have evolved </a>
     </h5>
     <p class="small">Lorem ipsum has been the industry's standard dummy text ever since the 1500s when
     </p>
   </div>
   <footer class="thumbnail-footer clearfix"><span class="smaller text-muted pull-left">Reviews 34</span><a href="#" class="pull-right text-muted"><i class="fa fa-heart"></i></a></footer>
 </div>
</article>

 

Hotel listing vertical type 2

<article class="thumbnail listing-item animation-scale">
 <a href="listing-item.html" style="" class="thumbnail-img"><img src="images/preview/listing-detailed-1.jpg" width="360" height="200" alt="img" class="img-responsive">
   <div class="thumbnail-info smaller text-right"><span class="label label-primary label">Featured</span></div>
 </a>
 <div class="caption">
   <div class="same-height">
     <h5 class="text-regular clearfix"><a href="listing-item.html" class="text-dark">The point of using </a>
     </h5>
     <p class="small"><i class="fa fa-map-pin"></i>&nbsp;Many desktop publishing
     </p>
   </div>
 </div>
</article>

 

Hotel listing vertical type 3

<article class="thumbnail listing-item animation-scale">
 <a href="listing-item.html" style="" class="thumbnail-img"><img src="images/preview/listing-detailed-1.jpg" width="360" height="200" alt="img" class="img-responsive">
   <div class="thumbnail-info smaller text-right"><span class="label label-primary label">Featured</span></div>
 </a>
 <div class="caption">
   <div class="same-height">
     <h5 class="text-regular clearfix">
       <div class="pull-right text-center"><span class="h4 text-primary">$89</span><br><span class="small text-muted text-through">$129</span></div><a href="listing-item.html" class="text-dark">Lorem ipsum has been </a>
     </h5>
     <p class="small">It has survived not only five centuries but also the leap into electronic typesetting
     </p>
     <p class="small"><i class="fa fa-map-pin"></i> <span class="merriweather-font"><b><i>Hanbury Street 80, London</i></b></span></p>
     <ul class="list-unstyled list-inline text-uppercase smaller">
       <li><a href="#" class="text-muted">hotels</a></li>
       <li><a href="#" class="text-muted">appartaments</a></li>
       <li><a href="#" class="text-muted">london</a></li>
       <li><a href="#" class="text-muted">sale</a></li>
     </ul>
   </div>
   <footer class="thumbnail-footer clearfix"><span class="smaller text-muted pull-left">Reviews 34</span><a href="#" class="pull-right text-muted"><i class="fa fa-heart"></i></a></footer>
 </div>
</article>

 

Hotel listing horizontal

<article class="thumbnail listing-item animation-scale thumbnail-horizontal">
 <a href="listing-item.html" style="background-image: url(images/listing-item-sm-1.jpg);" class="thumbnail-img">
   <div class="thumbnail-info smaller text-right"><span class="label label-primary label">Rate 5,4</span></div>
 </a>
 <div class="caption">
   <div>
     <h5 class="text-regular clearfix"><a href="listing-item.html" class="text-dark">It is a long </a>
     </h5>
     <p class="small">It is a long established fact that a reader will be distracted by the
     </p>
     <p class="small"><i class="fa fa-map-pin"></i>&nbsp;Various versions have
     </p>
   </div>
 </div>
</article>

 

Info Elements

Info segments are available in 3 unique layout, and can be used on any page to describe the advantages or your online directory, or provide further information about your products and value-added services, simply and effectively.

 

Info block type 1

<div class="same-height m-b-lg">
 <p class="smaller text-muted">01.</p>
 <h4>It is a long
 </h4>
 <p>It is a long established fact that a reader will be distracted
 </p>
</div>

Info block type 2

<div class="well same-height">
 <div class="clearfix smaller">
   <div class="pull-right"><i class="fa fa-dashboard"></i></div><span class="text-muted">01.</span>
 </div>
 <h4>It was popularised in
 </h4>
 <p>Various versions have evolved over the years sometimes by accident sometimes on
 </p>
</div>

Info block type 3

<div class="text-center same-height"><span class="h1 bg-gray img-circle square-100"><i class="fa fa-dashboard text-primary"></i></span>
 <h4>It was popularised
 </h4>
 <p>Lorem ipsum has been the industry's standard dummy text ever since the
 </p>
</div>

 

Stars Rating Sections

Plugin bootstrap-rating is used to display the rating elements in Uplist template. Rating element is also customizable and available in 2 predefined layouts, which you can change by adjusting class rating-sm/rating-lg. By using the attribute ""disabled", you can also switch the rating element on and off. Icons used for the display within Ratings can be adjusted by tweaking attribute "data-filled/data-empty". By default, font-awesome icons will be used.

 

Rating small

<span class="rating-sm">
 <input type="hidden" value="3" disabled data-filled="fa fa-star text-primary" data-empty="fa fa-star text-light-gray" class="rating-result">
</span>

Rating large

<span class="rating-lg text-center">
 <input type="hidden" data-filled="fa fa-star fa-2x text-primary" data-empty="fa fa-star fa-2x text-light-gray" class="rating-choose">
</span>

 

CSS Customization

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

<!-- Bootstrap 3 .css-->
<link type="text/css" href="css/bootstrap.min.css" rel="stylesheet">

<!-- Font awesome .css-->
<link type="text/css" href="css/font-awesome.min.css" rel="stylesheet">

<!-- Fotorama .css-->
<link type="text/css" href="css/fotorama.css" rel="stylesheet">

<!-- Bootstrap rating .css-->
<link type="text/css" href="css/bootstrap-rating.css" rel="stylesheet">

<!-- Bootstrap select .css-->
<link type="text/css" href="css/bootstrap-select.min.css" rel="stylesheet">
<!-- Animate .css-->
<link type="text/css" href="css/animate.min.css" rel="stylesheet">

<!-- Bootstrap Offcanvas nav .css-->
<link type="text/css" href="css/bootstrap.offcanvas.min.css" rel="stylesheet">

<!-- Owl carousel .css-->
<link type="text/css" href="css/owl.carousel.min.css" rel="stylesheet">

<!-- Uplist theme .css-->
<link type="text/css" id="theme_link" href="css/theme.default.min.css" rel="stylesheet">

 

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.

// Reference
1. import reference

// Basic theme styles
2. reset
3. fonts
4. iconmoon

// Bootstrap Core variables and mixins
5. variables
6. mixins

// Bootstrap Core CSS
7. scaffolding
8. type
9. forms
10. buttons

// Bootstrap Components
11. dropdowns
12. input-groups
13. navbar
14. breadcrumbs
15. pagination
16. pager
17. labels
18. media
19. thumbnails
20. wells

// Bootstrap Components w/ JavaScript
21. modals
22. tooltip

// Custom components
23. animation
24. block
25. blog
26. comment
27. content
28. flex
29. forms
30. gallery
31. grid
32. indents
33. ico
34. mansory
35. nav
36. options
37. order
38. page
39. review
40. search
41. switch
42. table
43. tags
44. list

// Plugins custom styles
45. fotorama
46. google-map
47. offcanvas
48. rating
49. owl carousel

 

Plugins are initialized in the <head> tag

<!-- CSS -->
<link rel="stylesheet"href="css/bootstrap.css">
<link rel="stylesheet"href="css/font-awesome.min.css">
<link rel="stylesheet"href="css/owl.carousel.min.css">
<link rel="stylesheet"href="css/base-sizing.css">
<link rel="stylesheet"href="css/style.css">

 

JS Plugins

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

 

jQuery library

Perhaps the most popular library used to manipulate DOM elements.

<script defer src="js/core/jquery-1.11.1.min.js"></script>

 

Bootstrap default script

Default scripts to facilitate operation of the bootstrap framework.

<script defer src="js/core/bootstrap.min.js"></script>

 

Bootstrap custom select

This script is being used to customize the display of standard Select element, which ensures its appearance is matching the overall style of Uplist template.

<script defer src="js/plugins/bootstrap-select.min.js"></script>

 

Bootstrap start rating

Plugin used to display ratings element.

<script defer src="js/plugins/bootstrap-rating.min.js"></script>

 

Bootstrap offcanvas navigation

Plugin used to facilitate responsive layout and optimize appearance on the mobile devices.

<script defer src="js/plugins/bootstrap.offcanvas.min.js"></script>

 

Video background

Plugin used to display background-embedded video. It is used on the homepage-gradient.html version of the Home Page.

<script defer src="js/plugins/jquery.vide.min.js"></script>

 

Fotorama carousel

Robust plugin used to display images in a slider.

<script defer src="js/plugins/fotorama.js"></script>

 

Matchheight plugin (makes elements same height)

Helps to calculate identical height for various elements displayed in a grid layout.

<script defer src="js/plugins/jquery.matchHeight-min.js"></script>

 

Owl carousel plugin

Another carouse plugin used to display blocks of content.

<script defer src="js/plugins/owl.carousel.min.js"></script>

 

Custom animate function

Plugin used to facilitate animation on element display.

<script defer src="js/theme/animate.js"></script>

 

Plugins initialization

File ds-plugins.js is used to initialize all plugins enabled in the theme.

<script defer src="js/theme/ds-plugins.js"></script>

 

Theme scripts

Lists scripts custom-designed specifically for the Uplist template.

<script defer src="js/theme/ds-scripts.js"></script>

 

Place for adding custom client functions

A file specially designed to store user custom scripts.

<script defer src="js/ds-custom.js"></script>

 

Google maps API connection (API key is sample only, please replace for your own)

<script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCvpH7_ggEW5MYLRO8EN1BbJak4u2uIvaA"></script>

 

Google maps initialization and custom function for showing hotels list

<script defer src="js/theme/google-map.js"></script>

 

Color Schemes

When customizing the template, you will be able to utilize a number of predefined color schemes. To do so, 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/theme.blue.css">
<link rel="stylesheet" href="css/theme.dark.css">
<link rel="stylesheet" href="css/theme.default.css">
<link rel="stylesheet" href="css/theme.green.css">
<link rel="stylesheet" href="css/theme.orange.css">
<link rel="stylesheet" href="css/theme.purple.css">
<link rel="stylesheet" href="css/theme.red.css">

 

 

Class Function:

Modification class for <body> tag

Example:

To make blue color-scheme:

.page--blue

 

To make green color-scheme:

.page--green

 

To make red color-scheme:

.page--red

 

To make purple color-scheme:

.page--purple

 

To make turquoise color-scheme:

.page--turquoise

 

To make orange color-scheme:

.page--orange

 

 

IE Compatibility

Vision 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]-->

This ensures bootstrap is fully functional in IE browsers that don't support it otherwise.

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if gte IE 6]>
  <script src="js/core/html5shiv.js"></script>
  <script src="js/core/respond.min.js"></script>
<![endif]-->
  <script src="assets/plugins/html5shiv.js"></script>
  <script src="assets/plugins/respond.min.js"></script>
  <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.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.

<!-- Page charset -->
<meta charset="utf-8">
<!-- Internet Explorer engine edge -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Page description -->
<meta name="description" content="Uplist template">
<!-- Layout size for mobile -->
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0">

 

Grid Markup

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

 

CSS Structure

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

 

Stylesheets Listing

File Name with Code Referenced

Description

<!-- Bootstrap 3 .css-->

<link type="text/css" href="css/bootstrap.min.css" rel="stylesheet">

Bootstrap 3 framework classes

<!-- Font awesome .css-->

<link type="text/css" href="css/font-awesome.min.css" rel="stylesheet">

Font awesome icons classes

<!-- Fotorama .css-->

<link type="text/css" href="css/fotorama.css" rel="stylesheet">

Fotorama carousel styles css

<!-- Bootstrap rating .css-->

<link type="text/css" href="css/bootstrap-rating.css" rel="stylesheet">

Bootstrap custom rating styles

<!-- Bootstrap select .css-->

<link type="text/css" href="css/bootstrap-select.min.css" rel="stylesheet">

Bootstrap custom select styles

<!-- Animate .css-->

<link type="text/css" href="css/animate.min.css" rel="stylesheet">

Animate classes

<!-- Bootstrap Offcanvas nav .css-->

<link type="text/css" href="css/bootstrap.offcanvas.min.css" rel="stylesheet">

Bootstrap collapsed navbar custom styles

<!-- Owl carousel .css-->

<link type="text/css" href="css/owl.carousel.min.css" rel="stylesheet">

Owl carousel styles

<!-- Uplist theme .css-->

<link type="text/css" id="theme_link" href="css/theme.default.min.css" rel="stylesheet">

Theme custom styles

 

Miscellaneous Classes

Additional Style Options and Their Future Updates

We regularly update and expand our templates with additional useful CSS classes.

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.

 

Margins and Paddings

For margins:

.m-t-n { margin-top: 0; }

.m-t-sm { margin-top: 10px; }

.m-t-md { margin-top: 20px; }

.m-t-lg { margin-top: 30px; }

.m-t-xlg { margin-top: 50px; }

 

.m-b-n { margin-bottom: 0; }

.m-b-sm { margin-bottom: 10px; }

.m-b-md { margin-bottom: 20px; }

.m-b-lg { margin-bottom: 30px; }

.m-b-xlg { margin-bottom: 50px; }

 

Paddings

.p-t-n { padding-top: 0; }

.p-t-sm { padding-top: 10px; }

.p-t-md { padding-top: 20px; }

.p-t-lg { padding-top: 30px; }

.p-t-xlg { padding-top: 50px; }

.p-b-n { padding-bottom: 0; }

.p-b-sm { padding-bottom: 10px; }

.p-b-md { padding-bottom: 20px; }

.p-b-lg { padding-bottom: 30px; }

.p-b-xlg { padding-bottom: 50px; }

  

Typography Classes

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

 

Font sizing

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

h1, .h1 { font-size: 28px;}
h2, .h2 { font-size: 24px;}
h3, .h3 { font-size: 21px;}
h4, .h4 { font-size: 20px;}
h5, .h5 { font-size: 18px;}
h6, .h6 { font-size: 16px;}

.text-regular { font-weight: normal;}
.text-muted { color: #999;}
.text-gray { color: #666;}
.text-light-gray { color: #ccc;}
.text-white { color: #fff;}
.text-primary { color: #{theme primary color};}
.text-through { text-decoration: line-through;}

 

Buttons

Button outline default color: .btn-o-default

<a class=”btn btn-o-default”>Button</a>

 

Button outline primary color: .btn-o-primary

<a class=”btn btn-o-primary”>Button</a>

 

Button outline success color: .btn-o-success

<a class=”btn btn-o-success”>Button</a>

 

Button outline info color: .btn-o-info

<a class=”btn btn-o-info”>Button</a>

 

Button outline warning color: .btn-o-warning

<a class=”btn btn-o-warning”>Button</a>

 

Button outline danger color: .btn-o-danger

<a class=”btn btn-o-danger”>Button</a>

 

Button outline white color: .btn-o-white

<a class=”btn btn-o-white”>Button</a>

 

Button outline dark color: .btn-o-dark

<a class=”btn btn-o-dark”>Button</a>

 

Button indented more than the usual button: .btn-indent

<a class=”btn btn-primary btn-indent”>Button</a>

 

Button with rounded corners: .btn-round

<a class=”btn btn-primary btn-round”>Button</a>

 

Frameworks Used

Twitter Bootstrap v3.3.7

http://getbootstrap.com/

jQuery v1.12.0

http://jquery.com/

 

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

 

All Plugins & Credits

jQuery

<script defer src="js/core/jquery-1.11.1.min.js"></script>

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.

https://jquery.com/

Bootstrap - Default

<script defer src="js/core/bootstrap.min.js"></script>

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.

http://getbootstrap.com/

Bootstrap custom select

<script defer src="js/plugins/bootstrap-select.min.js"></script>

Bootstrap-select is a jQuery plugin that utilizes Bootstrap's dropdown.js to style and bring additional functionality to standard select elements.

http://silviomoreto.github.io/bootstrap-select

Bootstrap rating

<script defer src="js/plugins/bootstrap-rating.min.js"></script>

Bootstrap Rating is a jQuery plugin that creates a rating control that uses Bootstrap glyphicons for rating symbols.

https://github.com/dreyescat/bootstrap-rating)

Bootstrap offcanvas navigation

<script defer src="js/plugins/bootstrap.offcanvas.min.js"></script>

Offcanvas menu built with Bootstrap

https://github.com/iamphill/Bootstrap-Offcanvas

Owl Carousel

Touch enabled jQuery plugin that lets you create a beautiful, responsive carousel slider.

https://github.com/OwlCarousel2/OwlCarousel2

Video background

<script defer src="js/plugins/jquery.vide.min.js"></script>

Easy as hell jQuery plugin for video backgrounds

http://vodkabears.github.io/vide/

Fotorama carousel

<script defer src="js/plugins/fotorama.js"></script>

Fotorama is a simple, stunning, powerful jQuery gallery. All browsers, touch gestures, native fullscreen, seamless responsive, fast CSS3 transitions, lazy loading

https://fotorama.io

Matchheight plugin (makes elements same height)

<script defer src="js/plugins/jquery.matchHeight-min.js"></script>

Makes the height of all selected elements exactly equal. It handles many common edge cases that cause similar plugins to fail.

https://github.com/liabru/jquery-match-height

HTML5shiv

This script is the defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer.

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

Swiper

Most modern mobile touch slider with hardware accelerated transitions

https://github.com/nolimits4web/Swiper

Google Maps

The all-known, powerful Maps plugin by Google

www.google.com

 

Plugin Initialization

For your convenience, we've listed below methods followed to initialize relevant plugins used in the template.

 

MatchHeight plugin initialization

$('.same-height').matchHeight();

 

Animate plugin initialization

$('[data-toggle="animate"]').animateEvent('click');

 

Bootstrap Stars rating plugin initialization

$('.rating-result').rating();
$('.rating-choose').rating({
   extendSymbol: function () {
       var title;
       var data = {
           1 : "Terrible",
           2 : "Poor",
           3 : "Average",
           4 : "Very good",
           5 : "Exceptional"
       };
       $(this).tooltip({
           container: 'body',
           placement: 'top',
           trigger: 'manual',
           title: function () {
               return title;
           }
       });
       $(this).on('rating.rateenter', function (e, rate) {
           title = data[rate];
           $(this).tooltip('show');
       })
           .on('rating.rateleave', function () {
               $(this).tooltip('hide');
           });
   }
});

 

Bootstrap tooltip initialization

$('[data-toggle="tooltip"]').tooltip();

 

Bootstrap selectpicker initialization

$('select.custom-select').selectpicker();

 

Owl carousel initialization

$(".owl-carousel").owlCarousel({
   loop:true,
   margin:30,
   responsiveClass:true,
   navText: ["<span class='icon-arrow-left'></span>", "<span class='icon-arrow-right'></span>"],
   responsive:{
       0:{
           items:1,
           nav:false
       },
       920:{
           items:2,
           nav:true
       },
       1200:{

 

Credits

Frameworks

Plugins

Icons

  • fontawesome.io (http://fontawesome.io)
  • A number of icons custom-designed by Dart Simple all available in the project for your use

Fonts

Demo Images

Please note that images used the demo are not included in the purchase, and will be replaced with placeholders.

Like our work? Please rate our template, or follow us on Facebook, Behance and Dribble!