<commit_before>![Flowtime.js](https://github.com/marcolago/flowtime.js/raw/master/assets/img/logo-black.png "Flowtime.js Logo")

### Flowtime.js is a framework for easily building HTML presentations or websites.

You can take a look at the [sample presentation](http://marcolago.github.io/flowtime.js/) to quick learn about the possibilities:

**For more information check the [wiki](https://github.com/marcolago/flowtime.js/wiki)**
- [Browser Support](https://github.com/marcolago/flowtime.js/wiki/Browser-Support)
- [Made with Flowtime.js](https://github.com/marcolago/flowtime.js/wiki/Made-With-Flowtime.js)
- [Credits and Thanks](https://github.com/marcolago/flowtime.js/wiki/Credits-and-Thanks)

### If You Find Flowtime.js Useful

If you used Flowtime.js to build a website, a webapp or a presentation, consider to do one or more of these things.

 - Spread the word.  
 - Let me know where I can see your project (and tell me if I can add to the [Made with Flowtime.js](https://github.com/marcolago/flowtime.js/wiki/Made-With-Flowtime.js) page). 
 - [Open an issue](https://github.com/marcolago/flowtime.js/issues) to report a bug or to request a feature.
 - If you wish to donate:  
[![paypal](https://www.paypalobjects.com/en_GB/i/btn/btn_donate_SM.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=9TW923Y3US7LG)


## Build presentations online with Flowtime.js and SlideCaptain

Flowtime.js is the slide engine used by [SlideCaptain](http://slidecaptain.com/).
If you prefer a WYSIWYG editor or you feel not comfortable with plain HTML you can try [SlideCaptain](http://slidecaptain.com/): a powerful web app for building well-structured presentations in your browser.
SlideCaptain adds many features to Flowtime.js like MathJax™ support and PDF export tool .

SlideCaptain is developed by [Engawa](http://engawa.de/).

## Major Updates

- **May 20 2014**
    - Added new section navigation modifiers. See [Section Navigation Options](#section-navigation-options) for the updates.

- **May 12 2013**
    - Added the autoplay configuration functions and `start()`, `pause()` and `stop()` methods. ([#18](https://github.com/marcolago/flowtime.js/issues/18))
    - Now the presentations is loopable both for page and section navigation. ([#18](https://github.com/marcolago/flowtime.js/issues/18))

- **March 3 2014**
    - Added methods to enable and disable navigation logics at runtime.
    - Added options to get alternative horizontal layout; sections are stacked vertically and pages are arranged horizontally.
    - Added option to reconfigure key bindings for some wireless presenters. ([#15](https://github.com/marcolago/flowtime.js/issues/15))

## Main Features

**Full Page Fluid Layout Boilerplate**.
Flowtime.js is designed to perfectly fit your viewport and is based on a solid `display: inline-block;` foundation.
This frameworks doesn’t style your presentations or sites for you but it takes care of all the annoying things like navigation and deep-linking, so you are free to style every single element of your design as you like.
But for the ones who need a ready-to-use tool it comes with a default theme that you can edit or you can add new themes just by linking your css files.

**Alternate Horizontal Layout**
The default layout has sections arranged side by side horizontally and pages stacked vertically in each section.
You can use the alternate layout with sections stacked vertically and pages arranged horizontally by adding the class `ft-cross` to the Flowtime element in the HTML document.
See **How to Build the Markup** section for an example.

**Multiple Controls Navigation**.
You can navigate through pages via links, keyboard, mouse, gestures or deep-linking.
Links are managed using the href value targeting a formatted hash destination; see the demos source code for more examples.
Keyboard navigation is based on arrow keys with the Shift key as a modifier to jump over fragments or sections, see the command list:

- **Down or Up Arrows**: navigate to the next or previous page. This is the main navigation action; the entire content is navigable using this keys only. If there are fragments in the page every input shows or hides a fragment.
- **Shift + Down or Up Arrows**: navigate to the next or previous page jumping all the fragments.
- **Left or Right Arrows**: navigate to the previous or next section. By default the destination will be the page at the same index of the starting point (if you are at page 3 in the section 2 you will go to the page 3 in the section 3). If the same index does not exist the destination will be the higher available index (see [Section Navigation Options](#section-navigation-options) for more options).
- **Shift + Left or Right Arrows**: navigate to the first page of the previous or next section.
- **Page Up**: navigates to the first page of the current section.
- **Page Down**: navigates to the last page of the current section.
- **Home**: navigates to the first page of the presentation/website.
- **End**: navigates to the last page of the presentation/website.
- **ESC**: toggles the overview mode.

**Fragments Support**.
It’s possibile to navigate fragments step by step in a page or jump directly to the next or previous page.
You can hide or show every single fragment with special behaviour managed and styled by CSS classes, and you can even nest fragments.

**Overview Mode**.
Overview mode allows you to look at the entire site/presentation structure in a single view or from a distant point of view (alternate version).
When in overview mode you can navigate to a page by click on it or using the arrow keys and **then pressing Return key**.

**History Management**.
Flowtime.js is built on top of the **HTML History APIs** so you can navigate using the browser’s back and forward buttons and deep-link a page for sharing.
Flowtime.js is a client side only framework so if you want to optimize SEO you have to add a server side logic to serve only the single page content to search engines.
If the History APIs were not available the framework degrades well using the hashchange event.

**Transitions**.
Flowtime.js animates the page transition using **native CSS3 transitions**. Where transitions were not available (IE9) the page change is immediate but works as expected.

**Parallax Support**
Integrated native parallax support based on CSS3 transformations and configurable by adding `data-` attributes.

**Browser Support**
Flowtime.js is tested and works on **every modern desktop browser and IE9 and above**.
Where the basic support is not available the framework degrades to the native scrolling with anchor links, but the full page fluid layouts remains intact.

## How to build minified Flowtime.js

You need **[node.js](https://nodejs.org/)**, **[npm](https://www.npmjs.com/)** and **[grunt](http://gruntjs.com/)** installed in order to build a minified version of Flowtime.js and to autoprefix CSS files.  
You can install dependencies running
```
npm install
```

To create the minified build and autoprefixed CSS just run
```
grunt 
```

## How to Include Flowtime.js in Your Projects

**Include the required CSS** inside the `<head>` tag in your document.
You have to include the `css/flowtime.css` file and a theme CSS file; Flowtime.js comes with the `css/themes/default.css` theme.  
**Optional**: you can also add some modifiers, like the Standard Ordered List one, from `css/modifiers/standard-ol.css`.

If you want to contribute to Flowtime.js development you can write your own theme or modifier and make a pull request.

**Include the required JavaScript files** at the bottom of your document, just before the `</body>` tag.
You have to include both the `js/brav1toolbox.js` and `js/flowtime.js` files in this exact order:
```html
<script src="js/brav1toolbox.js"></script>
<script src="js/flowtime.js"></script>
```

or the single `js/flowtime.min.js` file:
```html
<script src="js/flowtime.min.js"></script>
```

## How to Build the Markup

The markup of Flowtime.js is really simple and easy to learn.
All you have to do is wrap some elements in a `<div class="flowtime">` parent. Then create the sections applying `class="ft-section"` and the single pages applying `class="ft-page"`.
To better understand the markup take a look at this snippet:

```html
    <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>
```

If you want to use the alternate layout you have to add the class `ft-cross`to the Flowtime element and Flowtime.js takes care of the rest:

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

Every single page is a full window view—or a single slide if you prefer—and it’s a relative formatting context.
Even if you have only single slides ordered in a row you have to nest the pages in sections; take a look at this markup which creates two slides one aside the other:

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

### Titles and Pages URL
<commit_msg>minor formatting improvements<commit_after>![Flowtime.js](https://github.com/marcolago/flowtime.js/raw/master/assets/img/logo-black.png "Flowtime.js Logo")

### Flowtime.js is a framework for easily building HTML presentations or websites.

You can take a look at the [sample presentation](http://marcolago.github.io/flowtime.js/) to quick learn about the possibilities:

**For more information check the [wiki](https://github.com/marcolago/flowtime.js/wiki)**
- [Browser Support](https://github.com/marcolago/flowtime.js/wiki/Browser-Support)
- [Made with Flowtime.js](https://github.com/marcolago/flowtime.js/wiki/Made-With-Flowtime.js)
- [Credits and Thanks](https://github.com/marcolago/flowtime.js/wiki/Credits-and-Thanks)

### If You Find Flowtime.js Useful

If you used Flowtime.js to build a website, a webapp or a presentation, consider to do one or more of these things.

 - Spread the word.  
 - Let me know where I can see your project (and tell me if I can add to the [Made with Flowtime.js](https://github.com/marcolago/flowtime.js/wiki/Made-With-Flowtime.js) page). 
 - [Open an issue](https://github.com/marcolago/flowtime.js/issues) to report a bug or to request a feature.
 - If you wish to donate:  
[![paypal](https://www.paypalobjects.com/en_GB/i/btn/btn_donate_SM.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=9TW923Y3US7LG)


## Build presentations online with Flowtime.js and SlideCaptain

Flowtime.js is the slide engine used by [SlideCaptain](http://slidecaptain.com/).
If you prefer a WYSIWYG editor or you feel not comfortable with plain HTML you can try [SlideCaptain](http://slidecaptain.com/): a powerful web app for building well-structured presentations in your browser.
SlideCaptain adds many features to Flowtime.js like MathJax™ support and PDF export tool .

SlideCaptain is developed by [Engawa](http://engawa.de/).

## Major Updates

- **May 20 2014**
    - Added new section navigation modifiers. See [Section Navigation Options](#section-navigation-options) for the updates.

- **May 12 2013**
    - Added the autoplay configuration functions and `start()`, `pause()` and `stop()` methods. ([#18](https://github.com/marcolago/flowtime.js/issues/18))
    - Now the presentations is loopable both for page and section navigation. ([#18](https://github.com/marcolago/flowtime.js/issues/18))

- **March 3 2014**
    - Added methods to enable and disable navigation logics at runtime.
    - Added options to get alternative horizontal layout; sections are stacked vertically and pages are arranged horizontally.
    - Added option to reconfigure key bindings for some wireless presenters. ([#15](https://github.com/marcolago/flowtime.js/issues/15))

## Main Features

**Full Page Fluid Layout Boilerplate**.
Flowtime.js is designed to perfectly fit your viewport and is based on a solid `display: inline-block;` foundation.
This framework doesn’t style your presentations or sites for you but it takes care of all the annoying things like navigation and deep-linking, so you are free to style every single element of your design as you like.
But for the ones who need a ready-to-use tool it comes with a default theme that you can edit or you can add new themes just by linking your css files.

**Alternate Horizontal Layout**
The default layout has sections arranged side by side horizontally and pages stacked vertically in each section.
You can use the alternate layout with sections stacked vertically and pages arranged horizontally by adding the class `ft-cross` to the Flowtime element in the HTML document.
See [**How to Build the Markup**](#how-to-build-the-markup) section for an example.

**Multiple Controls Navigation**.
You can navigate through pages via links, keyboard, mouse, gestures or deep-linking.
Links are managed using the href value targeting a formatted hash destination; see the demo's source code for more examples.
Keyboard navigation is based on arrow keys with the Shift key as a modifier to jump over fragments or sections. See the command list below:

- **Down or Up Arrows**: navigate to the next or previous page. This is the main navigation action; the entire content is navigable using these keys only. If there are fragments in the page, every input shows or hides a fragment.
- **Shift + Down or Up Arrows**: navigate to the next or previous page jumping all the fragments.
- **Left or Right Arrows**: navigate to the previous or next section. By default the destination will be the page at the same index of the starting point (if you are at page 3 in the section 2 you will go to the page 3 in the section 3). If the same index does not exist the destination will be the highest available index (see [Section Navigation Options](#section-navigation-options) for more options).
- **Shift + Left or Right Arrows**: navigate to the first page of the previous or next section.
- **Page Up**: navigates to the first page of the current section.
- **Page Down**: navigates to the last page of the current section.
- **Home**: navigates to the first page of the presentation/website.
- **End**: navigates to the last page of the presentation/website.
- **ESC**: toggles the overview mode.

**Fragments Support**.
It’s possibile to navigate fragments step by step in a page or jump directly to the next or previous page.
You can hide or show every single fragment with special behaviour managed and styled by CSS classes, and you can even nest fragments.

**Overview Mode**.
Overview mode allows you to look at the entire site/presentation structure in a single view or from a distant point of view (alternate version).
When in overview mode you can navigate to a page by click on it or using the arrow keys and **then pressing Return key**.

**History Management**.
Flowtime.js is built on top of the **HTML History APIs** so you can navigate using the browser’s back and forward buttons and deep-link a page for sharing.
Flowtime.js is a client side only framework so if you want to do SEO you have to add server side logic to serve only the single page content to search engines.
If the History APIs are not available the framework falls back to the [hashchange](https://developer.mozilla.org/en-US/docs/Web/Events/hashchange) event.

**Transitions**.
Flowtime.js animates the page transition using **native CSS3 transitions**. Where transitions are not available (IE9) the page change will be done immediately but would work as expected.

**Parallax Support**
Integrated native parallax support based on CSS3 transformations and configurable by adding `data-` attributes.

**Browser Support**
Flowtime.js is tested and works on **every modern desktop browser and IE9 and above**.
Where the basic support is not available the framework falls back to the native scrolling with anchor links, but the full page fluid layouts remain intact.

## How to build minified Flowtime.js

You need **[node.js](https://nodejs.org/)**, **[npm](https://www.npmjs.com/)** and **[grunt](http://gruntjs.com/)** installed in order to build a minified version of Flowtime.js and to autoprefix CSS files.  
You can install dependencies by running
```
npm install
```

To create the minified build and autoprefixed CSS just run
```
grunt 
```

## How to Include Flowtime.js in Your Projects

**Include the required CSS** inside the `<head>` tag in your document.
You have to include the `css/flowtime.css` file and a theme CSS file; Flowtime.js comes with the `css/themes/default.css` theme.  
**Optional**: you can also add some modifiers, like the Standard Ordered List one, from `css/modifiers/standard-ol.css`.

If you want to contribute to Flowtime.js development you can write your own theme or modifier and make a pull request.

**Include the required JavaScript files** at the bottom of your document, just before the `</body>` tag.
You have to include both the `js/brav1toolbox.js` and `js/flowtime.js` files in this exact order:
```html
<script src="js/brav1toolbox.js"></script>
<script src="js/flowtime.js"></script>
```

or the single `js/flowtime.min.js` file:
```html
<script src="js/flowtime.min.js"></script>
```

## How to Build the Markup

The markup of Flowtime.js is really simple and easy to learn.
All you have to do is wrap some elements in a `<div class="flowtime">` parent. Then create the sections applying `class="ft-section"` and the single pages applying `class="ft-page"`.
To better understand the markup take a look at this snippet:

```html
    <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>
```

If you want to use the alternate layout you have to add the class `ft-cross`to the Flowtime element and Flowtime.js takes care of the rest:

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

Every single page is a full window view-or a single slide if you prefer—and it’s a relative formatting context.
Even if you have only single slides ordered in a row you have to nest the pages in sections; take a look at this markup which creates two slides one aside the other:

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

### Titles and Pages URL

{'fraction_non_alphanumeric': 0.09389819791337338, 'fraction_numerical': 0.006006955422067657, 'mean_word_length': 4.132233639805301, 'pattern_counts': {'":': 0, '<': 73, '<?xml version=': 0, '>': 73, 'https://': 29, 'lorem ipsum': 0, 'www.': 6, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '546045', 'n_tokens_mistral': 5365, 'n_tokens_neox': 5062, 'n_words': 2519}