1. Docs
  2. Introduction

Introduction

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

CSS

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

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

JS

Many of Bootstrap's (since RoyalAds 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 RoyalAds -->
<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 RoyalAds 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 RoyalAds -->
        <script src="assets/js/theme.js"></script>
    </body>
</html>

HTML5 doctype

RoyalAds 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

RoyalAds 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