From 8ef61e38eb1c59c49230f254c222efc20b3e8a72 Mon Sep 17 00:00:00 2001 From: Vadim Makeev Date: Sat, 9 Apr 2016 16:56:19 +0500 Subject: [PATCH] Docs moved to Shower --- docs/features-en.md | 192 +++++++++++++++ docs/features-ru.md | 374 ++++++++++++++++++++++++++++++ docs/images/material-canvas.png | Bin 0 -> 84505 bytes docs/images/material-printing.png | Bin 0 -> 82213 bytes docs/images/ribbon-canvas.png | Bin 0 -> 100589 bytes docs/images/ribbon-printing.png | Bin 0 -> 79676 bytes docs/printing-en.md | 13 ++ docs/printing-ru.md | 13 ++ docs/shortcuts-en.md | 2 +- 9 files changed, 593 insertions(+), 1 deletion(-) create mode 100644 docs/features-en.md create mode 100644 docs/features-ru.md create mode 100644 docs/images/material-canvas.png create mode 100644 docs/images/material-printing.png create mode 100644 docs/images/ribbon-canvas.png create mode 100644 docs/images/ribbon-printing.png create mode 100644 docs/printing-en.md create mode 100644 docs/printing-ru.md diff --git a/docs/features-en.md b/docs/features-en.md new file mode 100644 index 0000000..8cb661b --- /dev/null +++ b/docs/features-en.md @@ -0,0 +1,192 @@ +# 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: + + + + +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: + + + … + + +Full screen: + + + … + + +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: `

` for the header, `

` for the description and also links. + +

+

Presentation Title

+

Yours Truly, Famous Inc.

+
+ +### 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. + + + +### Progress + +Progress bar shows how many slides left until presentation end and marked with `progress` element visible only in full screen mode: + +
+ +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. + +
+ … +
+
+ … +
+ +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 + +… diff --git a/docs/features-ru.md b/docs/features-ru.md new file mode 100644 index 0000000..dbae4f9 --- /dev/null +++ b/docs/features-ru.md @@ -0,0 +1,374 @@ +# Возможности + +Все возможности темы продемонстрированы в файле [index.html](../index.html), используйте его как руководство для создания презентации. Ниже представлено более подробное описание. + +- [Анатомия](#Анатомия) +- [Общие](#Общие) + - [Язык](#Язык) + - [Холст](#Холст) + - [Заглавие](#Заглавие) + - [Бейдж](#Бейдж) + - [Прогресс](#Прогресс) +- [Слайд](#Слайд) + - [Номер](#Номер) + - [Типы](#Типы) + - [Белый](#Белый) + - [Чёрный](#Чёрный) + - [Сетка](#Сетка) + - [Содержимое](#Содержимое) + - [Заголовок](#Заголовок) + - [Абзацы](#Абзацы) + - [Строчные](#Строчные) + - [Цитаты](#Цитаты) + - [Списки](#Списки) + - [Колонки](#Колонки) + - [Таблицы](#Таблицы) + - [Код](#Код) + - [Элементы](#Элементы) + - [Обложка](#Обложка) + - [Шаут](#Шаут) + - [Вставка](#Вставка) + - [Заметки](#Заметки) + +## Анатомия + +Готовый пакет темы состоит из следующих папок и файлов: + +1. Папка `docs` с документацией по использованию, включая это руководство. +2. Папка `fonts` со шрифтами в сжатом формате WOFF. +3. Папка `images` с картинками для оформления. +4. Папка `pictures` с примерами картинок. +5. Папка `styles` с собранными стилями в размерах 16×10 и 4×3. +6. Файл `index.html` с демонстрацией всех возможностей. + +Дополнительно к этим файлам, в репозитории содержатся исходные файлы: + +1. Папка `source` с исходными файлами шрифта в TTF и макетом для [Sketch](http://bohemiancoding.com/sketch/). +2. Папка `styles` также содержит исходные стили в формате SCSS. + +## Общие + +### Язык + +Основной язык презентации указан в корневом элементе документа, обратите на него внимание и выставите верный: + + + + +На основе этого тема использует подходящие типографские традиции. Атрибут `lang` можно также задавать отдельным слайдам или даже элементам. + +### Холст + +Корневой элемент презентации имеет основной класс `shower` и дополнительный класс режима: `list` для списка и `full` для показа слайдов. Режим `list` обычно указан по умолчанию, но если его нет, то он всё равно примет значение `list` и презентация откроется в режиме списка. Если вместо `list` задать `full`, то презентация откроется в режиме показа. + +Список: + + + … + + +Показ: + + + … + + +Архитектура темы опирается на договорённости, что все части презентации вложены в корневой элемент `shower`, а классы режимов скрывают или показывают нужные элементы, в зависимости от текущего режима. + +### Заглавие + +Заглавие презентации обозначено элементом `caption`, в котором предусмотрены следующие элементы: `

