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.
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)
...
...
@@ -32,7 +32,7 @@ All theme’s features are demonstrated in the [index.html](../index.html) file.
## Anatomy
Final theme package consists of the following folders and files:
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.
...
...
@@ -52,14 +52,14 @@ In addition to files above repository contains source files:
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">
<html lang="ru">
Appropriate typography traditions are used based on this value. `lang` attribute could also be set to separate slides and even elements.
Appropriate typography traditions are used based on this value. `lang` attribute could also be set to separate slides or 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.
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 slides will be opened in the list mode. If `full` is set instead of `list` then slides will be opened in the full screen mode.
List:
...
...
@@ -67,15 +67,15 @@ List:
…
</body>
Full screen:
Full:
<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.
Theme’s architecture is based on agreement that all presentation elements are nested in `shower` element and mode classes are hiding or showing needed elements depending on current mode.
### Title
### Caption
Presentation title is marked with the `caption` element, which has following elements provided: `<h1>` for the header, `<p>` for the description and also links.
...
...
@@ -84,6 +84,8 @@ Presentation title is marked with the `caption` element, which has following ele
<p><a href="">Yours Truly</a>, Famous Inc.</p>
</header>
Caption is visible only in the list mode. Don’t forget to specify presentation title in document’s `<title>` element.
### 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.
...
...
@@ -92,13 +94,15 @@ Badge with “Fork me on GitHub” link (or any other call to action) is marked
<a href="…">Fork me on Github</a>
</footer>
Badge is visible only in the list mode.
### Progress
Progress bar shows how many slides left until presentation end and marked with `progress` element visible only in full screen mode:
Progress bar shows how much is 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.
To remove it from presentation just remove this element from document. There’s no way to hide it for certain slides.
## Slide
...
...
@@ -111,64 +115,184 @@ Slides are marked with `slide` class. Please don’t nest slides and don’t for
…
</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.
There are two slide ratios supported: 16×10 and 4×3. To enable needed one include appropriate 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
…
Slide numbers help audience to remember slides for questions and open needed slide by changing number in address field. Numbers are generated automatically using CSS counters and could be turned off for certain slides.
You can hide number manually:
<section class="slide" id="off">
<style>
#off::after {
visibility: hidden;
}
</style>
</section>
Or change slide type: add `white` or `black` to `slide`. Read more about types in the next section.
### Types
…
Types are changing slide’s look. You can set type by adding class to the main `slide`. There are few built-in types available in the theme, you could also describe custom types for each presention or add it to your theme.
#### White
…
White type set white background and turns off slide number. Use it when you need just a pure white slide.
<section class="slide white">
…
</section>
#### Black
…
Black type set black background and turns off slide number. Use it when you need just a pure black slide.
<section class="slide black">
…
</section>
Please note that black slide type doesn’t change text color.
#### Grid
…
Grid set a background with two guide types: main magenta guides and additional cyan guides, setting margins, rows and columns.
<section class="slide grid">
…
</section>
All theme elements are aligned by this grid and it’s recommended to follow it while changing or extending a theme.
### Content
…
Simple content: headers, paragraphs, lists.
#### Header
…
Slide header is marked with `<h2>` element:
<section class="slide">
<h2>Slide Header</h2>
</section>
We haven’t introduced next heading levels to not provoke slides complexity.
#### Paragraphs
…
Paragraphs are marked with `<p>` element. You could also make a note, less important part of a slide, by adding a `note` class to a paragraph:
<section class="slide">
<p>Text</p>
<p class="note">Note</p>
</section>
#### Inline
…
There are following inline elements styled in the theme:
-`<a>` is underlined;
-`<strong>` and `<b>` are bold;
-`<em>` and `<i>` are italic;
-`<code>`, `<samp>`, and `<kbd>` are monospaced;
-`<sup>` and `<sub>` for superscrip and subscript indexes;
-`<mark>` for highliting parts of text.
#### Quotes
…
Quotes are marked with `<blockquote>` element which contains one or more paragraphs:
<blockquote>
<p>Flannel bicycle rights locavore selfies.</p>
</blockquote>
To add quote’s author wrap a quote to a `<figure>` element and put a caption in the `<figcaption>` right after:
<figure>
<blockquote>
<p>Post-ironic fashion axe flexitarian</p>
</blockquote>
<figcaption>Yours Truly</figcaption>
</figure>
#### Lists
…
<ol>
<li>Literally viral vegan</li>
<li>Wes Anderson chillwave Marfa
<ul>
<li>Retro meh brunch aesthetic</li>
<li>Messenger bag retro cred</li>
</ul>
</li>
</ol>
…
#### Columns
…
<p class="double">
Echo Park 8-bit sustainable umami deep v Kickstarter.
</p>
…
<ul class="double">
<li>Occupy locavore blog</li>
<li>Mustache you haven’t heard of</li>
</ul>
#### Tables
…
<table>
<tr>
<th scope="col">Gentrify</th>
<th>Twee</th>
</tr>
<tr>
<th scope="row">Messenger</th>
<td>Mixtape</td>
</tr>
</table>
…
<table class="striped">
#### Code
…
<pre><code>function action() {
// TODO
return true;
}</code></pre>
…
<pre>
<code>function action() {</code>
<code> // TODO</code>
<code> return true;</code>
<code>}<code>
</pre>
…
<pre><code>function <mark>action()</mark> {
<span class="comment">// TODO<span>
return <mark class="important">true</mark>;
}</code></pre>
…
### Elements
...
...
@@ -179,14 +303,84 @@ Slide width is 1024 px for the both ratios, height for 16×10 is 640 px and 768
Все возможности темы продемонстрированы в файле [index.html](../index.html), используйте его как руководство для создания презентации. Ниже представлено более подробное описание.
Все возможности темы продемонстрированы в файле [index.html](index.html), используйте его как руководство для создания презентации. Ниже представлено более подробное описание.
-[Анатомия](#Анатомия)
-[Общие](#Общие)
...
...
@@ -32,7 +32,7 @@
## Анатомия
Готовый пакет темы состоит из следующих папок и файлов:
Пакет темы состоит из следующих папок и файлов:
1. Папка `docs` с документацией по использованию, включая это руководство.
2. Папка `fonts` со шрифтами в сжатом формате WOFF.
...
...
@@ -55,11 +55,11 @@
<html lang="ru">
<html lang="en">
На основе этого тема использует подходящие типографские традиции. Атрибут `lang` можно также задавать отдельным слайдам или даже элементам.
На основе этого тема использует подходящие типографские традиции. Атрибут `lang` можно также задавать отдельным слайдам или элементам.
### Холст
Корневой элемент презентации имеет основной класс `shower` и дополнительный класс режима: `list` для списка и `full`для показа слайдов. Режим `list` обычно указан по умолчанию, но если его нет, то он всё равно примет значение `list` и презентация откроется в режиме списка. Если вместо `list` задать `full`, то презентация откроется в режиме показа.
Корневой элемент презентации имеет основной класс `shower` и дополнительный класс режима: `list` для списка и `full`полного экрана. Режим `list` обычно указан по умолчанию, но если его нет, то он всё равно примет значение `list` и слайды откроются в режиме списка. Если вместо `list` задать `full`, то слайды откроются в полноэкранном режиме.
Список:
...
...
@@ -67,7 +67,7 @@
…
</body>
Показ:
Полный:
<body class="shower full">
…
...
...
@@ -84,6 +84,8 @@
<p><a href="">Yours Truly</a>, Famous Inc.</p>
</header>
Заглавие видно только в режиме списка. Не забудьте также указать заголовок презентации в элементе `<title>` документа.
### Бейдж
Бейдж со ссылкой «Форкни меня на Гитхабе» (или любым другим призывом) обозначен элементом `badge` и расположен в правом верхнем углу:
...
...
@@ -92,13 +94,15 @@
<a href="…">Fork me on Github</a>
</footer>
Бейдж виден только в режиме списка.
### Прогресс
Индикатор прогресса показывает сколько слайдов осталось до конца презентации, обозначается элементом `progress` и виден только в режиме показа:
Индикатор прогресса показывает сколько осталось до конца презентации, обозначается элементом `progress` и виден только в полноэкранном режиме:
<div class="progress"></div>
Если вы хотите убрать его из презентации, просто удалите этот элемент из документа. Отключить его для отдельных слайдов не получится.
Чтобы убрать его из презентации, просто удалите этот элемент из документа. Отключить его для отдельных слайдов не получится.
## Слайд
...
...
@@ -111,15 +115,25 @@
…
</section>
Тема поддерживает два соотношения сторон слайдов: 16×10 и 4×3. Для переключения в нужный, подключите подходящий файл стилей: `screen-4x3.css` или `screen-16x10.css`. По умолчанию подключается широкоформатный 16×10.
Поддерживаюся два соотношения сторон слайдов: 16×10 и 4×3. Для переключения в нужный, подключите подходящий файл: `screen-4x3.css` или `screen-16x10.css`. По умолчанию подключается широкоформатный 16×10.
Ширина слайдов в обоих форматах 1024 пикселя, высота 640 пикселей для 16×10 и 768 пикселей для 4×3. Рассчитывайте на эти размеры, когда готовите картинки для презентации. В режиме списка слайды уменьшаются в 2 или 4 раза, а в режиме показа масштабируются динамически, в зависимости от размеров окна.
Ширина слайдов в обоих форматах 1024 пикселя, высота 640 пикселей для 16×10 и 768 пикселей для 4×3. Рассчитывайте на эти размеры, когда готовите картинки для презентации. В режиме списка слайды уменьшаются в 2 или 4 раза, а в полноэкранном режиме масштабируются динамически, в зависимости от размеров окна.
### Номер
Нумерация на слайдах помогает слушателям запоминать слайды для вопросов, а также открывать нужный слайд, меняя его номер в адресной строке. Нумерация генерируется автоматически с помощью CSS-счётчиков и может быть отключена для отдельных слайдов.
Красная ленточка с номером слайда по умолчанию видна на всех слайдах, кроме белого и чёрного типов. Что скрыть номер слайда, добавьте к классу `slide` ещё один: `white` или `black`. Подробнее о типах читайте в следующей части.
Вы можете скрыть номер вручную:
<section class="slide" id="off">
<style>
#off::after {
visibility: hidden;
}
</style>
</section>
Либо поменяйте тип слайда: добавьте `white` или `black` к `slide`. Подробнее о типах читайте в следующей части.
### Типы
...
...
@@ -127,7 +141,7 @@
#### Белый
Белый тип задаёт белый фон и отключает ленточку с номером слайда. Используйте его, когда вам нужен абсолютно белый слайд:
Белый тип задаёт белый фон и отключает номер слайда. Используйте его, когда вам нужен абсолютно белый слайд:
<section class="slide white">
…
...
...
@@ -135,7 +149,7 @@
#### Чёрный
Чёрный тип задаёт чёрный фон и отключает ленточку с номером слайда. Используйте его, когда вам нужен абсолютно чёрный слайд:
Чёрный тип задаёт чёрный фон и отключает номер слайда. Используйте его, когда вам нужен абсолютно чёрный слайд:
<section class="slide black">
…
...
...
@@ -145,15 +159,13 @@
#### Сетка
Сетка задаёт слайду фон с двумя сетками: базовую розовую и дополнительную голубую с полями, строками и колонками.
Сетка задаёт фон с двумя типами направляющих: базовые розовые и дополнительные голубые, обозначающие поля, строки и колонки.
<section class="slide grid">
…
</section>
Базовая единица сетки — 25 пикселей. Высота строки основного текста 2 единицы, расстояние между блоками содержимого 3, боковые поля 4, ширина содержимого 33, ширина одной колонки 15.
Все элементы презентации выровнены по этой сетке и рекомендуется следовать ей при изменении или расширении темы.
Все элементы темы выровнены по этой сетке и рекомендуется следовать ей при изменении или расширении темы.
### Содержимое
...
...
@@ -167,11 +179,11 @@
<h2>Slide Header</h2>
</section>
Мы осознанно не стали вводить следующие уровни заголовков, чтобы не провоцировать иерархические сложности на слайде.
Мы не стали вводить следующие уровни заголовков, чтобы не провоцировать усложнение слайдов.
#### Абзацы
Абзацы текста обозначаются элементом `<p>`, которому также можно задать класс `note`, чтобы превратить текст в заметку.
Абзацы текста обозначаются элементом `<p>`. Вы также можете сделать из абзаца заметку, менее важную часть слайда, если задать ему класс `note`:
<section class="slide">
<p>Текст</p>
...
...
@@ -182,12 +194,12 @@
В теме предусмотрено оформление для следующих строчных элементов:
-`<a>`голубого цвета с подчёркиванием;
-`<a>` с подчёркиванием;
-`<strong>` и `<b>` полужирного начертания;
-`<em>` и `<i>` курсивного начертания;
-`<code>`, `<samp>` и `<kbd>` моноширинным шрифтом;
-`<sup>` и `<sub>` для надстрочных и подстрочных индексов;
-`<mark>` для выделения частей текста жёлтым.
-`<mark>` для выделения частей текста.
#### Цитаты
...
...
@@ -197,7 +209,7 @@
<p>Flannel bicycle rights locavore selfies.</p>
</blockquote>
Цитата оформляется курсивом и свешенной кавычкой. Если вам нужно добавить автора цитаты, мы рекомендуем обернуть цитату в элемент `<figure>` и поместить подпись в `<figcaption>`, который, следуя сразу за цитатой, станет полужирным.
Чтобы добавить автора цитаты, оберните цитату в элемент `<figure>` и поместите подпись в `<figcaption>` сразу после неё:
