Merge pull request #299 from froziq/master
Update feature documentation
This commit is contained in:
commit
c24cc01ba4
|
@ -211,7 +211,7 @@ To add quote’s 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,52 +223,74 @@ To add quote’s 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 haven’t heard of</li>
|
<li>Mustache you haven’t heard of</li>
|
||||||
|
<li>Something else</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
#### Tables
|
#### Tables
|
||||||
|
|
||||||
…
|
Create table by using usual `table`, `tr`, `th`
|
||||||
|
|
||||||
<table>
|
<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>
|
</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 quote’s 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 quote’s 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 quote’s 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 quote’s 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 quote’s author wrap a quote to a `<figure>` element and put a caption i
|
||||||
</footer>
|
</footer>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
…
|
|
||||||
|
|
Loading…
Reference in New Issue