` для заголовка, `

` для описания, а также ссылки. + +

+

Presentation Title

+

Yours Truly, Famous Inc.

+
+ +### Бейдж + +Бейдж со ссылкой «Форкни меня на Гитхабе» (или любым другим призывом) обозначен элементом `badge` и расположен в правом верхнем углу: + + + +### Прогресс + +Индикатор прогресса показывает сколько слайдов осталось до конца презентации, обозначается элементом `progress` и виден только в режиме показа: + +
+ +Если вы хотите убрать его из презентации, просто удалите этот элемент из документа. Отключить его для отдельных слайдов не получится. + +## Слайд + +Слайды обозначаются классом `slide`. Не вкладывайте слайды друг в друга и не теряйте закрывающие теги, это может плохо закончиться. + +
+ … +
+
+ … +
+ +Тема поддерживает два соотношения сторон слайдов: 16×10 и 4×3. Для переключения в нужный, подключите подходящий файл стилей: `screen-4x3.css` или `screen-16x10.css`. По умолчанию подключается широкоформатный 16×10. + +Ширина слайдов в обоих форматах 1024 пикселя, высота 640 пикселей для 16×10 и 768 пикселей для 4×3. Рассчитывайте на эти размеры, когда готовите картинки для презентации. В режиме списка слайды уменьшаются в 2 или 4 раза, а в режиме показа масштабируются динамически, в зависимости от размеров окна. + +### Номер + +Нумерация на слайдах помогает слушателям запоминать слайды для вопросов, а также открывать нужный слайд, меняя его номер в адресной строке. Нумерация генерируется автоматически с помощью CSS-счётчиков и может быть отключена для отдельных слайдов. + +Красная ленточка с номером слайда по умолчанию видна на всех слайдах, кроме белого и чёрного типов. Что скрыть номер слайда, добавьте к классу `slide` ещё один: `white` или `black`. Подробнее о типах читайте в следующей части. + +### Типы + +Типы слайда меняют его внешний вид. Тип задаётся дополнительным классом к основному `slide`. В теме есть несколько встроенных типов, вы можете описать собственные типы для каждой презентации или добавить их в свою тему. + +#### Белый + +Белый тип задаёт белый фон и отключает ленточку с номером слайда. Используйте его, когда вам нужен абсолютно белый слайд: + +
+ … +
+ +#### Чёрный + +Чёрный тип задаёт чёрный фон и отключает ленточку с номером слайда. Используйте его, когда вам нужен абсолютно чёрный слайд: + +
+ … +
+ +Обратите внимание, что чёрный тип слайда не меняет цвет текста. + +#### Сетка + +Сетка задаёт слайду фон с двумя сетками: базовую розовую и дополнительную голубую с полями, строками и колонками. + +
+ … +
+ +Базовая единица сетки — 25 пикселей. Высота строки основного текста 2 единицы, расстояние между блоками содержимого 3, боковые поля 4, ширина содержимого 33, ширина одной колонки 15. + +Все элементы презентации выровнены по этой сетке и рекомендуется следовать ей при изменении или расширении темы. + +### Содержимое + +Простое содержимое: заголовки, абзацы, списки. + +#### Заголовок + +Заголовок слайда обозначается элементом `

`: + +
+

Slide Header

+
+ +Мы осознанно не стали вводить следующие уровни заголовков, чтобы не провоцировать иерархические сложности на слайде. + +#### Абзацы + +Абзацы текста обозначаются элементом `

`, которому также можно задать класс `note`, чтобы превратить текст в заметку. + +

+

Текст

+

Заметка

+
+ +#### Строчные + +В теме предусмотрено оформление для следующих строчных элементов: + +- `` голубого цвета с подчёркиванием; +- `` и `` полужирного начертания; +- `` и `` курсивного начертания; +- ``, `` и `` моноширинным шрифтом; +- `` и `` для надстрочных и подстрочных индексов; +- `` для выделения частей текста жёлтым. + +#### Цитаты + +Цитаты обозначаются элементом `
` в который помещается один или несколько абзацев: + +
+

Flannel bicycle rights locavore selfies.

+
+ +Цитата оформляется курсивом и свешенной кавычкой. Если вам нужно добавить автора цитаты, мы рекомендуем обернуть цитату в элемент `
` и поместить подпись в `
`, который, следуя сразу за цитатой, станет полужирным. + +
+
+

Post-ironic fashion axe flexitarian

+
+
Yours Truly
+
+ +#### Списки + +Списки обозначаются элементами `
    ` для нумерованных и `