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 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>

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>