Documentation

Thank you for purchasing our item. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form here. Thanks so much!

Carros is a high quality 3 in 1 automotive HTML5 template that is suitable for building automotive websites. If your business is tied with car servicing, workshops or you want to open online parts store, Carros would be a great solution when you decide to build your brand-new business website. The template consists of 3 large HTML packs with more than 30 HTML files. Each pack represents different website scenario: auto repair service, auto tuning service, auto parts retailer. All pages and sections are interchangeable across the template which delivers great flexibility with a lot of combination options. Carros is built on Bootstrap 1170px grid, it’s fully responsive and retina-ready which means amazing mobile user experience.

General Markup

The general template structure is the same throughout the template. Here is the general structure.

<!DOCTYPE html>
<html lang="en" class="no-js">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Carros | Repair shop</title>

    <!-- Disable tap highlight on IE-->
    <meta name="msapplication-tap-highlight" content="no">

    <!-- Add to homescreen for Chrome on Android-->
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="application-name" content="">
    <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">

    <!-- Add to homescreen for Safari on iOS-->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Repair shop">
    <link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">

    <!-- Tile icon for Win8 (144x144 + tile color)-->
    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
    <meta name="msapplication-TileColor" content="#2F3BA2">

    <!-- Color the status bar on mobile devices-->
    <meta name="theme-color" content="#2F3BA2">

    <!-- Google fonts-->
    <link href="https://fonts.googleapis.com/css?family=Raleway:400,700%7CRoboto+Slab:300,400,700" rel="stylesheet">

    <!-- libs styles-->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet" href="css/custom-datepicker.css">
    <link rel="stylesheet" href="css/jquery.timepicker.css">
    <link rel="stylesheet" href="css/nouislider.min.css">
    <link rel="stylesheet" href="css/select2.min.css">
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/blueimp-gallery.min.css">

    <!-- Icon pack-->
    <link rel="stylesheet" href="css/flaticon.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/pe-icon-7-stroke.css">

    <!-- Custom styles-->
    <link rel="stylesheet" href="style.css">

    <script>
      // Picture element HTML5 shiv
      document.createElement("picture");
    </script>
    <script src="js/vendor/picturefill.min.js" async></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body id="home" class="page-home">

Features

Main template features

3 in 1 large HTML pack: Auto Service, Auto Tuning Center, Auto Parts Retailer
30+ professionally crafted HTML pages
3 different headers done in 3 themes
Bootstrap 3 based
100% responsive
Modern, clean design
Super detailed UI elements
Retina-ready vector graphics
Outstanding typography work
Smooth parallax backgrounds
Performant CSS3 animations & transitions
Video backgrounds support
Valid & well commented HTML5 code
Easy-to-customize template
Cross-browser optimization
BEM used for easy CSS code understanding
All source Jade & Sass files included
All PSD design files included (save $13)
Isotope filtering plugin for masonry galleries included (save $25)

In the zip package you download you will find 2 folders: HTML and DOCUMENTATION.

HTML FOLDER: this is the folder that concerns you. It contains the main html and css files. Make the customizations you need and upload this folder files to you server.
DOCUMENTATION FOLDER: info about this template

Plugin Name	Description
`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.
`Modernizr`	Modernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer.
`Equal Heights`	Simple jQuery plugin to equalize heights of multiple elements on a page.
`Jarallax`	High-Performance JavaScript Parallax Effect
`imagesLoaded`	Detects when images have been loaded.
`Masonry`	Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.
`Isotope`	Filter & sort layouts.
`blueimp Gallery`	A touch-enabled, responsive and customizable image & video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers.
`Counter-Up`	Counter-Up is a jQuery plugin that animates a number from zero (counting up towards it).
`bootstrap-datepicker`	Bootstrap-datepicker provides a flexible datepicker widget in the Bootstrap style.
`TimePicker`	A lightweight, customizable javascript timepicker plugin for jQuery inspired by Google Calendar.
`noUiSlider`	noUiSlider is a lightweight JavaScript range slider library. It offers a wide selection of options and settings, and is compatible with a ton of (touch) devices, including those running iOS, Android, Windows 8/8.1/10, Windows Phone 8.1 and Windows Mobile 10.
`bootstrap-validator`	A user-friendly HTML5 form validation jQuery plugin for Bootstrap.
`Select2`	Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.
`Owl Carousel`	Responsive carousel slider.
`Sly`	JavaScript library for one-directional scrolling with item based navigation support.
`jQuery Mouse Wheel Plugin`	A jQuery plugin that adds cross-browser mouse wheel support with delta normalization.
`jQuery Easing Plugin`	A jQuery plugin from GSGD to give advanced easing options.
`Waypoints`	Waypoints is the easiest way to trigger a function when you scroll to an element.

Stylesheets

Here's a list of the stylesheet files we are using with this template, you can find more information opening each file:

File Name	Description
`css/bootstrap.min.css`	Bootstrap base CSS file.
`css/animate.css"`	Animate.css - library for creating animation effects.
`css/custom-datepicker.css`	Datepicker custom style
`css/jquery.timepicker.css`
`css/nouislider.min.css`
`css/select2.min.css`
`css/owl.carousel.min.css`	Owl carousel - CSS styling for owl carousel slider.
`css/blueimp-gallery.min.css`	Blueimp gallery - used for styling portfolio galleries.
`css/flaticon.css`
`css/font-awesome.min.css`	The iconic font and CSS toolkit.
`css/pe-icon-7-stroke.css`	Pixeden Stroke 7 Icon Font Set.
`css/style.css`	Main Stylesheet of the template - where you will find most of the customizable CSS.
`css/style-rtl.css`	RTL Stylesheet

