Spacial - Theme docs

Intro

Hi, I hope you find this theme useful! it has been crafted on top of the Bootstrap framework with new plugins and components, to help you build great websites and projects.

This theme includes 3 categories: a public multipurpose theme for businesses, startups, restaurants, photographers, etc. an agency theme for creative businesses, and an e-commerce theme for online stores, which you can navigate using the Theme demos link above.

This page includes all the documentation to understand how it is organized, make changes to the source code, compile and extend it to fit your needs.

Thanks, and enjoy!

What's included

Inside the theme folder you’ll find the following directories and files, organizing resources and providing both compiled and minified distribution files, as well as the source files.

  theme/
    ├── gulpfile.js
    ├── package.json
    ├── README.md
    ├── images/
    ├── fonts/
    ├── scss/
    │   ├── bootstrap/
    │   ├── vendor/
    │   ├── custom/
    │   └── variables.scss
    │   └── theme.scss
    ├── js/
    │   ├── bootstrap/
    │   └── vendor/
    │   └── custom/
    │   └── theme.js
    └── dist/
        ├── theme.min.css
        ├── theme.min.css.map
        ├── ecommerce.min.css
        ├── ecommerce.min.css.map
        └── theme.min.js

Gulpfile.js

The theme includes a custom Gulp file, which can be used to quickly re-compile and minify the theme’s SCSS and JS files and also to optimize images. You’ll need to install both Node and Gulp before using our included gulpfile.js.

Once node is installed, run the following command to install Gulp.

$ npm install gulp -g

After installing gulp, make sure you’ve installed the rest of the theme’s dependencies:

$ npm install

Now you're ready to to modify your source files and run gulp to generate new local dist/ files automatically. We've also included a gulp watch command so it keeps track of changes and compile the files on the fly.

Theme source code

The scss/ and js/ directories contain the source code for the CSS and JS. Within these folders you'll find the next subdirectories:

bootstrap/, which contains the most recently released Bootstrap (v3.3.7).
custom/, which contains all the styles and components made specifically for this theme.
vendor/, contains all the external plugins and their styles that are used in this theme.

The dist/ folder includes everything above built into a single CSS and JS file already compressed and minified.

For the styles, scss/theme.scss is the entry point for scss files. To make changes, simply modify your local custom files or edit the imports listed here.

Basic template

The basic template is a guideline for how to structure your pages when building new ones using this 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 http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap theme</title>

    <!-- Theme CSS file -->
    <link rel="stylesheet" type="text/css" href="dist/theme.min.css" />
  </head>
  <body>
    <h1>Hello world!</h1>

    <!-- include jQuery (required) and the theme JS file -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="dist/theme.min.js"></script>
  </body>
</html>

New components

Icons

Beside from the already included glyphicons from Bootstrap, this theme comes ready with some of the most famous icon bundles:

Ionicons

The premium icon font for the Ionic Framework.

Entypo

Entypo pictograms by Daniel Bruce — www.entypo.com

Icons ET-Line

A set of 100 high quality outline icons.

Font Awesome

The iconic font and CSS toolkit.

Examples

All these icons can be placed in just about any other element, so long as they are a separate HTML element (e.g., a <i>). See the examples below for how to put them to use.


<button class="btn btn-default" type="button">
  <i class="entypo-thumbs-up"></i>
  Btn default
</button>
<button class="btn btn-primary" type="button">
  <i class="entypo-thumbs-up"></i>
  Btn primary
</button>
<button class="btn btn-success" type="button">
  <i class="entypo-thumbs-up"></i>
  Btn success
</button>

Pill buttons


<button class="btn-pill btn-pill-sm btn-pill-default">Default</button>
<button class="btn-pill btn-pill-sm btn-pill-dark">Dark</button>
<button class="btn-pill btn-pill-sm btn-pill-primary">Primary</button>
<button class="btn-pill btn-pill-sm btn-pill-success">Success</button>
<button class="btn-pill btn-pill-sm btn-pill-info">Info</button>
<button class="btn-pill btn-pill-sm btn-pill-warning">Warning</button>
<button class="btn-pill btn-pill-sm btn-pill-danger">Danger</button>


