1. Docs
  2. Introduction

Introduction

Get started with autoRoyal, Responsive Automotive Template for building responsive, mobile-first automotive sites, with Bootstrap.

Quick start

First of all you need Node.js to get started. You can download it here

Once Node.js is installed, open Terminal and run npm install to install all of autoRoyal dependencies. New folder node_modules will be created automaticaly.

npm install

Now you're ready to start building new pages. All you have to do is run gulp in Terminal. This will track all the sass file changes and start a local webserver at http://localhost:3000

gulp

While Gulp is running, Files in the pages, scss and js folders are monitored for changes, which will inject updated CSS or cause a refresh in Browsersync.

Hit Ctrl+C or just close the command line window to stop the server.

CSS

Copy-paste the autoRoyal stylesheets <link> into your <head> after all other stylesheets to load our CSS.

<!-- CSS autoRoyal Template -->
<link rel="stylesheet" href="assets/css/theme.css" />

JS

Many of Bootstrap's (since autoRoyal runs on Bootstrap) components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, Bootstrap JavaScript and our own JavaScript plugins. Place the following <script>s near the end of your pages, right before the closing </body> tag, to enable them. jQuery must come first, then Popper.js, Bootstrap's JavaScript, and then our plugins.

<!-- JS Global Compulsory -->
<script src="assets/vendor/jquery/dist/jquery.min.js"></script>
<script src="assets/vendor/jquery-ui/jquery-ui.min.js"></script>    
<script src="assets/vendor/popper.js/dist/umd/popper.min.j"></script>
<script src="assets/vendor/bootstrap/bootstrap.min.js"></script>

<!-- JS autoRoyal -->
<script src="assets/js/theme.js"></script>

Starter Template

This basic template is a guideline for how to structure your pages when building with our theme. Included below are all the necessary bits for using the theme’s CSS and JS.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <title>Hello World</title>

        <!-- CSS autoRoyal Template -->
        <link rel="stylesheet" href="assets/css/theme.css" />
    </head>
    <body>


        <!-- JS Global Compulsory -->
        <script src="assets/vendor/jquery/dist/jquery.min.js"></script>
        <script src="assets/vendor/jquery-ui/jquery-ui.min.js"></script>    
        <script src="assets/vendor/popper.js/dist/umd/popper.min.j"></script>
        <script src="assets/vendor/bootstrap/bootstrap.min.js"></script>

        <!-- JS autoRoyal -->
        <script src="assets/js/theme.js"></script>
    </body>
</html>

HTML5 doctype

autoRoyal requires the use of the HTML5 doctype. Without it, you'll see some funky incomplete styling, but including it shouldn't cause any considerable hiccups.

<!doctype html>
<html lang="en">
    ...
</html>

Responsive meta tag

autoRoyal is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Jump to
Top