Carros — automotive HTML5 template - Documentation

Fully responsive multi-page template built on Bootstrap 3 Framework.

Item Support

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

  1. 3 in 1 large HTML pack: Auto Service, Auto Tuning Center, Auto Parts Retailer
  2. 30+ professionally crafted HTML pages
  3. 3 different headers done in 3 themes
  4. Bootstrap 3 based
  5. 100% responsive
  6. Modern, clean design
  7. Super detailed UI elements
  8. Retina-ready vector graphics
  9. Outstanding typography work
  10. Smooth parallax backgrounds
  11. Performant CSS3 animations & transitions
  12. Video backgrounds support
  13. Valid & well commented HTML5 code
  14. Easy-to-customize template
  15. Cross-browser optimization
  16. BEM used for easy CSS code understanding
  17. All source Jade & Sass files included
  18. All PSD design files included (save $13)
  19. 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">
          
$('.pick-date').datepicker({
  maxViewMode: 0,
  autoclose: true,
  format: "mm/dd/yyyy"
});
          
$('.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

  1. jQuery
  2. Modernizr
  3. jQuery Easing Plugin
  4. wNumb.js
  5. The HTML5 Shiv
  6. Picturefill
  7. REM unit polyfill
  8. jQuery Mouse Wheel Plugin
  9. Waypoints
  10. imagesLoaded
  11. imagesLoaded
  12. Sly
  13. Bootstrap
  14. Jarallax
  15. Masonry
  16. Isotope
  17. Counter-Up
  18. jQuery Simple Equal Heights
  19. Owl carousel
  20. Blueimp Gallery
  21. Datepicker for Bootstrap
  22. jquery.timepicker
  23. Select2
  24. noUiSlider
  25. Bootstrap Validator
  26. SVG Loaders

Fonts & Icons

  1. Flaticon
  2. Font Awesome
  3. Pixeden Stroke 7 Icon Font Set
  4. Google Fonts

Images

  1. Freepik
  2. Pixabay
  3. Unsplash
  4. Pexels
  5. Shutterstock

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