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 #### Lists
For creating list you must use `ul` (`ol` for numerical list).
<ol> <ol>
<li>Literally viral vegan</li> <li>Literally viral vegan</li>
@ -223,26 +223,48 @@ To add quotes author wrap a quote to a `<figure>` element and put a caption i
</li> </li>
</ol> </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 #### Columns
If you want to form text in two or three columns use `double` or `triple` class
<p class="double"> <p class="double">
Echo Park 8-bit sustainable umami deep v Kickstarter. Echo Park 8-bit sustainable umami deep v Kickstarter.
</p> </p>
Also work with lists:
<ul class="double"> <ul class="triple">
<li>Occupy locavore blog</li> <li>Occupy locavore blog</li>
<li>Mustache you havent heard of</li> <li>Mustache you havent heard of</li>
<li>Something else</li>
</ul> </ul>
#### Tables #### Tables
Create table by using usual `table`, `tr`, `th`
<table> <table>
<tr> <tr>
@ -255,20 +277,20 @@ To add quotes author wrap a quote to a `<figure>` element and put a caption i
</tr> </tr>
</table> </table>
Class `striped` stylizes your table: even rows will turn gray background
<table class="striped"> <table class="striped">
#### Code #### Code
`Code` tag define your program code
<pre><code>function action() { <pre><code>function action() {
// TODO // TODO
return true; return true;
}</code></pre> }</code></pre>
If you want to add lines numbers use next construction:
<pre> <pre>
<code>function action() {</code> <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> <code>}<code>
</pre> </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> { <pre><code>function <mark>action()</mark> {
<span class="comment">// TODO<span> <span class="comment">// TODO<span>
return <mark class="important">true</mark>; return <mark class="important">true</mark>;
}</code></pre> }</code></pre>
### Elements ### Elements
#### Cover #### Cover
`Cover` class on img attribute indicates that picture will be background for slide
<section class="slide"> <section class="slide">
<img class="cover" src="picture.png"> <img class="cover" src="picture.png">
</section> </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 width" src="picture.png">
<img class="cover height" 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 w" src="picture.png">
<img class="cover h" 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> <figure>
<img class="cover" src="picture.png"> <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 #### 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"> <section class="slide">
<h2 class="shout">Shout</h2> <h2 class="shout">Shout</h2>
</section> </section>
Add `grow` class to animate text from small to big size
<section class="slide"> <section class="slide">
<h2 class="shout grow">Growing Shout</h2> <h2 class="shout grow">Growing Shout</h2>
</section> </section>
Or, on the contrary, for animate text size from big to small add `shrink` class.
<section class="slide"> <section class="slide">
<h2 class="shout shrink">Shrinking Shout</h2> <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 #### Place
Use `place` class on img attribute give same effect as `cover` class - set background image
<section class="slide"> <section class="slide">
<img class="place" src="picture.png"> <img class="place" src="picture.png">
</section> </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 top" src="picture.png">
<img class="place right" src="picture.png"> <img class="place right" src="picture.png">
<img class="place bottom" src="picture.png"> <img class="place bottom" src="picture.png">
<img class="place left" 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 left" src="picture.png">
<img class="place top right" 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 #### 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"> <section class="slide">
<p>Retro meh brunch aesthetic.</p> <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> </footer>
</section> </section>