Merge pull request #299 from froziq/master

Update feature documentation

docs/features.md

@@ -211,7 +211,7 @@ To add quote’s author wrap a quote to a `<figure>` element and put a caption i
 
 #### Lists
 
-…
+For creating list you must use `ul` (`ol` for numerical list).
 
 	<ol>
 		<li>Literally viral vegan</li>
@@ -223,52 +223,74 @@ To add quote’s author wrap a quote to a `<figure>` element and put a caption i
 		</li>
 	</ol>
 
-…
+You can also create list with inner navigation by adding `next` class to each elements following after element from each you want start navigation:
+
+	<h2>Inner navigation</h2>
+	<ol>
+		<li>I'll be seen right away.</li>
+		<li>Just navigate to next slide and you'll see others.</li>
+		<li class="next">Hey! It's all okay ?</li>
+		<li class="next"> ... </li>
+	</ol>
+
+And even so:
+
+	<h2>Benefits</h2>
+	<ol>
+		<li class="next">The most important advantage</li>
+		<li class="next">Less important advantage</li>
+	</ol>
+	<h2 class="next">Disadvantages</h2>
+	<ol class="next">
+		<li class="next">There's nothing here</li>
+		<li class="next"> ... </li>
+	</ol>
 
 #### Columns
 
-…
+If you want to form text in two or three columns use `double` or `triple` class
 
 	<p class="double">
 		Echo Park 8-bit sustainable umami deep v Kickstarter.
 	</p>
 
-…
+Also work with lists:
 
-	<ul class="double">
+	<ul class="triple">
 		<li>Occupy locavore blog</li>
 		<li>Mustache you haven’t heard of</li>
+		<li>Something else</li>
 	</ul>
 
 #### Tables
 
-…
+Create table by using usual `table`, `tr`, `th`
 
 	<table>
-	<tr>
+		<tr>
-		<th scope="col">Gentrify</th>
+			<th scope="col">Gentrify</th>
-		<th>Twee</th>
+			<th>Twee</th>
-	</tr>
+		</tr>
-	<tr>
+		<tr>
-		<th scope="row">Messenger</th>
+			<th scope="row">Messenger</th>
-		<td>Mixtape</td>
+			<td>Mixtape</td>
-	</tr>
+		</tr>
 	</table>
 
-…
+Class `striped` stylizes your table: even rows will turn gray background
 
 	<table class="striped">
 
 #### Code
 
-…
+`Code` tag define your program code
 
 	<pre><code>function action() {
 		// TODO
 		return true;
 	}</code></pre>
 
-…
+If you want to add lines numbers use next construction:
 
 	<pre>
 		<code>function action() {</code>
@@ -277,42 +299,40 @@ To add quote’s author wrap a quote to a `<figure>` element and put a caption i
 		<code>}<code>
 	</pre>
 
-…
+When neccessary emphasize that code is commented, you need to use span element with `comment` class;
+If you want to color part of code, wrap this part with `mark` to add yellow background and `mark` with `important` class to add red background;
 
 	<pre><code>function <mark>action()</mark> {
 		<span class="comment">// TODO<span>
 		return <mark class="important">true</mark>;
 	}</code></pre>
 
-…
-
 ### Elements
 
 …
 
 #### Cover
 
-…
+`Cover` class on img attribute indicates that picture will be background for slide
 
 	<section class="slide">
 		<img class="cover" src="picture.png">
 	</section>
 
-…
+To stretch the picture in width or height, you need to set a `width` or `height` class respectively;
 
-…
+Use both classes `width height`, if you want to stretch the picture in width and height
-
-…
 
 	<img class="cover width" src="picture.png">
 	<img class="cover height" src="picture.png">
+	<img class="cover width height" src="picture.png">
 
-…
+Shortcut for `width`, `height`:
 
 	<img class="cover w" src="picture.png">
 	<img class="cover h" src="picture.png">
 
-…
+To insert an image description, links to the author's site or other information use `figure` tag with `figcaption`
 
 	<figure>
 		<img class="cover" src="picture.png">
@@ -323,19 +343,19 @@ To add quote’s author wrap a quote to a `<figure>` element and put a caption i
 
 #### Shout
 
-…
+There are slides, which need to be described in only a few words. Usually they display a call for action, define common themes, link to project or something else. To stylize this text, use the `shout` class.
 
 	<section class="slide">
 		<h2 class="shout">Shout</h2>
 	</section>
 
-…
+Add `grow` class to animate text from small to big size
 
 	<section class="slide">
 		<h2 class="shout grow">Growing Shout</h2>
 	</section>
 
-…
+Or, on the contrary, for animate text size from big to small add `shrink` class.
 
 	<section class="slide">
 		<h2 class="shout shrink">Shrinking Shout</h2>
@@ -343,20 +363,20 @@ To add quote’s author wrap a quote to a `<figure>` element and put a caption i
 
 #### Place
 
-…
+Use `place` class on img attribute give same effect as `cover` class - set background image
 
 	<section class="slide">
 		<img class="place" src="picture.png">
 	</section>
 
-…
+If you want collocate picture at a certain side, you need to use `top` / `right` / `bottom` / `left` class as shown below
 
 	<img class="place top" src="picture.png">
 	<img class="place right" src="picture.png">
 	<img class="place bottom" src="picture.png">
 	<img class="place left" src="picture.png">
 
-…
+You can also combine classes for location in corners:
 
 	<img class="place top left" src="picture.png">
 	<img class="place top right" src="picture.png">
@@ -365,7 +385,7 @@ To add quote’s author wrap a quote to a `<figure>` element and put a caption i
 
 #### Notes
 
-…
+When neccessary to add some notes for slide, you may use `footer` class, that hide your notes at all time and show them when you hover to slide:
 
 	<section class="slide">
 		<p>Retro meh brunch aesthetic.</p>
@@ -374,4 +394,3 @@ To add quote’s author wrap a quote to a `<figure>` element and put a caption i
 		</footer>
 	</section>
 
-…