Spur

An open source admin template based on Bootstrap

Spur is a free and open source Bootstrap admin template with a handsome dashboard, chart.js, Font Awesome and much more.
License MIT
Version 1.1.0
Bootstrap 4.3.1
Author Alexander Rechsteiner

Overview

Spur is a Bootstrap admin template based on the latest version of the popular front-end framework. It features a customized build of Bootstrap (what I like to call a Bootstrap theme) as well as additional layouts and components for the purpose of building beautiful web applications. It is not a fork of Bootstrap, but rather follows the official guide on theming in order to achieve continuously matching styles for all Bootstrap and Spur components.

You can use Spur in combination with your favorite coding language or web framework, for example Rails, Laravel, Symfony, or any other tech stack that you use to render out HTML. It will provide you with a responsive web application layout and UI components so you don't have to worry about the UI implementation and can focus on your business logic.

Getting started

If you haven't already, you can download the package using the download button above. If you prefer to use the npm package manager, you can install Spur using the command

  
  npm install spur-template
  

The package contains HTML, CSS and JavaScript files. With the npm package, SCSS files are also included which you can use to further customize Spur and Bootstrap with your own variables.

Package contents

  
    + dist
    + -- css   // contains Spur CSS, which includes Bootstrap 4
    + -- html  // contains sample HTML files for reference
    + -- js    // some JavaScript sauce to make the UI work
    + scss     // SCSS sources (only in npm version and on GitHub)
  

Starter template and blank.html

The absolute minimal starter template closely resembles the one of Bootstrap 4. This template assumes installation under node_modules. If you manually download the package you must fix the references:

    
    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
      <link href="https://fonts.googleapis.com/css?family=Nunito:400,600|Open+Sans:400,600,700" rel="stylesheet">
      <link rel="stylesheet" href="/node_modules/spur-template/dist/css/spur.css">
      <title>Your title</title>
    </head>

    <body>

    <!-- layout and components go here -->

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    <script src="/node_modules/spur-template/dist/js/spur.js"></script>
    </body>
    </html>
    
  

Take a look at the HTML files in the folder dist/html. There is a blank page called blank.html which can serve as a starting point from where you can copy-paste other components and layouts as you see fit.

The Bootstrap Grid

The grid is probably one of Bootstrap's most defining features. Spur uses the container-fluid variant within it's application area. That means the twelve columns stretch with the viewport. Here's a screenshot of Spur with the grid overlayed as semi-transparent red columns:

Bootstrap grid overlayed on the admin template

As you can see, the grid is only used to align the components within the main application area, while the navigation and toolbar are positioned seperately. The column width adapts to the viewport width, while the gutter width stays constant at 30px.

Using Charts.js

While you can use any charting library that suits your needs, the demo includes some examples made with Chart.js

You can find some examples in chartjs.html as well as index.html. To make these work, two extra scripts are included in the headers of those files. Be sure to include these in the <header>, otherwise the chart examples won't work.

    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
    <script src="/node_modules/spur-template/dist/js/chart-js-config.js"></script>
    
  

The first line includes the library itself, the second is simply a small script that sets the colors and font so they match the rest of the template.

Customizing Spur

Spur uses the exact same strategy for customization as Bootstrap. This means you can include Spur in your own SCSS build and simply predefine the Spur and Bootstrap variables you wish to override.

If you've installed Spur using npm, simply include the file _spur-npm.scss. Your SCSS could look like this:

    
    $primary: #a382fa;
    @import '../node_modules/spur-template/scss/spur-npm.scss';
    
  

This would turn both Bootstrap's primary components as well as Spur's primary components purple.

For more info on how this customization strategoy works please check out my guide on customizing Bootstrap.