# Using the Starter Template

Jumpstart includes a skeleton template so you can make a quick start. Follow this guide to build upon the base template.

###

The Basic Skeleton

Shown here is the most basic skeleton for a Jumpstart page. In this guide, we will build upon this skeleton, adding more parts to complete a full page.

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

      <head>
        <meta charset="utf-8">
        <title>Jumpstart SaaS App & Software Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Bootstrap HTML template and UI kit by Medium Rare">
        <link href="assets/css/theme.css" rel="stylesheet" type="text/css" media="all" />
        <link href="https://fonts.googleapis.com/css?family=Nunito:400,400i,600,700&display=swap" rel="stylesheet">
      </head>

      <body>

      </body>

    </html>

Below is the same basic skeleton with comments added for clarity.

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

      <head>
        <!-- Describes the encoding of the page to the browser -->
        <meta charset="utf-8">

        <!-- Sets the title of the page.  Shown in the tab of your browser -->
        <title>Jumpstart SaaS App & Software Template</title>

        <!-- Required for Bootstrap's responsive media queries to function -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- Meta tag for basic SEO -->
        <meta name="description" content="Bootstrap HTML template and UI kit by Medium Rare">

        <!-- Main Theme CSS styles -->
        <link href="assets/css/theme.css" rel="stylesheet" type="text/css" media="all" />

        <!-- Font linked from external Google Fonts resource -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:400,400i,600,700&display=swap" rel="stylesheet">
      </head>

      <body>

        <!-- Main Nav Bar -->

        <!-- Main Body Content -->

        <!-- Footer -->

        <!-- "Back to top" button -->

        <!-- Scripts -->

      </body>

    </html>

###

Main Nav Bar

The main nav bar is the first child of the `<body>`. It is wrapped in a `div.navbar-container` which facilitates sticky and overlay positioning of the nav.

    <div class="navbar-container">
      <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container">

          <!-- Brand Logo -->
          <a class="navbar-brand navbar-brand-dynamic-color fade-page" href="index.html">
            <img alt="Jumpstart" data-inject-svg src="assets/img/logos/jumpstart.svg">
          </a>

          <!-- The "Buy Jumpstart" and Mobile nav toggler are housed here.  Note the "order-*" utility class which changes this group's order on a large screen. -->
          <div class="d-flex align-items-center order-lg-3">

            <!-- "Buy Jumpstart" button -->
            <a href="#purchase" class="btn btn-primary ml-lg-4 mr-3 mr-md-4 mr-lg-0 d-none d-sm-block order-lg-3">Buy Jumpstart</a>

            <!-- Nav toggler for mobile -->
            <button aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navigation-menu" data-toggle="collapse" type="button">
              <img alt="Navbar Toggler Open Icon" class="navbar-toggler-open icon icon-sm" data-inject-svg src="assets/img/icons/interface/icon-menu.svg">
              <img alt="Navbar Toggler Close Icon" class="navbar-toggler-close icon icon-sm" data-inject-svg src="assets/img/icons/interface/icon-x.svg">
            </button>
          </div>

          <!-- A group of nav dropdowns --->
          <div class="collapse navbar-collapse order-3 order-lg-2 justify-content-lg-end" id="navigation-menu">
            <ul class="navbar-nav my-3 my-lg-0">

              <!-- Single-level dropdown -->
              <li class="nav-item">
                <div class="dropdown">
                  <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle nav-link nav-item arrow-bottom" data-toggle="dropdown-grid" href="#" role="button">Demos</a>
                  <div class="row dropdown-menu">
                    <div class="col-auto" data-dropdown-content>
                      <div class="dropdown-grid-menu">
                        <a href="index.html" class="dropdown-item fade-page">Overview</a>
                        <a href="landing-1.html" class="dropdown-item fade-page">Landing 1</a>
                        <a href="landing-2.html" class="dropdown-item fade-page">Landing 2</a>
                        <a href="landing-3.html" class="dropdown-item fade-page">Landing 3</a>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <!-- End single-level dropdown

              <!-- Double-level dropdown -->
              <li class="nav-item">

                <!-- First level -->
                <div class="dropdown">
                  <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle nav-link nav-item arrow-bottom" data-toggle="dropdown-grid" href="#" role="button">Pages</a>
                  <div class="row dropdown-menu">
                    <div class="col-auto" data-dropdown-content>
                      <div class="dropdown-grid-menu">

                        <!-- Second level -->
                        <div class="dropdown">
                          <a aria-expanded="false" aria-haspopup="true" class="dropdown-item" data-toggle="dropdown-grid" href="#" role="button">Company</a>
                          <div class="row dropdown-menu">
                            <div class="col-auto" data-dropdown-content>
                              <div class="dropdown-grid-menu">
                                <a href="company-about-1.html" class="dropdown-item fade-page">About 1</a>
                                <a href="company-about-2.html" class="dropdown-item fade-page">About 2</a>
                              </div>
                            </div>
                          </div>
                        </div>
                        <!-- End second level -->

                      </div>
                    </div>
                  </div>

                </div>
                <!-- End first level -->

              </li>
              <!-- End double-level dropdown -->

            </ul>
            <!-- End of dropdown group -->

          </div>
          <!-- End navbar collapse -->

        </div>
        <!-- End container -->

      </nav>
      <!-- End nav -->

    </div>
    <!-- End navbar container-->

