| R |
| U |
| B |
| A |
| N |

Your slides parading on a ruban!

Table of Contents

Installation

Alternatives

Quickstart

  1. Download the quickstart distribution
  2. Extract the archive
  3. Start editing the index.html!

Using Bower

$ bower install ruban --save

Create an index.html file with the following content 

<!DOCTYPE html>
<html>
<head>
  <title>I &lt;3 Ruban</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="bower_components/normalize-css/normalize.css" />
  <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" />
  <link rel="stylesheet" href="bower_components/highlightjs/styles/tomorrow.css" />
  <link rel="stylesheet" href="bower_components/ruban/css/ruban.min.css" />
  <link rel="stylesheet" href="bower_components/ruban/css/ruban-print.min.css" media="print" />
</head>

<body>
  <section>
    <h1>My Awesome Presentation</h1>
  </section>

  <script src="bower_components/jquery/jquery.min.js"></script>
  <script src="bower_components/keymaster/keymaster.js"></script>
  <script src="bower_components/hammerjs/hammer.min.js"></script>
  <script src="bower_components/highlightjs/highlight.pack.js"></script>
  <script src="bower_components/ruban/js/ruban.min.js"></script>
  <script>
    new Ruban();
  </script>
</body>
</html>

Getting started

Getting started

<section id="getting-started-sections">
  <h1>Getting started</h1>
  <ul>
    <li>Slides are just &lt;sections&gt;</li>
    <li>Fill these sections with HTML</li>
    <li>Open your browser and enjoy!</li>
  </ul>
</section>

Unleash your HTML and CSS power!

Enjoy
Font Awesome

Look at the examples

Features

Table of Contents

<section class="toc">
</section>
<section>
  <h1>First title</h1>
</section>
<section>
  <h1>Second title</h1>
</section>

Bookmarkable URLs

<section id="about-dinosaurs">
  <h1>About dinosaurs</h1>
</section>

Pagination

new Ruban({
  pagination: true
});

Steps

Fits your screen

new Ruban({
  ratio: 16/9
});

Events

$('#events').on({
  active: function() {
    $(this).find('h1').stop()
           .animate({marginLeft: '2em'}, 2000);
  },
  inactive:function() {
    $(this).find('h1').stop()
           .animate({marginLeft: 0});
  }
});

Details

<details open="open">
  <summary>Notes</summary>
  <p>
    You can write down your comments here.
    They will be available in the printed version.
  </p>
</details>
Notes

You can write down your comments here. They will be available in the printed version.

Options

Options

Pass options to the constructor

var ruban = new Ruban({
  ratio: 16/9,
  pagination: true
});

Options

ratio (default: 4/3)
The desired ratio for your slides
minPadding (default: '0.4em')
The minimum padding around your slides
transitionDuration (default: '1s')
The duration of the ruban's scrolling effect
pagination (default: false)
If the pagination should be enabled or not
stripHtmlInToc (default: false)
Should HTML tags be stripped when generating the TOC
bindClicks (default: false)
Use left and right clicks to navigate through the ruban.
Be aware that it prevents selecting text and opening the contextual menu.
bindMouseWheel (default: false)
Use the mouse wheel to navigate through the ruban.

Examples

Examples

Fork me on GitHub!

Contributing

  1. Install Node.js
  2. Clone the project and cd into it 
    $ git://github.com/loicfrering/ruban.git && cd ruban/
  3. Install dependencies: 
    $ npm install -g grunt-cli
$ npm install
$ bower install
  4. Compile and watch coffee and less sources: 
    $ grunt
  5. Start implementing amazing features!
  6. Open a Pull Request to share the