Two Up

A full-screen two column layout

A full-screen, two-section layout ideal for websites that need to show a bold image along with text content such as portfolios and product pages. As the user navigates content slides in from the bottom and the featured image sweeps in over the top of the previous one.

Theme Price:Free
Theme License: GPLv3
Choose a Sequence.js License
Demo Download
Two Up - Wide Layout Example

Desktop Layout Example

Two Up - Narrow Layout Example

Mobile Layout Example

  • Release Date

    August 9th 2015
  • Latest Update

    August 9th 2015
  • Theme Version

    1.0.0

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

    2.0.0

  • License

    GPLv3
  • Repo

    GitHub

  • Tags

Features

On mobile devices the theme uses a one-column layout showing the featured image on top with content underneath. The user can navigate between content using pagination or swiping. On desktop devices the layouts changes to two columns, showing content on the left and the featured image on the right. The theme includes custom functionality in the desktop layout to allow for navigation via the mousewheel and up/down/left/right keyboard keys; creating a feeling of a native app.

Responsive

Supports 320px width and up. Tested on mobile, tablet, and desktop devices. Small layout up to 768px, large layout 769px onwards

Touch Support

Touch swiping and tapping supported to allow for navigation between steps.

Cross Browser

Works across modern browsers, with a fallback theme in Internet Explorer 8 and 9.

Easily Modified

All Sequence.js themes can be easily modified using just HTML and CSS. This theme includes a Sass file and automated development environment via Grunt.js.

Quick Install

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

  1. Download and unzip your theme
  2. Move the two-up 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="two-up/css/sequence-theme.two-up.css" />
  4. From two-up/index.html, copy everything inside the <body></body> tags, then paste into the page you'd like the theme to appear on.
  5. From two-up/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="two-up/scripts/imagesloaded.pkgd.min.js"></script>
    <script src="two-up/scripts/hammer.min.js"></script>
    <script src="two-up/scripts/sequence.min.js"></script>
    <script src="two-up/scripts/sequence-theme.two-up.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 two-up/scripts/sequence-theme.two-up.js. See Options in the documentation.

To customize how a theme looks and how its step's transition, refer to the theme's stylesheet: two-up/css/sequence-theme.two-up.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.