Merge pull request #299 from froziq/master

Update feature documentation
This commit is contained in:
Vadim Makeev 2017-10-23 16:20:19 +03:00 committed by GitHub
commit c24cc01ba4
1 changed files with 54 additions and 35 deletions

View File

@ -211,7 +211,7 @@ To add quotes 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 quotes 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 havent heard of</li>
<li>Something else</li>
</ul>
#### Tables
Create table by using usual `table`, `tr`, `th`
<table>
<tr>
<th scope="col">Gentrify</th>
<th>Twee</th>
</tr>
<tr>
<th scope="row">Messenger</th>
<td>Mixtape</td>
</tr>
<tr>
<th scope="col">Gentrify</th>
<th>Twee</th>
</tr>
<tr>
<th scope="row">Messenger</th>
<td>Mixtape</td>
</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 quotes 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 quotes 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 quotes 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 quotes 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 quotes author wrap a quote to a `<figure>` element and put a caption i
</footer>
</section>