###

Main Body Content

The body content is made up of `<div>` and `<section>` elements. This example is taken from the hero section on `index.html`. Repeat content sections in the `<body>` before finishing with the `<footer>`.

    <section class="pb-0">
      <!-- Main content container -->
      <div class="container">
        <div class="row justify-content-center text-center min-vh-40 d-flex flex-column align-items-center">
          <div class="col-md-10 col-lg-9 col-xl-8" data-aos="fade-up">
            <h1 class="display-3">A modular UI Kit for<br> <mark><span data-typed-text data-loop="true" data-type-speed="90" data-strings='["Bootstrap","quick deployment","static sites","rapid development","clever startups"]'></span></mark></h1>
            <p class="lead px-xl-5">Launch your site in style with Jumpstart, a tidy collection of crafted pages and modular components.</p>
            <div class="d-flex flex-column flex-sm-row mt-4 mt-md-5 justify-content-center" data-aos="fade-up" data-aos-delay="300">
              <a href="#landing-pages" class="btn btn-primary btn-lg mx-sm-2 my-1 my-sm-0" data-smooth-scroll>View Demos</a>
              <a href="#purchase" class="btn btn-outline-primary btn-lg mx-sm-2 my-1 my-sm-0">Purchase</a>
            </div>
          </div>
        </div>
      </div>

      <!-- Blob graphics -->
      <div class="position-absolute bottom left w-50 h-50 d-none d-md-block" data-jarallax-element="-24 48">
        <div class="blob bg-gradient w-50 h-100 bottom left"></div>
      </div>
      <div class="position-absolute top right w-50 h-50 d-none d-md-block" data-jarallax-element="48">
        <div class="blob blob-2 bg-gradient w-50 h-50 top right"></div>
      </div>

      <!-- Divider graphic -->
      <div class="divider divider-bottom bg-primary-3"></div>
    </section>

###

Footer

