Flowtime.js Documentation

Flowtime.js is a framework designed for building HTML presentations or websites. It provides a full-page fluid layout boilerplate based on display: inline-block; that fits the viewport perfectly.

Key characteristics:

• Unstyled Foundation: It handles navigation, deep-linking, and layout logic, but does not force specific styles on your content. You can use the default theme or provide your own CSS.
• Client-side Framework: It relies on the HTML History APIs for navigation and deep-linking. For SEO purposes, you may need to implement server-side logic to serve single-page content to search engines.
• Browser Support: Works on all modern desktop browsers and IE9+. It falls back to native scrolling with anchor links if History APIs are unavailable.

Flowtime.js includes several built-in capabilities for interactive web content:

• Fragments Support: Allows step-by-step navigation of elements within a single page. Fragments can be nested and are managed via CSS classes.
• Overview Mode: Provides a bird's-eye view of the entire site or presentation structure. Users can navigate to a specific page by clicking it or using arrow keys followed by the Return key.
• History Management: Uses HTML History APIs for browser back/forward support and deep-linking via formatted hash destinations.
• Transitions: Uses native CSS3 transitions for page animations (falls back to immediate changes in IE9).
• Parallax Support: Includes native parallax effects powered by CSS3 transformations, configurable via data- attributes.

By default, Flowtime.js uses a layout where sections are arranged horizontally and pages are stacked vertically within each section.

To switch to an Alternate Horizontal Layout (where sections are stacked vertically and pages are arranged horizontally), add the class ft-cross to the main Flowtime element in your HTML document.

To build a minified version of Flowtime.js and autoprefix CSS files, you must have node.js, npm, and grunt installed.

1. Install dependencies:

npm install

2. Run the build task:

grant

Flowtime.js uses a nested structure of sections and pages.

1. Wrap everything in a <div class="flowtime"> container.
2. Create sections using class="ft-section".
3. Create individual pages within sections using class="ft-page".

Alternate Layout: To use the alternate layout, add the class ft-cross to the main .flowtime element.

Note: Even if you only have single slides, they must be nested within an .ft-section to be valid.

<div class="flowtime">
  <div class="ft-section">
    <div class="ft-page">Section 1 / Page 1</div>
    <div class="ft-page">Section 1 / Page 2</div>
  </div>
</div>

To create progressive reveals (elements that appear as you navigate forward and disappear when navigating back), add the class ft-fragment to the desired elements.

Fragment Behaviors:

• ft-fragment: Standard reveal.
• ft-fragment step: Partially fades out the fragment when the next one is selected.
• ft-fragment shy: Completely hides the fragment when it loses focus.

<div class="flowtime">
  <div class="ft-section" data-title="Section 1 Title" data-id="section-1">
    <div class="ft-page" data-title="Page 1 Title" data-id="page-1">
        <p>First Paragraph; this text is visible from start.</p>
        <p class="ft-fragment">This paragraph shows up only when you navigate forward and disappears when you navigate back.</p>
    </div>
  </div>
</div>

Flowtime.js uses native CSS3 transitions for fragment animations. To change the timing, easing, or visibility behavior of fragments, override the .ft-fragment and .ft-fragment.revealed classes. If you want fragments to be visible by default on a website, set the default opacity to 1.

  .ft-fragment {
    opacity: 0;
    transition: all 0.3s cubic-bezier(.77, .10, .22, 1);
  }

  .ft-fragment.revealed, .ft-fragment.revealed-temp {
    opacity: 1;
  }

  .ft-overview .ft-default-progress {
    opacity: 0;
    pointer-events: none;
  }

To add a parallax effect to elements, add the parallax class. You can control the movement distance using the data-parallax attribute.

data-parallax values:

• x,y (e.g., data-parallax="100,150"): Sets specific X and Y distances.
• value (e.g., data-parallax="200"): Sets both X and Y to the same value.
• No attribute: Uses default lengths.

<div class="flowtime">
  <div class="ft-section" data-id="section-1">
    <div class="ft-page" data-id="page-1">
        <p class="parallax">Parallaxed element. Will use the default lengths.</p>
        <p class="parallax" data-parallax="100,150">Parallaxed element. Will use the `data-parallax` attribute values.</p>
        <p class="parallax" data-parallax="200">Parallaxed element. Will use the `data-parallax` attribute value; x and y will be the same length.</p>
    </div>
  </div>
</div>

To use Flowtime.js, you need to include both CSS and JavaScript files in your HTML document.

CSS Setup

Include the required CSS inside the <head> tag. You must include css/flowtime.css and a theme CSS file (e.g., css/themes/default.css). You can also optionally include modifiers, such as css/modifiers/standard-ol.css.

JavaScript Setup

Include the required JavaScript files at the bottom of your document, just before the </body> tag. You have two options:

Option 1: Individual files (must be in this exact order)

<script src="js/brav1toolbox.js"></script>
<script src="js/flowtime.js"></script>

Option 2: Minified file

<script src="js/flowtime.min.js"></script>

Flowtime.js provides several options to define how users move between sections. These settings change the logic of how the presentation behaves when navigating via arrows, swipes, or specific API calls.

Key options include:

• gridNavigation(Boolean): (Default true) Determines if navigating between sections goes to the same page index or the first page of the next section.
• rememberSectionsStatus(Boolean): (Default false) If true, remembers the last visited page in every section.
• backFromPageToTop(Boolean): (Default false) If true, navigating back from the first page of a section always goes to the first page of the previous section.
• toSectionsFromPages(Boolean): (Default true) If false, prevents page-level navigation (keyboard/scroll) from crossing into new sections.