What is it?

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

It’s built with web standards in mind and on top of a solid full page grid layout.

The animations are managed with native and accelerated CSS3 transitions.
Javascript takes care of the navigation behaviour and adds advanced functionalities and configuration options.

Press Down Key or Swipe Up to continue.

Compatibility and Support

Flowtime.js is fully compatible with real moderns browsers:

• Firefox
• Chrome
• Safari
• Opera
• Internet Explorer 10

Internet Explorer 9 and some old versions of other browsers lack the transitions and some modern Javascript features but the main navigation and functionalities works.

In older browsers degrades to a bi-directional scrolling navigation with anchor links.

Touch Devices Support

On touch devices you can navigate through slides swiping in all directions.

By now Flowtime.js was tested and works on Safari Mobile and Chrome Mobile on iOS devices but the support will be wider in the near future.

Mastering the Navigation

You can navigate in many ways. The most common way is using the keyboard.

Navigation Keys and default behaviours:

• Down Key goes to the next page or shows up the next fragment (we’ll see this later).
• Up Key goes to the previous page or hides the fragment.
• Right Key goes to the adjacent page in the next section (if available, it’s like a grid, otherwise it goes to the last page in the next section).
• Left Key goes to the adjacent page in the previous section.

Alternate Navigation Control

Pressing the Shift Key you can alternate the the default navigation keys behaviour; let’s see how:

• Down Key goes to the next page skipping all the fragments.
• Up Key goes to the previous page skipping all the fragments.
• Right Key goes to the first page in the next section.
• Left Key goes to the first page in the previous section.

Some Other Keys

Because: the more, the better.

• Page Up Key goes to the first page of the current section.
• Page Down Key goes to the last page of the current section.
• Home Key goes to the first page of the first section.
• End Key goes to the last page of the last section.

Overview Mode.

You can look at the entire presentation by pressing ESC Key.
When in Overview Mode you can go back to the Page Mode by pressing again the ESC Key.

Try it out!

WARNING! Experimental Feature. If you experience problems in webkit browser you can use the alternate Overview Mode; see the documentation for more info.

Navigating the Overview

In Overview Mode the arrow keys works in the same way as in Page Mode, highlighting the future destination. To navigate to the highlighted page just press Return or Enter Key or click on the desired page.

Navigate via Links or Javascript API

You can links every page by simply building the href value using this schema:

<a href="#/[section data-id attribute]/[page data-id attribute]">
				

Where data-id attribute is an optional attribute you can add to every section or page.
I.e.: if you want to go to back to the first page click here (press backspace to come back to this page).

You can also trigger every navigation behaviour using the Flowtime.js Javascript API.
Take a look at the documentation if you want to learn more.

Navigate With History

Flowtime.js offers a full support for the HTML5 History API where available or gracefully degrades on the hashchange event.

This means that you can navigate using the browser’s back and forward buttons and deeplink a page for sharing purposes.

Progress Indicator

You can enable a default progress indicator useful not only to know what’s the current page you are looking, but also as a navigation tool.

Look at the bottom right corner and you can see a miniature of the presentation structure.

Clicking on a page thumb will navigate to that page.

Fragments Support

The built in fragments navigation allows to advance step by step inside a page.
Press down to try.

You can discover single elements or even a single part of an element, one at a time.

Fragments navigation is deeply customizable with some configuration options
You can learn how in the documentation.

Fragments Unleashed

Fragments can be more than just delayed piece of page.

Thanks to some special classes you can add a couple of useful custom behaviours.

• The .step fragment will partially fades out;
• The .shy fragment will completely hides itself;
• You can use this two special fragment types to easily create special effects.

This is a .shy example!

And this is a .step one!

Default HTML Structures

Flowtime.js comes with a default theme that styles the most common HTML structures, like:

1^st Level Heading

2^nd Level Heading

3^rd Level Heading

4^th, 5^th and 6^th Level Heading

Unordered Lists

• An item.
• Another item.
• Just another item.
• Ok, we get it!

Ordered Lists

1. One.
2. Two.
3. Three.
4. Four.

Definition Lists

One:

a single unit of everything.

Two:

the only even prime number.

Three:

without the “h” is a plant.

Four:

“Quattro” in italian.

Quotes and Citations

My favourite quotation: The bad craftsman blames his tools.

Sotto un cespo di rose scarlatte dai al rospo the caldo col latte.
Sotto un cespo di rose paonazze tocca al rospo lavare le tazze.

Quoting and citing with <blockquote>, <q>, <cite>, and the cite attribute on HTML5 Doctor.

Theme and Styling

If you don’t like the default theme or you want to build your own (or both things),
or if you want to build a website on top of Flowtime.js,
you can write your own theme and replace the default one.

Theme and core css are in separate files so you can’t break the layout (unless you override some classes).

Fluid Layout

Everything can be fluid, just use em, rem and % units if you want to make an element resizable.

Image Management

Images are fluid like all the other content.

You can insert images in the flow or stack images ones on top the others with a minimal markup overhead to create some fancy fragments tricks.

Go to the next pages to see fluid images in action and how stacked images can be managed, both in the flow or centered in the slide.
Look at the source code to learn how to write the markup.

Stacked Images

Native Parallax Support

By popular demand Flowtime.js includes native parallax support*.

Simply add a parallax class to anything you want to have parallax enabled and configure the amount of distance for all elements or for a single element using data-parallax attribute.

For an example go to the next page; for more info read the documentation.

* By the way: I’m not a parallax fan; but ehi… this is the "web 3.0".

This Page Is Just for Testing the Parallax

In the previous page, from left to right:

Sax:

King Mix’s most trusted servant. After a diploma in the music conservatory in the…

King Mix:

son of the noble dynasty of the Mix of Censor, he soon shows his…

Tone:

the most feared space intruder on Mixer. He flunked the musical exam…

More info about this villains on www.genereavventura.com.

Code Snippets Highlight

Code highlight is a courtesy of Lea Verou’s Prism.
Because I really didn’t want to re-invent the wheel.
You can use what you want, it’s not a dependency (but it’s very smart and cool).

function saySomethingSmart()
{
	alert("The bad craftsman blames his tools!");
}

.is-not-water {
	display: inline-block;
}

<h1>The Bad Craftsman Blames His Tools!</h1>

Events and Custom Implementations

When navigated to a page Flowtime.js fires a custom flowtimenavigation event full of useful properties to customize or build your components or behaviours.

Read the documentation to learn more about this event and its properties.

Use It! It’s Free

This project is open source, feel free to contribute to the development on Github.

Feedbacks, suggestions and bug reports are welcomes.

Use it as you wish and build great things.
And when you’ll have done let me know the URL, I will appreciate it.

Thank You

Designed and coded by Marco Lago
Interaction/Experience/Game/Designer/Developer

You can find me on Twitter as @marcolago

If you like this work spread the word, you know how ;)

Have Fun