The footer element resides in the `<body>`, at the end of all sections. This is a stripped-back example of the footer used in Jumpstart.

    <footer class="bg-primary-3 text-white links-white pb-4 footer-1">
      <div class="container">
        <div class="row">

          <!-- Demo column -->
          <div class="col-xl-auto mr-xl-5 col-md-3 mb-4 mb-md-0">
            <h5>Demos</h5>
            <ul class="nav flex-row flex-md-column">
              <li class="nav-item mr-3 mr-md-0">
                <a href="landing-1.html" class="nav-link fade-page px-0 py-2">Landing 1</a>
              </li>
              <li class="nav-item mr-3 mr-md-0">
                <a href="landing-2.html" class="nav-link fade-page px-0 py-2">Landing 2</a>
              </li>
            </ul>
          </div>

          <!-- Pages column -->
          <div class="col-xl-auto mr-xl-5 col-md-3">
            <h5>Pages</h5>
            <ul class="nav flex-row flex-md-column">
              <li class="nav-item mr-3 mr-md-0">
                <a href="company-about-1.html" class="nav-link fade-page px-0 py-2">Company</a>
              </li>
              <li class="nav-item mr-3 mr-md-0">
                <a href="blog-listing-1.html" class="nav-link fade-page px-0 py-2">Blog</a>
              </li>
            </ul>
          </div>

          <!-- Articles column -->
          <div class="col mt-4 mt-md-0 mt-lg-5 mt-xl-0 order-lg-4 order-xl-3">
            <h5>Articles</h5>
            <ul class="list-unstyled d-flex flex-wrap">
              <li class="col-12 col-lg-6 col-xl-12 px-0">
                <div class="row my-2 my-md-3">
                  <a class="col-5" href="#">
                    <img class="rounded img-fluid hover-fade-out" src="assets/img/blog/thumb-2.jpg" alt="blog.1.image">
                  </a>
                  <div class="col">
                    <a class="h6" href="#">Unveiling our new vision for Jumpstart</a>
                    <div class="text-small text-muted mt-2">October 10th</div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>

        <!-- hr element before fine print -->
        <div class="row">
          <div class="col">
            <hr>
          </div>
        </div>

        <!-- Social icons -->
        <div class="row flex-column flex-lg-row align-items-center justify-content-center justify-content-lg-between text-center text-lg-left">
          <div class="col-auto mt-3 mt-lg-0">
            <ul class="list-unstyled d-flex mb-0">
              <li class="mx-3">
                <a href="#" class="hover-fade-out">
                  <img src="assets/img/icons/social/dribbble.svg" alt="Dribbble" class="icon icon-xs bg-white" data-inject-svg>
                </a>
              </li>
              <li class="mx-3">
                <a href="#" class="hover-fade-out">
                  <img src="assets/img/icons/social/twitter.svg" alt="Twitter" class="icon icon-xs bg-white" data-inject-svg>
                </a>
              </li>
            </ul>
          </div>
        </div>

      </div>
    </footer>

###

Back To Top Button

The "Back To Top" button can be inserted anywhere on the page, but it makes best sense to include it at the end of the `<body>`. Toggling the hide/show animation of the button is controlled by the Animate on Scroll plugin, with the `mirror` setting activated, which allows us to display the button at a specified scroll depth on the page and have it disappear when the user scrolls back up the page.

    <a href="#top" class="btn btn-primary rounded-circle btn-back-to-top" data-smooth-scroll data-aos="fade-up" data-aos-offset="2000" data-aos-mirror="true" data-aos-once="false">
      <img src="assets/img/icons/interface/icon-arrow-up.svg" alt="Icon" class="icon bg-white" data-inject-svg>
    </a>

For a detailed explanation of how this works, please refer to the Back to Top button guide.

###

Scripts

Javascript is required to enhance pages with interactive effects, from toggling hide/show states to parallax scroll effects.

Scripts are placed at the end of the body to prevent the loading of scripts from interfering with the loading of the page's HTML. This allows the browser to display the page much faster, giving the user a more satisfying experience.