JavaScript Files

Here's a list of the javascript files we are using with this template.

Plugin Filename	Description
`js/google-map.js`
`js/vendor/jquery-3.1.1.min.js`	jQuery library. Latest version
`js/vendor/modernizr-2.8.3.min.js`	Modernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer.
`js/vendor/jquery.easing.min.js`	A jQuery plugin from GSGD to give advanced easing options.
`js/rem.min.js`	A polyfill to parse CSS links and rewrite pixel equivalents into head for non supporting browsers.
`js/vendor/wNumb.js`	JavaScript Number & Money formatting
`js/picturefill.min.js`	A responsive image polyfill.
`js/jquery.mousewheel.min.js`	A jQuery plugin that adds cross-browser mouse wheel support with delta normalization.
`js/imagesloaded.pkgd.min.js`	Checks if all images are loaded or confirmed broken. That allows to build masonry grid correctly.
`js/jquery.waypoints.min.js`	Tracing user's scrolling. Used in combo with Animate.css to create onscroll animations.
`js/sly.min.js`	JavaScript library for one-directional scrolling with item based navigation support.
`js/bootstrap.min.js`	Bootstrap's javascript file.
`js/jarallax.min.js js/jarallax-video.min.js`	Creates parallax effect.
`js/jarallax-video.min.js`
`js/masonry.pkgd.min.js`	Creates photo portfolio layout.
`js/isotope.pkgd.min.js`	Filters portfolio categories.
`js/jquery.counterup.min.js`	Animated counters in fun facts section.
`js/jquery.equalheights.min.js`	This plugin sets pricing tables to the equal heights.
`js/owl.carousel.min.js`	Carousel slider for testimonials section.
`js/blueimp-gallery.min.js`	Inits portfolio gallery.
`js/bootstrap-datepicker.min.js`	Bootstrap-datepicker provides a flexible datepicker widget in the Bootstrap style.
`js/jquery.timepicker.min.js`
`js/nouislider.min.js`	noUiSlider is a lightweight JavaScript range slider library.
`js/select2.min.js`	Custom selects
`js/select2-locate-en.js`
`js/validator.min.js`	A user-friendly HTML5 form validation jQuery plugin for Bootstrap.
`js/main.js`	js file for initialization and customization of the plugins found above.

Classes for header

navbar-default, navbar-accent, navbar-dark


<header class="page-header">
  <nav class="navbar navbar-[class-theme] navbar-repair">
    <div class="navbar-header">

Datepicker

Date formats https://bootstrap-datepicker.readthedocs.io/en/latest/options.html

$('.pick-date').datepicker({
  maxViewMode: 0,
  autoclose: true,
  format: "mm/dd/yyyy"
});

Timepicker

Formats http://jonthornton.github.io/jquery-timepicker/

$('.time-pick').timepicker({
  'showDuration': true,
  'timeFormat': 'H:i',
  'disableTextInput': true
});

Select2 & Validator

if ($(".select2").length) {
  $(".select2").select2({
    width: '100%'
  });
}

$.fn.validator.Constructor.INPUT_SELECTOR = ':input:not([type="submit"], button):enabled';
var formsValid = $('form[data-toggle="validator"]');
formsValid.validator({
  focus: false
}).on('submit', function(e) {
  if (e.isDefaultPrevented()) {
    // handle the invalid form...
  } else {
    // everything looks good!
  }
});

noUiSlider

Documentation https://refreshless.com/nouislider/

noUiSlider.create(sliderRange, {
  start: [15, 2451],
  connect: true,
  range: {
    min: 1,
    max: 5000
  },
  format: wNumb({
    decimals: 3,
    thousand: '.',
    prefix: '$ '
  })
});

Customizing facts counters

Open js/main.js file with any text editor and jump to the 230 line. You can change delay and duration of the counters animation. Just set those parameters in milliseconds.

$("[data-counter]").counterUp({
  delay: 10,
  time: 2000
});

Parallax background

$('.parallax').jarallax({
  speed: 0.74,
  type: 'scroll'
});

Customizing carousels

Support mouseDrag, touchDrag
For more information, please refer to Owl carousel official documentation.

// Carousels
var catalogCarousel = $(".main-product__carousel");
var testimonials = $('.testimonials-carousel');
var brandsCarousel = $(".brands-carousel");
var aboutGallery = $(".section-about__carousel");

Add video for section tour

Video link '3ET1wM5qUpM'

var videoTour = '3ET1wM5qUpM';

We've used the following images, icons or other files as listed.

JavaScript

Fonts & Icons

Images

Note: All images you may have seen in the live preview are not included to the final purchase.
Buy license pattern https://www.shutterstock.com/pic-358467122.html

Once again, thank you so much for purchasing this item. As we said at the beginning, we'd be glad to help you if you have any questions relating to this item. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Our profile page - http://themeforest.net/user/netgon

Carros — automotive HTML5 template - Documentation

Markup Markup customization and highlights