Learning Hub

Get your web site working with RecurringStack™ using one of our quick start guides or developers can dive-in to our robust API documentation.

API Reference

Library
Tutorials & Guides

Request Help

<

What is RecurringStack™?

There are multiple methods of implementing RecurringStack™ with your web site, backend systems, or any other type of application. Take a moment and choose the method that seems right for you below. Before you get started with your implementation method of choice you should follow the "Initial Setup" guide to enure you don't run into any issues with your integration.

Getting Started

There are multiple methods of implementing RecurringStack™ with your web site, backend systems, or any other type of application. Take a moment and choose the method that seems right for you below. Before you get started with your implementation method of choice you should follow the "Initial Setup" guide to enure you don't run into any issues with your integration.

Important!

To avoid integration issues and to help get setup as quickly as possible we recommend all new brands complete the Quickstart guide.

Start Here:

  1. Quickstart Guide 10 Minutes Recommended
    Get up and running with RecurringStack™ quickly regardless of your chosen integration method.
  2. Getting Started with the RecurringStack™ API.
  3. Run Gulp
1

Install Node.js and Gulp

Installing Node.js

If you do not have Node installed already, you can get it by downloading the package installer from Node's website. Please download the stable version of Node.js (LTS) NOT the latest.

Installing Gulp

You need to have Node.js (Node) installed onto your computer before you can install Gulp. When you're done with installing Node, you can install Gulp by using the following command in the command line:

Please note, first Gulp should be installed globally and for that reason -g command is used.

            
              npm install gulp-cli -g

Important!

Note: If you are using MacOS please use sudo keyword in the command because they need administrator rights to install Gulp globally.

2

Install NPM modules package.json

Installing NPM modules

First, change the command line path into your project folder. if you have not done this before, you may check the following article to quick start http://www.digitalcitizen.life/command-prompt-how-use-basic-commands

Once the path of your workflow is changed to RecurringStack Kit folder, you may run package.json file by using the following command:

            
              npm install

This time, we're installing Gulp with its all dependency plugins like gulp-sass and others. It might take a few minutes, depends on your internet connection.

3

Run Gulp

Now we have an integrated workflow, try it out run:

            
              gulp

Now you can try making some changes to assets/include/scss/styles.scss and save it.

Important!

if you are updating any variables, please make sure to save _custom.bootstrap.variables.scss file. It must be refreshed when any varialbes is udated as we updated core Bootstrap codes through SASS to avoid code duplications. The file is located in the following path: assets/include/scss/vendors/bootstrap/..

OR simply re-run Gulp and all changes will be automatically up to date.

Starter Template

Start with this basic HTML starter template, or modify any included layout pages. Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:

          
            <!doctype html>
            <html lang="en">
              <head>
                <title>Hello World!</title>

                <!-- Meta -->
                <meta charset="utf-8">
                <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

                <!-- Favicon -->
                <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

                <!-- Web Fonts -->
                <link href="//fonts.googleapis.com/css?family=Playfair+Display:400,700%7COpen+Sans:300,400,600,700" rel="stylesheet">

                <!-- Bootstrap CSS -->
                <link rel="stylesheet" type="text/css" href="assets/vendors/bootstrap/css/bootstrap.css">

                <!-- Theme Styles -->
                <link rel="stylesheet" type="text/css" href="assets/css/styles.css">
              </head>

              <body>
                <h1>Hello World!!</h1>

                <!-- JAVASCRIPTS (Load javascripts at bottom, this will reduce page load time) -->
                <!-- Global Vendor -->
                <script src="assets/vendors/jquery.min.js"></script>
                <script src="assets/vendors/jquery.migrate.min.js"></script>
                <script src="assets/vendors/popper.min.js"></script>
                <script src="assets/vendors/bootstrap/js/bootstrap.min.js"></script>

                <!-- Theme Settings and Calls -->
                <script src="assets/js/main.js"></script>
                <!-- END JAVASCRIPTS -->
              </body>
            </html>

Base UI

Colors

We've updated Bootstrap’s default colors to brighter and trendy color variations in order to improve the contrast and design.

  • #107ef4 .bg-primary
    .text-primary
  • #f9fafc .bg-secondary
    .text-secondary
  • #00c9a7 .bg-success
    .text-success
  • #de4437 .bg-danger
    .text-danger
  • #ffc107 .bg-warning
    .text-warning
  • #00dffc .bg-info
    .text-info
  • #1e2022 .bg-dark
    .text-dark
  • #000000 .bg-black
    .text-black
  • #f5faff .bg-light
    .text-light
  • #fff .bg-white
    .text-white

Typography

Bootstrap sets basic global display, typography, and link styles. Learn more about options of Boostrap Typography here. When more control is needed, check out the textual utility classes.

Headings

Heading 1

h1. RecurringStack Kit heading New

Heading 2

h2. RecurringStack Kit heading New

Heading 3

h3. RecurringStack Kit heading New

Heading 4

h4. RecurringStack Kit heading New

Heading 5
h5. RecurringStack Kit heading New
Heading 6
h6. RecurringStack Kit heading New

Google Fonts

Aa

Roboto

Light

AaBbCcDd


Regular

AaBbCcDd

Bold

AaBbCcDd


Numbers (Light)

0123456789

Aa

Roboto

Light

AaBbCcDd


Regular

AaBbCcDd

Bold

AaBbCcDd


Numbers (Light)

0123456789

Lead

This is Lead text and vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, simple and easy for any content and other random text content is here est non commodo luctus.

Others

Credits

First, let us take this opportunity to thank all the creative minds for their great products and hard work. All used third party libraries are located in assets/vendor/.. and image sources in assets/img-temp/..

Libraries

Name License URL
Bootstrap MIT https://getbootstrap.com
jQuery MIT http://jquery.com
Font Awesome CC BY 4.0 https://fontawesome.com
Slick Carousel MIT http://kenwheeler.github.io/slick
jQuery Parallax MIT & GPL https://ianlunn.co.uk/plugins/jquery-parallax
Typed.js MIT https://mattboldt.com/demos/typed-js
Counter-Up GNU-2.0 https://github.com/bfintal/Counter-Up
Waypoints MIT https://github.com/bfintal/Counter-Up
Magnific Popup MIT http://dimsemenov.com/plugins/magnific-popup
Shuffle MIT https://vestride.github.io/Shuffle

Fonts & Images

License

RecurringStack Kit is Open Source project and licensed under MIT for better Web.