Remove the scripts for plugins which are not used in the page. This prevents the user downloading unnecessary data and improves the load times of your page.

    <!-- Required vendor scripts (Do not remove) -->
    <script type="text/javascript" src="assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="assets/js/popper.min.js"></script>
    <script type="text/javascript" src="assets/js/bootstrap.js"></script>

    <!-- Optional Vendor Scripts (Remove the plugin script here and comment initializer script out of index.js if site does not use that feature) -->

    <!-- AOS (Animate On Scroll - animates elements into view while scrolling down) -->
    <script type="text/javascript" src="assets/js/aos.js"></script>

    <!-- Clipboard (copies content from browser into OS clipboard) -->
    <script type="text/javascript" src="assets/js/clipboard.min.js"></script>

    <!-- Fancybox (handles image and video lightbox and galleries) -->
    <script type="text/javascript" src="assets/js/jquery.fancybox.min.js"></script>

    <!-- Flatpickr (calendar/date/time picker UI) -->
    <script type="text/javascript" src="assets/js/flatpickr.min.js"></script>

    <!-- Flickity (handles touch enabled carousels and sliders) -->
    <script type="text/javascript" src="assets/js/flickity.pkgd.min.js"></script>

    <!-- Ion rangeSlider (flexible and pretty range slider elements) -->
    <script type="text/javascript" src="assets/js/ion.rangeSlider.min.js"></script>

    <!-- Isotope (masonry layouts and filtering) -->
    <script type="text/javascript" src="assets/js/isotope.pkgd.min.js"></script>

    <!-- jarallax (parallax effect and video backgrounds) -->
    <script type="text/javascript" src="assets/js/jarallax.min.js"></script>
    <script type="text/javascript" src="assets/js/jarallax-video.min.js"></script>
    <script type="text/javascript" src="assets/js/jarallax-element.min.js"></script>

    <!-- jQuery Countdown (displays countdown text to a specified date) -->
    <script type="text/javascript" src="assets/js/jquery.countdown.min.js"></script>

    <!-- Plyr (unified player for Video, Audio, Vimeo and Youtube) -->
    <script type="text/javascript" src="assets/js/plyr.polyfilled.min.js"></script>

    <!-- Prism (displays formatted code boxes) -->
    <script type="text/javascript" src="assets/js/prism.js"></script>

    <!-- ScrollMonitor (manages events for elements scrolling in and out of view) -->
    <script type="text/javascript" src="assets/js/scrollMonitor.js"></script>

    <!-- Smooth scroll (animation to links in-page)-->
    <script type="text/javascript" src="assets/js/smooth-scroll.polyfills.min.js"></script>

    <!-- SVGInjector (replaces img tags with SVG code to allow easy inclusion of SVGs with the benefit of inheriting colors and styles)-->
    <script type="text/javascript" src="assets/js/svg-injector.umd.production.js"></script>

    <!-- TwitterFetcher (displays a feed of tweets from a specified account)-->
    <script type="text/javascript" src="assets/js/twitterFetcher_min.js"></script>

    <!-- Typed text (animated typing effect)-->
    <script type="text/javascript" src="assets/js/typed.min.js"></script>

    <!-- Required theme scripts (Do not remove) -->
    <script type="text/javascript" src="assets/js/theme.js"></script>

###

Page Loading Animation

The page loading animation effect is optional. The CSS and JS for the loader is located in the `<head>`, right before `theme.css`.

The HTML for the loader is the first child of the body to ensure that the loader will always be the first elements displayed on the page.

Below is the skeleton template with the page loading animation code added.

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

      <head>
        <meta charset="utf-8">
        <title>Jumpstart SaaS App & Software Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Bootstrap HTML template and UI kit by Medium Rare">

        <!-- Start Page Loader -->
        <style>
          @keyframes hideLoader{ 0%{ width: 100%; height: 100%; } 100%{ width: 0; height: 0; } } body > div.loader{ position: fixed; background: white; width: 100%; height: 100%; z-index: 1071; opacity: 0; transition: opacity .5s ease; overflow: hidden; pointer-events: none; display: flex; align-items: center; justify-content: center; } body:not(.loaded) > div.loader{ opacity: 1; } body:not(.loaded){ overflow: hidden; } body.loaded > div.loader{ animation: hideLoader .5s linear .5s forwards; } .loading-animation{width:40px;height:40px;margin:100px auto;background-color:#009B72;border-radius:100%;animation:pulse 1s infinite ease-in-out}@keyframes pulse{0%{-webkit-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}
        </style>
        <script type="text/javascript">
          window.addEventListener("load",function(){document.querySelector('body').classList.add('loaded');});
        </script>
        <!-- End loading animation -->

        <link href="assets/css/theme.css" rel="stylesheet" type="text/css" media="all" />
        <link href="https://fonts.googleapis.com/css?family=Nunito:400,400i,600,700&display=swap" rel="stylesheet">
      </head>

      <body>
        <!-- Start Loader -->
        <div class="loader">
          <div class="loading-animation"></div>
        </div>
        <!-- End Loader -->

        <!-- Main Nav Bar -->
        <!-- Main Body Content -->
        <!-- Footer -->
        <!-- Back To Top button -->
        <!-- Scripts -->

      </body>

    </html>