<button class="btn-pill btn-pill-default">Default</button>
<button class="btn-pill btn-pill-dark">Dark</button>
<button class="btn-pill btn-pill-primary">Primary</button>
<button class="btn-pill btn-pill-success">Success</button>
<button class="btn-pill btn-pill-info">Info</button>
<button class="btn-pill btn-pill-warning">Warning</button>
<button class="btn-pill btn-pill-danger">Danger</button>


<button class="btn-pill btn-pill-lg btn-pill-default">Default</button>
<button class="btn-pill btn-pill-lg btn-pill-dark">Dark</button>
<button class="btn-pill btn-pill-lg btn-pill-primary">Primary</button>
<button class="btn-pill btn-pill-lg btn-pill-success">Success</button>
<button class="btn-pill btn-pill-lg btn-pill-info">Info</button>
<button class="btn-pill btn-pill-lg btn-pill-warning">Warning</button>
<button class="btn-pill btn-pill-lg btn-pill-danger">Danger</button>

Shadow buttons


<button class="btn-shadow btn-shadow-sm btn-shadow-default">Default</button>
<button class="btn-shadow btn-shadow-sm btn-shadow-primary">Primary</button>
<button class="btn-shadow btn-shadow-sm btn-shadow-dark">Dark</button>
<button class="btn-shadow btn-shadow-sm btn-shadow-info">Info</button>
<button class="btn-shadow btn-shadow-sm btn-shadow-warning">Warning</button>
<button class="btn-shadow btn-shadow-sm btn-shadow-success">Success</button>


<button class="btn-shadow btn-shadow-default">Default</button>
<button class="btn-shadow btn-shadow-primary">Primary</button>
<button class="btn-shadow btn-shadow-dark">Dark</button>
<button class="btn-shadow btn-shadow-info">Info</button>
<button class="btn-shadow btn-shadow-warning">Warning</button>
<button class="btn-shadow btn-shadow-success">Success</button>


<button class="btn-shadow btn-shadow-lg btn-shadow-default">Default</button>
<button class="btn-shadow btn-shadow-lg btn-shadow-primary">Primary</button>
<button class="btn-shadow btn-shadow-lg btn-shadow-dark">Dark</button>
<button class="btn-shadow btn-shadow-lg btn-shadow-info">Info</button>
<button class="btn-shadow btn-shadow-lg btn-shadow-warning">Warning</button>
<button class="btn-shadow btn-shadow-lg btn-shadow-success">Success</button>

Use the new .navbar-transparent variation for placing navbars over backgrounds and interactive content.


<nav class="navbar navbar-transparent" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="index.html">
        Spacial
      </a>
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">About us</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#" class="rounded">Link</a></li>
      </ul>
    </div>
  </div>
</nav>
<div class="transparent-navbar-header" style="background-image: linear-gradient(-45deg, #5F6190 0%, #525480 20%, #131b2e 100%);">
</div>

Plugins

Zoomerang

This zoom plugin made by yyx990803 provides image zoom functionality. Add a data-trigger="zoomerang" attribute to any image you want to make zoomable.


<img data-trigger="zoomerang" src="images/image1.jpg" style="width: 250px;">

Smooth page scrolling

The smooth scrolling feature is a nice way to let your users navigate your content while keeping track of where they are on the page, just like this page with the right sidebar.

You only need a link that users will click with the class .scroll to enable the functionality:


<a href="#intro" class="scroll">Intro</a>

And a section anywhere in the page with the same unique ID that you want to navigate to:


<div id="intro"">...</div>

Slider

This plugin made by Codrops enables a slider functionality with 14 different effects.

Effects:

Slide 1 content
Slide 2 content
Slide 3 content
Slide 4 content


<div id="spacial-slider" class="slider-component fxSideSwing">
  <ul class="itemwrap">
    <li class="current">
      <div class="pic" style="background-image: url('images/slide1.jpg');">
      </div>
      <h3>Slide content</h3>
    </li>
    <li>
      <div class="pic" style="background-image: url('images/slide2.jpg');">
      </div>
      <h3>Slide content</h3>
    </li>
    <li>
      <div class="pic" style="background-image: url('images/slide3.jpg');">
      </div>
      <h3>Slide content</h3>
    </li>
  </ul>
  <nav>
    <a class="prev" href="#">
      <span class="icon-wrap"></span>
    </a>
    <a class="next" href="#">
      <span class="icon-wrap"></span>
    </a>
  </nav>
</div>

Documentation