inst/node_modules/shower-material/package/docs/features-en.md

Features

All theme’s features are demonstrated in the index.html file. Use it as a reference while building your presentation. More detailed features overview follows below.

Anatomy

Final theme package contains following folders and files:

  1. docs folder with usage documentation, including this manual.
  2. fonts folder with theme fonts in compressed WOFF format.
  3. images folder with images used for theme decoration.
  4. pictures folder with sample picture used in theme demonstration.
  5. styles folder with built theme styles in 16×10 and 4×3 ratios.
  6. index.html file with all theme features demonstrated on slides.

In addition to files above repository contains source files:

  1. source folder with source fonts in TTF and theme design in Sketch format.
  2. styles folder additionally contains source styles in SCSS format.

Elements

Canvas

List

<body class="shower list">
    …
</body>

Full

<body class="shower full">
    …
</body>

Localization

<html lang="en">
<html lang="ru">

Title

<header class="caption">
    <h1>Presentation Title</h1>
    <p><a href="">Yours Truly</a>, Famous Inc.</p>
</header>

Slide

<section class="slide">
    …
</section>

Badge

<footer class="badge">
    <a href="…">Fork me on Github</a>
</footer>

Progress

<div class="progress"></div>

Slide

Types

White

<section class="slide white">
    …
</section>

Black

<section class="slide black">
    …
</section>

Grid

<section class="slide grid">
    …
</section>

Header

<section class="slide">
    <h2>Slide Header</h2>
</section>

Paragraphs

<section class="slide">
    <p></p>
    <p class="note"></p>
</section>

Inline

Lists

Unordered

<ol>
    <li>Literally viral vegan</li>
    <li>Wes Anderson chillwave Marfa</li>
</ol>

Ordered

<ul>
    <li>Retro meh brunch aesthetic</li>
    <li>Messenger bag retro cred</li>
</ul>

Localization

<ul lang="ru">
    …
</ul>

Quotes

Simple

<blockquote>
    <p>Flannel bicycle rights locavore selfies.</p>
</blockquote>

Author

<figure>
    <blockquote>
        <p>Post-ironic fashion axe flexitarian</p>
    </blockquote>
    <figcaption>Yours Truly</figcaption>
</figure>

Tables

Simple

<table>
<tr>
    <th scope="col">Gentrify</th>
    <th>Twee</th>
</tr>
<tr>
    <th scope="row">Messenger</th>
    <td>Mixtape</td>
</tr>
</table>

Striped

<table class="striped">

Code

Simple

<pre><code>function action() {
    // TODO
    return true;
}</code></pre>

Numbered

<pre>
    <code>function action() {</code>
    <code>  // TODO</code>
    <code>  return true;</code>
    <code>}<code>
</pre>

Highlight

<pre><code>function <mark>action()</mark> {
    <mark class="comment">// TODO<mark>
    return <mark class="important">true</mark>;
}</code></pre>

Cover

Simple

<section class="slide">
    <img class="cover" src="picture.png">
</section>

Horizontal

<img class="cover width" src="picture.png">

Vertical

<img class="cover height" src="picture.png">

Caption

<figure>
    <img class="cover" src="picture.png">
    <figcaption class="white">
        Yours Truly © 2015
    </figcaption>
</figure>

Shout

<section class="slide">
    <h2 class="shout">Shout</h2>
</section>

Place

Center

<section class="slide">
    <img class="place" src="picture.png">
</section>

Sides

<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">

Combinations

<img class="place top left" src="picture.png">
<img class="place top right" src="picture.png">
<img class="place bottom left" src="picture.png">
<img class="place bottom right" src="picture.png">

Notes

<section class="slide">
    <p>Retro meh brunch aesthetic.</p>
    <footer class="footer">
        <p>Cosby sweater Shoreditch.</p>
    </footer>
</section>


Try the rmdshower package in your browser

Any scripts or data that you put into this service are public.

rmdshower documentation built on May 2, 2019, 3:44 a.m.