193 lines
4.2 KiB
Markdown
193 lines
4.2 KiB
Markdown
|
# Features
|
|||
|
|
|
|||
|
|
All theme’s features are demonstrated in the [index.html](../index.html) file. Use it as a reference while building your presentation. More detailed features overview follows below.
|
|||
|
|
|
|||
|
|
- [Anatomy](#anatomy)
|
|||
|
|
- [Common](#common)
|
|||
|
|
- [Language](#language)
|
|||
|
|
- [Canvas](#canvas)
|
|||
|
|
- [Title](#title)
|
|||
|
|
- [Badge](#badge)
|
|||
|
|
- [Progress](#progress)
|
|||
|
|
- [Slide](#slide)
|
|||
|
|
- [Number](#number)
|
|||
|
|
- [Types](#types)
|
|||
|
|
- [White](#white)
|
|||
|
|
- [Black](#black)
|
|||
|
|
- [Grid](#grid)
|
|||
|
|
- [Content](#content)
|
|||
|
|
- [Header](#header)
|
|||
|
|
- [Paragraphs](#paragraphs)
|
|||
|
|
- [Inline](#inline)
|
|||
|
|
- [Quotes](#quotes)
|
|||
|
|
- [Lists](#lists)
|
|||
|
|
- [Columns](#columns)
|
|||
|
|
- [Tables](#tables)
|
|||
|
|
- [Code](#code)
|
|||
|
|
- [Elements](#elements)
|
|||
|
|
- [Cover](#cover)
|
|||
|
|
- [Shout](#shout)
|
|||
|
|
- [Place](#place)
|
|||
|
|
- [Notes](#notes)
|
|||
|
|
|
|||
|
|
## Anatomy
|
|||
|
|
|
|||
|
|
Final theme package consists of the following folders and files:
|
|||
|
|
|
|||
|
|
1. `docs` folder with usage documentation, including this manual.
|
|||
|
|
2. `fonts` folder with fonts in WOFF compressed format.
|
|||
|
|
3. `images` folder with decoration images.
|
|||
|
|
4. `pictures` folder with sample pictures.
|
|||
|
|
5. `styles` folder with built styles in 16×10 and 4×3 ratios.
|
|||
|
|
6. `index.html` file with demonstration of all features.
|
|||
|
|
|
|||
|
|
In addition to files above repository contains source files:
|
|||
|
|
|
|||
|
|
1. `source` folder with font source files in TTF and design in [Sketch](http://bohemiancoding.com/sketch/).
|
|||
|
|
2. `styles` folder also contains source styles in SCSS format.
|
|||
|
|
|
|||
|
|
## Common
|
|||
|
|
|
|||
|
|
### Language
|
|||
|
|
|
|||
|
|
The main presentation language is set on the root element of the document, please note it and set the right one:
|
|||
|
|
|
|||
|
|
<html lang="ru">
|
|||
|
|
<html lang="en">
|
|||
|
|
|
|||
|
|
Appropriate typography traditions are used based on this value. `lang` attribute could also be set to separate slides and even elements.
|
|||
|
|
|
|||
|
|
### Canvas
|
|||
|
|
|
|||
|
|
The root presentation element has the main `shower` class and additional mode class: `list` for the list and `full` for the full screen. `list` mode is usually set by default, but if there’s no one, it’ll be set to `list` anyway and presentation will be opened in the list mode. If `full` is set instead of `list` then presentation will be opened in the full screen mode.
|
|||
|
|
|
|||
|
|
List:
|
|||
|
|
|
|||
|
|
<body class="shower list">
|
|||
|
|
…
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
Full screen:
|
|||
|
|
|
|||
|
|
<body class="shower full">
|
|||
|
|
…
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
Theme’s architecture is based on agreement that all presentation elements are nested in `shower` element and mode classes are hiding or showing needed element depending on current mode.
|
|||
|
|
|
|||
|
|
### Title
|
|||
|
|
|
|||
|
|
Presentation title is marked with the `caption` element, which has following elements provided: `<h1>` for the header, `<p>` for the description and also links.
|
|||
|
|
|
|||
|
|
<header class="caption">
|
|||
|
|
<h1>Presentation Title</h1>
|
|||
|
|
<p><a href="">Yours Truly</a>, Famous Inc.</p>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
### Badge
|
|||
|
|
|
|||
|
|
Badge with “Fork me on GitHub” link (or any other call to action) is marked with `badge` element and placed to the top right corner.
|
|||
|
|
|
|||
|
|
<footer class="badge">
|
|||
|
|
<a href="…">Fork me on Github</a>
|
|||
|
|
</footer>
|
|||
|
|
|
|||
|
|
### Progress
|
|||
|
|
|
|||
|
|
Progress bar shows how many slides left until presentation end and marked with `progress` element visible only in full screen mode:
|
|||
|
|
|
|||
|
|
<div class="progress"></div>
|
|||
|
|
|
|||
|
|
If you want to remove it from presentation just delete this element from document. It’s not possible to hide it only for the certain slides.
|
|||
|
|
|
|||
|
|
## Slide
|
|||
|
|
|
|||
|
|
Slides are marked with `slide` class. Please don’t nest slides and don’t forget closing tags, this could go wrong.
|
|||
|
|
|
|||
|
|
<section class="slide">
|
|||
|
|
…
|
|||
|
|
</section>
|
|||
|
|
<section class="slide">
|
|||
|
|
…
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
There are two slide ratios supported: 16×10 and 4×3. To enable needed one include appropriate style file `screen-4x3.css` or `screen-16x10.css`. Wide screen 16×10 format is included by default.
|
|||
|
|
|
|||
|
|
Slide width is 1024 px for the both ratios, height for 16×10 is 640 px and 768 px for 4×3. Bare in mind these sizes while preparing presentation pictures. In list mode slides are scaled down 2 or 4 times and in full screen mode they are scaled dynamically based in window size.
|
|||
|
|
|
|||
|
|
### Number
|
|||
|
|
|
|||
|
|
…
|
|||
|
|
|
|||
|
|
### Types
|
|||
|
|
|
|||
|
|
…
|
|||
|
|
|
|||
|
|
#### White
|
|||
|
|
|
|||
|
|
…
|
|||
|
|
|
|||
|
|
#### Black
|
|||
|
|
|
|||
|
|
…
|
|||
|
|
|
|||
|
|
#### Grid
|
|||
|
|
|
|||
|
|
…
|
|||
|
|
|
|||
|
|
### Content
|
|||
|
|
|
|||
|
|
…
|
|||
|
|
|
|||
|
|
#### Header
|
|||
|
|
|
|||
|
|
…
|
|||
|
|
|
|||
|
|
#### Paragraphs
|
|||
|
|
|
|||
|
|
…
|
|||
|
|
|
|||
|
|
#### Inline
|
|||
|
|
|
|||
|
|
…
|
|||
|
|
|
|||
|
|
#### Quotes
|
|||
|
|
|
|||
|
|
…
|
|||
|
|
|
|||
|
|
#### Lists
|
|||
|
|
|
|||
|
|
…
|
|||
|
|
|
|||
|
|
#### Columns
|
|||
|
|
|
|||
|
|
…
|
|||
|
|
|
|||
|
|
#### Tables
|
|||
|
|
|
|||
|
|
…
|
|||
|
|
|
|||
|
|
#### Code
|
|||
|
|
|
|||
|
|
…
|
|||
|
|
|
|||
|
|
### Elements
|
|||
|
|
|
|||
|
|
…
|
|||
|
|
|
|||
|
|
#### Cover
|
|||
|
|
|
|||
|
|
…
|
|||
|
|
|
|||
|
|
#### Shout
|
|||
|
|
|
|||
|
|
…
|
|||
|
|
|
|||
|
|
#### Place
|
|||
|
|
|
|||
|
|
…
|
|||
|
|
|
|||
|
|
#### Notes
|
|||
|
|
|
|||
|
|
…
|