viniciusalmeida/ninja-presentation

#<ninja-presentation>

A kit of Web Components wrappers to easily build a web based slideshow on Google Chrome. Attribute names are similar to the css properties. It is not an accident ;)

Do not be fooled. You do not have to be a ninja to use it! Let the tool work for you.

See the demo and do not forget to see your code.

##Usage with bower

To install:

$ bower install ninja-presentation

Import the custom element and your dependencies on your presentation page:

<script type="text/javascript" src="bower_components/platform/platform.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel='import' href='bower_components/ninja-presentation/src/ninja-presentation.html'>

##Markup to use the component

Start the markup of you presentation:

<ninja-presentation>
	<ninja-slide>
		<h1>Is very simple, huh?</h1>
	</ninja-slide>
</ninja-presentation>

Maybe you need use a CSS reset. On example I used the * selector, but you can use the tool of your preference

###<ninja-presentation> options

###<ninja-slide> options

Using fragments

Add class="fragment" in elements to show one by one

<ninja-slide background='green' font='Port Lligat Slab' color='#FFF' align='center'>
    <h1>Fragments</h1>
    <ul>
        <li class="fragment">First fragment</li>
        <li class="fragment">Second fragment</li>
    </ul>
</ninja-slide>

Look this yeoman generator.

@ works on Chrome

Made by @vimoding