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
+
+ +#### Списки + +Списки обозначаются элементами `
    ` для нумерованных и `
      ` для ненумерованных. Списки можно произвольно вкладывать: + +
        +
      1. Literally viral vegan
      2. +
      3. Wes Anderson chillwave Marfa +
          +
        • Retro meh brunch aesthetic
        • +
        • Messenger bag retro cred
        • +
        +
      4. +
      + +Маркерами нумерованных списков становятся цифры, маркеры ненумерованных различаются в зависимости от указанного языка презентации: буллиты `•` для английского и тире `—` для русского языка. + +#### Колонки + +Содержимое на слайде можно разделить на две колонки с помощью класса `double`: + +

      + Echo Park 8-bit sustainable umami deep v Kickstarter. +

      + +Полезнее всего это будет для списков — на слайд тогда поместится не 7, а 14 коротких пунктов: + +
        +
      • Occupy locavore blog
      • +
      • Mustache you haven’t heard of
      • +
      + +#### Таблицы + +Таблицы обозначаются элементами ``, `
      ` выделяет заголовки колонок или строк полужирным, а строки по умолчанию разделяются линейками: + + + + + + + + + + +
      GentrifyTwee
      MessengerMixtape
      + +Чтобы вместо линеек сделать полосатую таблицу, где каждая чётная строчка выделена серым фоном, добавьте таблице класс `striped`: + + + +#### Код + +Блоки кода обозначаются элементом `
      ` со вложенным ``, внутри которых сохраняется форматирование текста:
      +
      +	
      function action() {
      +		// TODO
      +		return true;
      +	}
      + +Чтобы пронумеровать строки, оберните каждую в `` и номер автоматически появится слева: + +
      +		function action() {
      +			// TODO
      +			return true;
      +		}
      +	
      + +Шовер не подсвечивает код автоматически, но мы рекомендуем вам выделять значимые части кода вручную с помощью элемента ``. В этом случае будет не просто красиво, но понятно на что обратить внимание. + +
      function action() {
      +		// TODO
      +		return true;
      +	}
      + +По умолчанию `` выделяет фрагмент кода жёлтым, а если добавить класс `important`, то красным. Для оформления комментариев используйте ``. + +### Элементы + +Элементы для вставки специального содержимого. + +#### Обложка + +Чтобы вставить на слайд картинку-обложку, которая займёт весь слайд и не будет мешать содержимому, используйте `` с классом `cover`: + +
      + +
      + +Картинка позиционируется на слайде и становится позади любого содержимого. Это удобно, если вы хотите сделать подложку для текста или скомбинировать обложку и заголовок. + +Вставленная картинка вписывается в размеры слайда по ширине и высоте. Это не заметно, когда картинка и слайд имеют одинаковые пропорции. Если же картинка выше или шире слайда, то она встанет по центру и упрётся самой длинной стороной в края слайда. + +Этим поведением можно управлять с помощью дополнительных классов `width` и `height`, которые определяют как впишется непропорциональная картинка: по ширине или по высоте. + + + + +Также можно использовать сокращённые классы `w` и `h`: + + + + +Чтобы добавить подпись с автором картинки, ссылкой или другой информацией, оберните обложку в `
      ` и вставьте подпись в `
      `. По умолчанию цвет подписи чёрный, но её можно сделать белой, добавив к `
      ` класс `white`. + +
      + +
      + © Yours Truly +
      +
      + +### Шаут + +Чтобы обозначить раздел презентации, добавьте к заголовку `

      ` класс `shout`, тогда он станет больше и встанет посередине: + +
      +

      Shout

      +
      + +Чтобы заголовок плавно вырастал, добавьте к нему класс `grow`: + +
      +

      Growing Shout

      +
      + +Или класс `shrink`, чтобы он плавно уменьшался: + +
      +

      Shrinking Shout

      +
      + +### Вставка + +Чтобы вставить на слайд элемент в заданном месте, используйте класс `place`, по умолчанию элемент расположится ровно посередине: + +
      + +
      + +Указав дополнительный класс, можно прикрепить элемент посередине к одной из сторон, также можно использовать сокращения `t`, `r`, `b`, `l`: + + + + + + +Если скомбинировать классы сторон, то элемент встанет в соответствующий угол, например, `top right` для верхнего правого: + + + + + + +### Заметка + +Чтобы вставить на слайд заметку, которую не видно во время презентации, но видно при наведении на слайд в режиме списка, используйте элемент с классом `footer`: + +
      +

      Retro meh brunch aesthetic.

      +
      +

      Cosby sweater Shoreditch.

      +
      +
      + +В заметках удобно хранить тезисы для отдельных слайдов. diff --git a/docs/images/material-canvas.png b/docs/images/material-canvas.png new file mode 100644 index 0000000..b6813b5 Binary files /dev/null and b/docs/images/material-canvas.png differ diff --git a/docs/images/material-printing.png b/docs/images/material-printing.png new file mode 100644 index 0000000..658877b Binary files /dev/null and b/docs/images/material-printing.png differ diff --git a/docs/images/ribbon-canvas.png b/docs/images/ribbon-canvas.png new file mode 100644 index 0000000..6ddd301 Binary files /dev/null and b/docs/images/ribbon-canvas.png differ diff --git a/docs/images/ribbon-printing.png b/docs/images/ribbon-printing.png new file mode 100644 index 0000000..a2fd4f6 Binary files /dev/null and b/docs/images/ribbon-printing.png differ diff --git a/docs/printing-en.md b/docs/printing-en.md new file mode 100644 index 0000000..f501188 --- /dev/null +++ b/docs/printing-en.md @@ -0,0 +1,13 @@ +# Printing + +You can export your presentation to PDF by sending it to print in list mode in Chrome and Opera desktop browsers. + +1. Press `Cmd P` or `Ctrl P` +2. Select PDF in targets list +3. Save resulted file + +![Printing dialog](images/printing.png) + +## Other options + +You could also try [Prince](http://princexml.com), [wkhtmltopdf](http://code.google.com/p/wkhtmltopdf) and such console utilities for printing, although not complete modern CSS features support and complicated configuration make them less convenient. diff --git a/docs/printing-ru.md b/docs/printing-ru.md new file mode 100644 index 0000000..dc6963c --- /dev/null +++ b/docs/printing-ru.md @@ -0,0 +1,13 @@ +# Печать + +Вы можете экспортировать презентацию в PDF, отправив слайды из режима списка на печать в браузерах Chrome или Opera для компьютеров. + +1. Нажмите `Cmd P` или `Ctrl P` +2. Выберите формат PDF в списке целей +3. Сохраните получившийся файл + +![Диалог печати](images/printing.png) + +## Другие варианты + +Вы также можете попробовать для печати консольные утилиты [Prince](http://princexml.com), [wkhtmltopdf](http://code.google.com/p/wkhtmltopdf) и подобные, однако неполная поддержка современных возможностей CSS и сложная настройка делают их менее удобными. diff --git a/docs/shortcuts-en.md b/docs/shortcuts-en.md index dcb2494..b216c01 100644 --- a/docs/shortcuts-en.md +++ b/docs/shortcuts-en.md @@ -41,4 +41,4 @@ You can navigate between slides, enter slide mode and exit to list mode using va ## Keynote -- `Cmd Option P` combo for starting slide mode from the current slide. \ No newline at end of file +- `Cmd Option P` combo for starting slide mode from the current slide.