Starter Basic

A base theme to start your own themes with

Use this blank theme to start building your own themes. Ideal for themes that only require content animation, without canvas animation.

Theme Price:Free
Theme License: GPLv3
Choose a Sequence.js License
Demo Download
Starter Basic - Wide Example

Desktop Layout Example

Starter Basic - Narrow Example

Mobile Layout Example

  • Release Date

    August 9th 2015
  • Latest Update

    August 9th 2015
  • Theme Version


  • Sequence.js Version
    What is the purpose of the Recommended Sequence.js Version?
    The recommended Sequence.js version this theme is packaged with. Other versions may work but may not have been fully tested.


  • License

  • Repo


  • Tags


Creating your own Sequence.js theme? To get started as quick as possible, use this theme. It comes with basic HTML and CSS to layout a full width Sequence.js theme so you can add your own content, styles, and transitions.

This theme can also be installed via Yeoman.

Quick Install

To add a Sequence.js theme to a web page, complete the following:

  1. Download and unzip your theme
  2. Move the starter-basic folder to the same folder as the page you'd like the Sequence.js theme to appear on
  3. Add the theme's stylesheet within the <head></head> tags on your page, below existing stylesheets. For example:
    <link rel="stylesheet" href="starter-basic/css/sequence-theme.starter-basic.css" />
  4. From starter-basic/index.html, copy everything inside the <body></body> tags, then paste into the page you'd like the theme to appear on.
  5. From starter-basic/index.html, copy any <script></script> elements found toward the bottom of the page and paste just before the closing </body> tag. This should include a reference to the Sequence.js library, its third-party dependencies, and the theme's options, for example:
    <script src="starter-basic/scripts/imagesloaded.pkgd.min.js"></script>
    <script src="starter-basic/scripts/hammer.min.js"></script>
    <script src="starter-basic/scripts/sequence.min.js"></script>
    <script src="starter-basic/scripts/sequence-theme.starter-basic.js"></script>
  6. Save your page and view in the browser.

Refer to your theme's README file for any additional instructions.

Customizing a Theme

To customize how a theme behaves, its Sequence.js options can be changed in starter-basic/scripts/sequence-theme.starter-basic.js. See Options in the documentation.

To customize how a theme looks and how its step's transition, refer to the theme's stylesheet: starter-basic/css/sequence-theme.starter-basic.css.

It is recommended to read Setting Up a Theme in the documentation for an overview of how transitions are applied to Sequence.js steps.