Permalink
Fetching contributors…
Cannot retrieve contributors at this time
387 lines (371 sloc) 11.9 KB
<!DOCTYPE html>
<html>
<head>
<title>Ruban</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="components/normalize-css/normalize.css" />
<link rel="stylesheet" href="components/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="components/highlightjs/styles/tomorrow.css" />
<link rel="stylesheet" href="css/ruban-dev.css" />
<link rel="stylesheet" href="css/ruban-print-dev.css" media="print" />
<style>
section {
border-left: 1em solid #434343;
border-right: 1em solid #434343;
}
.pagination {
right: 2.6em;
}
pre code {
background-color: inherit;
}
pre .xml .javascript {
opacity: 1;
}
#examples ul {
padding-left: 0;
}
#getting-started-unleash-your-power {
color: white;
background-color: #0071B5;
border-color: white;
}
#getting-started-unleash-your-power strong {
text-shadow: 0.06em 0.06em 0 #0071B5, 0.07em 0.07em 0 #fff;
}
</style>
</head>
<body>
<section id="ruban">
<pre style="text-align: center; font-family: 'Source Code Pro';">
| R |
| U |
| B |
| A |
| N |
</pre>
</section>
<section id="parading-on-a-ruban" class="no-toc">
<h1>Your slides parading on a <strong>ruban</strong>!</h1>
</section>
<section id="table-of-contents" class="toc">
<h1>Table of Contents</h1>
</section>
<section id="installation">
<h1><i class="fa fa-download"></i> Installation</h1>
</section>
<section id="installation-alternatives">
<h1>Alternatives</h1>
<ul>
<li><a href="#/installation-quickstart">Using a quickstart archive</a></li>
<li><a href="#/installation-bower">Using Bower</a></li>
</ul>
</section>
<section id="installation-quickstart">
<h1>Quickstart</h1>
<ol>
<li><a href="https://github.com/loicfrering/ruban/archive/v0.3.2-quickstart.zip" title="Ruban Quickstart">Download the quickstart distribution</a></li>
<li>Extract the archive</li>
<li>Start editing the index.html!</li>
</ol>
</section>
<section id="installation-bower">
<h1>Using Bower</h1>
<p><code>$ bower install ruban --save</code></p>
<p>Create an index.html file with the following content <a href="#/installation-bower-html" title="See HTML"><i class="fa fa-level-down"></i></a></p>
</section>
<section id="installation-bower-html">
<pre><code style="font-size: 30%;">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;I &amp;lt;3 Ruban&lt;/title&gt;
&lt;meta charset="utf-8" /&gt;
&lt;link rel="stylesheet" href="bower_components/normalize-css/normalize.css" /&gt;
&lt;link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" /&gt;
&lt;link rel="stylesheet" href="bower_components/highlightjs/styles/tomorrow.css" /&gt;
&lt;link rel="stylesheet" href="bower_components/ruban/css/ruban.min.css" /&gt;
&lt;link rel="stylesheet" href="bower_components/ruban/css/ruban-print.min.css" media="print" /&gt;
&lt;/head&gt;
&lt;body&gt;
<strong>&lt;section&gt;</strong>
<strong>&lt;h1&gt;My Awesome Presentation&lt;/h1&gt;</strong>
<strong>&lt;/section&gt;</strong>
&lt;script src="bower_components/jquery/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="bower_components/keymaster/keymaster.js"&gt;&lt;/script&gt;
&lt;script src="bower_components/hammerjs/hammer.min.js"&gt;&lt;/script&gt;
&lt;script src="bower_components/highlightjs/highlight.pack.js"&gt;&lt;/script&gt;
&lt;script src="bower_components/ruban/js/ruban.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
<strong>new Ruban();</strong>
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</section>
<section id="getting-started">
<h1><i class="fa fa-rocket"></i> Getting started</h1>
</section>
<section id="getting-started-sections">
<h1>Getting started</h1>
<ul>
<li>Slides are just <strong>&lt;sections&gt;</strong></li>
<li>Fill these sections with HTML</li>
<li><i class="fa fa-globe"></i> Open your browser &amp; enjoy!</li>
</ul>
<pre><code>&lt;section id="getting-started-sections"&gt;
&lt;h1&gt;Getting started&lt;/h1&gt;
&lt;ul&gt;
&lt;li&gt;Slides are just &amp;lt;sections&amp;gt;&lt;/li&gt;
&lt;li&gt;Fill these sections with HTML&lt;/li&gt;
&lt;li&gt;Open your browser and enjoy!&lt;/li&gt;
&lt;/ul&gt;
&lt;/section&gt;
</code></pre>
</section>
<section id="getting-started-unleash-your-power" class="no-toc">
<h1>Unleash your <strong>HTML</strong> and <strong>CSS</strong> power!</h1>
</section>
<section id="getting-started-font-awesome" class="no-toc">
<h1>
Enjoy<br />
<a href="http://fortawesome.github.io/Font-Awesome/" title="Font Awesome"><i class="fa fa-flag"></i> Font Awesome</a>
</h1>
</section>
<section id="getting-started-examples" class="no-toc">
<h1>Look at the <strong><a href="#/examples" title="Examples">examples</a></strong></h1>
</section>
<section id="features">
<h1><i class="fa fa-star-o"></i> Features</h1>
</section>
<section id="toc">
<h1>Table of Contents</h1>
<ul>
<li>Auto-generated Table of Contents</li>
<li>Selects sections with a h1 as unique child</li>
<li>Exclude sections with the no-toc class</li>
</ul>
<pre style="margin-bottom: 0;"><code class="xml">&lt;section class="toc"&gt;
&lt;/section&gt;
&lt;section&gt;
&lt;h1&gt;First title&lt;/h1&gt;
&lt;/section&gt;
&lt;section&gt;
&lt;h1&gt;Second title&lt;/h1&gt;
&lt;/section&gt;
</code></pre>
</section>
<section id="bookmarkable-urls">
<h1>Bookmarkable URLs</h1>
<ul>
<li>Just add an id to the section!</li>
</ul>
<pre><code>&lt;section id="about-dinosaurs"&gt;
&lt;h1&gt;About dinosaurs&lt;/h1&gt;
&lt;/section&gt;
</code></pre>
</section>
<section id="pagination">
<h1>Pagination</h1>
<ul>
<li>When will this boring presentation end?</li>
</ul>
<pre><code class="javascript">new Ruban({
pagination: true
});
</code></pre>
</section>
<section id="steps">
<h1>Steps</h1>
<ul class="steps">
<li>Make your point</li>
<li>Step by step</li>
<li>
<pre><code class="xml">&lt;section&gt;
&lt;h1&gt;Steps&lt;/h1&gt;
&lt;ul class="steps"&gt;
&lt;li&gt;Make your point&lt;/li&gt;
&lt;li&gt;Step by step&lt;/li&gt;
&lt;/ul&gt;
&lt;/section&gt;
</code></pre>
</li>
</ul>
</section>
<section id="fits-your-screen">
<h1>Fits your screen</h1>
<ul>
<li>Automatically adjust the size to your screen</li>
<li>Just use relative units in your CSS (em, %)</li>
<li>Choose your ratio: 4/3, 16/9, IMAX anyone?</li>
</ul>
<pre><code class="javascript">new Ruban({
ratio: 16/9
});
</code></pre>
</section>
<section id="events">
<h1>Events</h1>
<ul>
<li>Add some dynamic behavior to your slides!</li>
<li>Listen for active &amp; inactive events</li>
</ul>
<pre><code class="javascript">$('#events').on({
active: function() {
$(this).find('h1').stop()
.animate({marginLeft: '2em'}, 2000);
},
inactive:function() {
$(this).find('h1').stop()
.animate({marginLeft: 0});
}
});
</code></pre>
</section>
<section id="details">
<h1>Details</h1>
<ul>
<li>
Add details &amp; speaker notes to your slides
<ul>
<li>Hidden on the Ruban</li>
<li>Displayed in the printed version</li>
</ul>
</li>
</ul>
<pre><code>&lt;details open="open"&gt;
&lt;summary&gt;Notes&lt;/summary&gt;
&lt;p&gt;
You can write down your comments here.
They will be available in the printed version.
&lt;/p&gt;
&lt;/details&gt;
</code></pre>
<details open="open">
<summary>Notes</summary>
<p>You can write down your comments here. They will be available in the printed version.</p>
</details>
</section>
<section id="options">
<h1><i class="fa fa-wrench"></i> Options</h1>
</section>
<section id="options-usage">
<h1>Options</h1>
<p>Pass options to the constructor</p>
<pre><code class="javascript">var ruban = new Ruban({
ratio: 16/9,
pagination: true
});
</code></pre>
</section>
<section id="options-list">
<h1>Options</h1>
<dl style="font-size: 50%;">
<dt><strong>ratio</strong> (default: 4/3)</dt>
<dd>The desired ratio for your slides</dd>
<dt><strong>minPadding</strong> (default: '0.4em')</dt>
<dd>The minimum padding around your slides</dd>
<dt><strong>transitionDuration</strong> (default: '1s')</dt>
<dd>The duration of the ruban's scrolling effect</dd>
<dt><strong>pagination</strong> (default: false)</dt>
<dd>If the pagination should be enabled or not</dd>
<dt><strong>stripHtmlInToc</strong> (default: false)</dt>
<dd>Should HTML tags be stripped when generating the TOC</dd>
<dt><strong>bindClicks</strong> (default: false)</dt>
<dd>
Use left and right clicks to navigate through the ruban.<br />
Be aware that it prevents selecting text and opening the contextual menu.
</dd>
<dt><strong>bindMouseWheel</strong> (default: false)</dt>
<dd>Use the mouse wheel to navigate through the ruban.</dd>
</dl>
</section>
<section id="examples">
<h1><i class="fa fa-tag"></i> Examples</h1>
</section>
<section id="examples-list">
<h1>Examples</h1>
<ul>
<li>
<i class="fa fa-asterisk"></i>
<a href="http://loicfrering.github.io/ruban/" title="This documentation">This documentation</a>
(<a href="https://github.com/loicfrering/ruban/blob/master/index.html" title="Source on GitHub">src</a>)
</li>
<li>
<i class="fa fa-asterisk"></i>
<a href="http://loicfrering.github.io/mixit13/" title="Backbone, Ember et Angular sont dans un bateau...">Backbone, Ember et Angular</a>
(<a href="https://github.com/loicfrering/mixit13" title="Source on GitHub">src</a>)
</li>
</ul>
</section>
<section id="fork-me">
<h1><i class="fa fa-github"></i> <a href="https://github.com/loicfrering/ruban" title="Fork me on GitHub">Fork me on GitHub!</a></h1>
</section>
<section id="contributing">
<h1>Contributing</h1>
<ol style="font-size: 70%;">
<li>Install <a href="http://nodejs.org/download/" title="Download Node.js">Node.js</a></li>
<li>
Clone the project and cd into it
<pre><code class="bash">$ git://github.com/loicfrering/ruban.git &amp;&amp; cd ruban/
</code></pre>
</li>
<li>
Install dependencies:
<pre><code class="bash">$ npm install -g grunt-cli
$ npm install
$ bower install
</code></pre>
</li>
<li>
Compile and watch coffee and less sources:
<pre><code class="bash">$ grunt
</code></pre>
<li>Start implementing amazing features!</li>
<li>Open a Pull Request to share the <i class="fa fa-heart"></i></li>
</ol>
</section>
<script src="components/jquery/jquery.min.js"></script>
<script src="components/keymaster/keymaster.js"></script>
<script src="components/hammerjs/hammer.min.js"></script>
<script src="components/highlightjs/highlight.pack.js"></script>
<script src="js/ruban-dev.js"></script>
<script>
function asciiRuban(current) {
var ruban = '';
for (var i = 0; i < 5; i++) {
if (i === current) {
ruban += '[| ' + 'RUBAN'[i] + ' |]';
} else {
ruban += '| ' + 'RUBAN'[i] + ' |';
}
ruban += '\n';
}
return ruban;
}
var timeoutId, i = 0;
$('#ruban').on({
active: function() {
var $pre = $(this).find('pre');
timeoutId = setInterval(function() {
var ruban = asciiRuban(i++ % 6);
$pre.html(ruban);
}, 1000);
},
inactive: function() {
clearInterval(timeoutId);
}
});
$('#events').on({
active: function() {
$(this).find('h1').stop().animate({marginLeft: '2em'}, 2000);
},
inactive:function() {
$(this).find('h1').stop().animate({marginLeft: 0});
}
});
var ruban = new Ruban({
pagination: true
});
</script>
</body>
</html>