Update feature documentation
This commit is contained in:
Yuriy
parent
7845487b72
commit
1777c42c37
|
|
@ -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>
|
||||
<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 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>
|
||||
|
||||
…
|
||||
|
|
|
|||
Loading…
Reference in New Issue