При нажатии на иконку карандашика открывается редактор кода текущей страницы.

Если у вас нет доступа к Карандашику, то вы не увидите иконку. Доступ к Карандашику привязан к Бюросфере. Доступ автоматически получают все бюрошники, а остальные — по предварительному согласованию с бюро. Иными словами, если вы бюрошник и у вас ещё нет доступа, то напишите в сапорт: support@bureau.ru. А если вы не бюрошник, но считаете, что вам полагается доступ, то обсудите это с кем‑то из бюрошников.

div
  h1 Заголовок второго уровня
  p Абзац текста. Дальше идёт рыбный текст. Изменение глобальной стратегии сознательно индуцирует конвергентный нестандартный подход. До недавнего времени считалось, что провоцирование на рынке.
  ul
    li Первый пункт списка
    li Второй пункт списка
  p Абзац текста. Дальше идёт рыбный текст. Изменение глобальной стратегии сознательно индуцирует конвергентный нестандартный подход. До недавнего времени считалось, что провоцирование на рынке.

<div>
  <h1>Заголовок первого уровня</h1>
  <p>Абзац текста. Дальше идёт рыбный текст. Изменение глобальной стратегии сознательно индуцирует конвергентный нестандартный подход. До недавнего времени считалось, что провоцирование на рынке.</p>
  <ul>
    <li>Первый пункт списка</li>
    <li>Второй пункт списка</li>
  <p>Абзац текста. Дальше идёт рыбный текст. Изменение глобальной стратегии сознательно индуцирует конвергентный нестандартный подход. До недавнего времени считалось, что провоцирование на рынке.</p>
</div>

<div><h1>Заголовок на плашке</h1></div>

div
  h1 Заголовок второго уровня

+module

+module({mod:'bordered'})

+module({mod: 'bordered halfTextWidth'})

+module({mod:'bordered halfTextWidth', fitToProportion: '12:1'})
+module({mod:'bordered halfTextWidth', fitToProportion: '3:1'})
+module({mod:'bordered halfTextWidth', fitToProportion: '1:1'})

+module({mod:'bordered halfTextWidth', fitToProportion: '12:1', style:'background:red'})
+module({mod:'bordered halfTextWidth', fitToProportion: '3:1', style:'background:red'})
+module({mod:'bordered halfTextWidth', fitToProportion: '1:1', style:'background:red'})

p.xxxl Огромный заголовок первого уровня

//- Комментарий в коде

block content
  style.
    :root {
      --backgroundColor: #000;  /* Фон */
      --textColor: #fff; /* Текст */
      --linkColor: #FFFF00; /* Ссылки */
      --linkUnderlineColor: rgba(255, 255, 0, .3);/* Подчёркивание ссылок */
      --keyColor: #00ffff; /* Акценты */
      --keyUnderlineColor: rgba(0, 255, 255, .3); /* Подчёркивание акцентных ссылок */
    }

  +webpage

+module({device: 'desktop'})
  +image({src: 'image.png'})

+module({device: 'mobile'})
  +image({src: 'image.png'})

+module({device: 'desktop laptop'})
  +image({src: 'image.png'})

+module({mod:'bordered'}) 
+module({mod:'bordered'})

+module({mod:'textWidth', style:'height:50px; background:red'})
+module({mod:'lessThanTextWidth', style:'height:50px; background:red'})
+module({mod:'halfTextWidth', style:'height:50px; background:red'})

+module({fitToProportion: '3:1', style:'background-color:yellow;'})

p Этот вариант — большая удача:
+module({mod: 'boxed textWidth'})
  +cols
    +module
      p Продукт как можно раньше начинает работать, выполнять своё полезное действие, зарабатывать деньги, расширять аудиторию.
      p Чем больше функций, тем больше их пересечений, а значит мест для ошибки. Поэтому отказ от функции помогает уменьшить количество узких мест и повысить качество первой версии.
      p Открытый вовремя продукт помогает быстрее узнать правду о продукте: изучить мнение пользователей и проверить гипотезы. Возможно, убранная функция никогда и не понадобится, и силы будет лучше потратить на другую.
    +module
      p Новый продукт с небольшим числом функций легче объяснить пользователям. Только мы знаем о том, что часть идей не реализовали. Пользователям они бы только добавили сложностей.
      +liftOut Когда отложенная функция добавится во второй версии, будет кого ей порадовать. Кроме того, новая функция — это информационный повод, лишняя причина рассказать о продукте.

+module({mod: 'boxed noMargins', bleedBackground: 'sides', style:'background-color:#FFFF00;'})
  h2 Модуль на всю ширину экрана
  p Абзац текста. Дальше идёт рыбный текст. Изменение глобальной стратегии сознательно индуцирует конвергентный нестандартный подход. До недавнего времени считалось, что провоцирование на рынке.

+module({bleed: 'sides', style:'background-color:#99FFFF;'})
  h2 Модуль на всю ширину экрана
  p Абзац текста. Дальше идёт рыбный текст. Изменение глобальной стратегии сознательно индуцирует конвергентный нестандартный подход. До недавнего времени считалось, что провоцирование на рынке.

p В 2021 году «Деликат» откроет 30 новых магазинов в миниформате. Чтобы покупатели увидели, что это тот самый «Деликат», но маленький, в бюро для маленьких магазинов придумали собственный логотип.

+module({bleed: 'sides'})
  +image({src: '/projects/code-guide/files/delikat-mini.jpg'})

p В 2021 году «Деликат» откроет 30 новых магазинов в миниформате. Чтобы покупатели увидели, что это тот самый «Деликат», но маленький, в бюро для маленьких магазинов придумали собственный логотип.

+module({mod: 'maxWidthOnDesktop', bleed: 'sides'})
  +image({src: 'delikat-mini.jpg'})

p Кажется очевидным, но обычно люди не собирают данные. Просто приходят к боссу, мол, «дайте нам больше людей». А сколько именно? Каких? К чему это приведёт? Почему нужно выделять дополнительные двести‑триста тысяч рублей, если и так всё нормально работает?

+module({mod: 'boxed', bleedBackground: 'sides', style:'background-color:#FFFF99;'})
  h2 Опасность
  p Может оказаться, что скорость для компании не в приоритете и руководителю нормально, что задачи висят подолгу. Или что руководитель считает, что редакторы недогружены. Может быть, он не в курсе, как долго пишутся тексты и какими жертвами. Или босс уверен, что если вы ни о чём не говорите, то у вас всё в порядке.

p У меня был случай — он не связан напрямую с вашим вопросом, но по сути близок, — мы делали проект с клиентом. Мне казалось, что проект подыхает от безумного количества правок. Я был уверен, что их там сотни, и я просто из‑под них не вылезу. Я позвал на помощь директора со стороны нашего предприятия, мол, помоги вразумить клиента. Он пришёл, очень аккуратно поговорил с клиентом, объяснил серьёзность ситуации. И дальше передал слово мне, мол, покажи, какие страшные у тебя замечания.

+module({mod: 'boxed noMargins', bleedBackground: 'sides', style:'background-color:#FFFF99;'})
  h2 Модуль на всю ширину экрана
  p Абзац текста. Дальше идёт рыбный текст. Изменение глобальной стратегии сознательно индуцирует конвергентный нестандартный подход. До недавнего времени считалось, что провоцирование на рынке.

+module({mod: 'boxed noMargins', bleedBackground: 'sides', style:'background-color:#99FFFF;'})
  h2 Модуль на всю ширину экрана
  p Абзац текста. Дальше идёт рыбный текст. Изменение глобальной стратегии сознательно индуцирует конвергентный нестандартный подход. До недавнего времени считалось, что провоцирование на рынке.

p Пример использования модификатора layoutLayer, который добавляет вокруг модуля стандартные межэтажные расстояния в 72 пк.
+module({ mod: 'layoutLayer' })
  +image({src: 'screen-geopotential.jpg'})
  +caption Верхний и нижний отступы равны 72 пк
p Отступ до этого абзаца — 72 пк. Дальше идёт рыбный текст. Изменение глобальной стратегии сознательно индуцирует конвергентный нестандартный подход. До недавнего времени считалось, что провоцирование на рынке.

+module({href: 'https://bureau.ru/projects/gismeteo/'})
  p Веб-система визуализации и обработки метеорологических данных на карте в реальном времени

/* Пример. Для меню справа на этой странице сначала добавлен родительский модуль с positionOrigin, а затем дочерний спозиционирован абсолютно при помощи left и bottom. */

+module({mod:'positionOrigin'})
  +module({top:'0', bottom:'0'})
    div(style="position: sticky; top:18px")        
      +caption <a href="#basics">Основы</a>
      +caption <a href="#elements">Элементы</a>
      +caption <a href="#mixins">Миксины</a>
      +caption <a href="#animation">Анимация</a>

+rows
  +module
    p Андрей
  +module
    p Костя

+rows({gutter:'36px'})
  +module
    p Андрей
  +module
    p Костя

+rows
  +rows({gutter:'p'})
    p Первая строка. Стандартные отступы между абзацами.
    p Вторая строка со стандартным отступом между абзацами.

  +rows({gutter:'caption'})
    p Первая строка. Отступы до подписи.
    p Вторая строка с отступом до подписи.

Кейс

Две картинки в колонках

+cols
  +image({src: 'logo1.jpg'})
  +image({src: 'logo2.jpg'})

Два абзаца

+cols
  +module
    p Это абзац рыбного текста, чтобы показать текст в две колонки. Такое понимание ситуации восходит к Эл Райс. При этом ретроконверсия национального наследия тормозит социометрическое формирование имиджа. Построение бренда, вопреки мнению П. Друкера, недостижимо.
  +module
    p Это абзац рыбного текста, чтобы показать текст в две колонки. Чтобы текст был энергичным, он должен быть ёмким. В предложении не должно быть ненужных слов, в абзаце — ненужных предложений, так же, как и на картине не должно быть ненужных штрихов.

Это абзац рыбного текста, чтобы показать текст в две колонки. Такое понимание ситуации восходит к Эл Райс. При этом ретроконверсия национального наследия тормозит социометрическое формирование имиджа. Построение бренда, вопреки мнению П. Друкера, недостижимо.

Это абзац рыбного текста, чтобы показать текст в две колонки. Чтобы текст был энергичным, он должен быть ёмким. В предложении не должно быть ненужных слов, в абзаце — ненужных предложений, так же, как и на картине не должно быть ненужных штрихов.

+cols
  +module
    h3 Нужно
    p 13.3.1. Вывод необязательных данных таблицы за её пределы
    p 13.3.2. Распределение подлежащих между боковиком, головкой и прографкой
    p 13.3.3. Объединение одинаковых таблиц, стоящих рядом
    p 13.3.4. Устранение лишних граф
    p 13.3.5. Сдваивание, страивание и т. д. таблиц
    p 13.3.6. «Перевёртывание» таблиц
    p 13.3.7. Деление таблицы на несколько самостоятельных
    p 13.3.8. Объединение граф

  +module
    h3 Обязательно
    p 13.7.1. Устранение повтора тематического заголовка
    p 13.7.2. Вынос повторяющихся элементов в верхний ярус или в тематический заголовок таблицы
    p 13.7.3. Устранение необязательных ярусов
    p 13.7.4. Перенос части многословных заголовков граф в тематический заголовок, основной текст или подтабличное примечание
    p 13.7.5. Устранение лишних слов
    p 13.7.6. Перевод числительных в цифровую или смешанную форму
    p 13.7.7. Замена словесных заголовков граф символическими буквенными обозначениями
    p 13.7.8. Объединение двух граф в одну для нормального расположения заголовков граф

+cols
  +module
    h3 Нельзя
    p Сайт о пользе вегетарианства для здоровья
    p Сервис подбора гомеопатического средства
    p Биохакинг
    p Как родить дома

  +module
    h3 Можно
    p Сайт рецептов вегетарианских блюд
    p Сайт о бесполезности гомеопатии
    p Лайфхаки
    p Гимнастика после родов (с гинекологом)

+cols
  +module
    h3 Плотоядные
    p Нет пор на коже, тело охлаждается через язык
  +module
    h3 Человек
    p Много пор на коже, потоотделение
+cols
    p Острые резцы для разрывания мяса
    p Тупые резцы
+cols
    p Неразвитые слюн­ные железы для пред­вари­тель­ного пере­вари­вания
    p Хорошо развитые слюн­ные железы для пред­вари­тель­ного пере­вари­вания
+cols
    p Кислая слюна без птиалина
    p Щелочная слюна с птиалином для переваривания злаков и фруктов
+cols
    p Нет плоских задних зубов
    p Есть плоские задние зубы для пережевывания
+cols
    p Сильная соляная кислота в желудке для переваривания мяса животных
    p Соляная кислота в желудке в 10 раз слабее, чем у плотоядных
+cols
    p Длина желудочно-кишечного тракта в 3 раза больше длины тела для быстрого вывода гниющего мяса
    p Длина кишечника в 6 раз больше длины тела

h2 Интерактивная книга для компании
+cols({divisionProportions: '12:4'})
  +module
    p «Книга кассира» создана на движке Издательства бюро. Интерактивный формат позволяет принципиально по‑новому взглянуть на подачу теории и сделать её более наглядной и запоминающейся. Благодаря закладкам и поиску книгой удобно пользоваться как справочником.
    p Сотрудники компании получают индивидуальный доступ к книге по электронной почте. Доступом книге управляет ответственный менеджер компании. Для чтения нужен компьютер, планшет или телефон с интернетом и любым современным браузером.
  +liftOut В справочнике разобраны 32 ситуации, с которыми может столкнуться кассир.

+cols
  +module({divisionPortion: 3})
    h3 Этап
    p 1. Структура номера (cостав книжек, положение главных статей, основные рубрики, новые одностраничные рубрики, предварительный план рекламы)
  +module
    h3 Срок, раб. дней
    p 5 дней, 10—14 мар
  +module
    h3 Стоимость, ₽
    p 10 000
+cols
  +module({divisionPortion: 3})
    p 2. Общее визуальное решение журнала, поиск стиля иллюстраций нового макета, согласование структуры номера
  p 5 дней, 17—21 мар
  p 20 000
+cols
  +module({divisionPortion: 3})
    p 3. Одностраничные текстовые рубрики, согласование ОВР
  p 5 дней, 24—28 мар
  p 30 000
+cols
  +module({divisionPortion: 3})
    p 4. Рубрики «Номер одним взглядом» и «Оформление документа», тестовая итерация с агентством иллюстраторов, согласование одностраничных текстовых рубрик
  p 5 дней, 31 мар — 4 апр
  p 40 0001 мар — 4 апр
  p 40 000

+rows
  +cols({mod:'noTransposeOnMobile'})
    +module
      +image({ src: 'rocket1.png' })
      +caption Прошёл 15 минут
    +module
      +image({ src: 'rocket2.png' })
      +caption Прошёл 30 минут
    +module
      +image({ src: 'rocket3.png' })
      +caption Прошёл 45 минут
  +cols({mod:'noTransposeOnMobile'})
    +module
      +image({ src: 'Star1.png' })
      +caption Сделал 2000 шагов
    +module
      +image({ src: 'Star2.png' })
      +caption Сделал 10000 шагов
    +module
      +image({ src: 'Star3.png' })
      +caption Сделал 15000 шагов
  +cols({mod:'noTransposeOnMobile'})
    +module
      +image({ src: 'Medal1.png' })
      +caption Проходил 3 часа
    +module
      +image({ src: 'Medal2.png' })
      +caption Проходил 6 часов
    +module
      +image({ src: 'Medal3.png' })
      +caption Проходил 12 часов

+image({src: 'screen-geopotential.jpg'})

+image({src: 'tram.jpg', mod: 'bordered'})

Кейс

Картинки в две колонки

Нередко дизайнеры считают, что если им нужно поставить две картинки в колонки, то их нужно обернуть модулями:

+cols
  +module
    +image({src: 'picture_1.jpg'})
  +module
    +image({src: 'picture_2.jpg'})

Технически +image такой же модуль как и обычный. В очень многих простых ситуациях его не нужно ничем специально дополнять. Правильно сделать так:

+cols
  +image({src: 'picture_1.jpg'})
  +image({src: 'picture_2.jpg'})

А вот если вам нужно сделать две картинки с подписями, то без обёртки вам уже не обойтись:

+cols
  +module
    +image({src: '/projects/code-guide/files/picture_1.jpg'})
    +caption
  +module
    +image({src: '/projects/code-guide/files/picture_2.jpg'})
    +caption

Непревзойдённый оригинал

Жалкая подделка

Картинка в картинке

Так как технически +image это тоже модуль только с картинкой, можно в него встраивать другие модули. Например, расположить ещё одну картинку сверху в указанном месте:

+image({src: '/projects/code-guide/files/screen-geopotential.jpg'})
  +image({src: '/projects/code-guide/files/screen-geopotential-2.png', top:'9px', right:'7px', style:'width:200px'})

Повесить беджик:

+image({src: 'photo.jpg'})
  +image({src: 'label.png', bottom:'-6%', left:'-5%', style:'width:22%'})

+image({src: 'screen-geopotential.jpg'})
+caption Веб‑система Гисметео

Кейс

Одна ссылка у картинки и у подписи

Если у вас есть картинка, которая является ссылкой и у неё есть подпись, у которой та же ссылка, навесьте на них класс doubleHover, чтобы при наведении на картинку ссылка в подписи подсвечивалась:

+image({src: 'screen-geopotential.jpg', href:'/projects/gismeteo/', class:'doubleHover'})
+caption <a href="/projects/gismeteo/" class="doubleHover">Веб‑система Гисметео</a>

Веб‑система Гисметео

+browserScreenshot
  +image({src: 'screenshot.png'})

+iphoneScreenshot({src: 'screenshot_pencil-mobile.png'})

p Выстраивать конфликты в интервью интересно, потому что есть настоящий, живой герой со своими суждениями, мотивами, оценками. Раскрыть личность героя помогают три вида конфликта: внутренний, межличностный, внешний.

+liftOut Конфликт — это центр и движущая сила истории. На конфликте завязаны действия героев, к нему приковано внимание читателя.

p Допустим, наш герой — женщина по имени Анна. У неё своя компания, штат подчинённых, известность, репутация и хорошо налаженный прибыльный бизнес. Читатель заскучает, если это будет интервью о том, как Анна планомерно выстраивала бизнес, в каких таск‑менеджерах вела работу и как постепенно пришла к успеху. Зато, если построить интервью на конфликтах, появится драма.

p Выстраивать конфликты в интервью интересно, потому что есть настоящий, живой герой со своими суждениями, мотивами, оценками. Раскрыть личность героя помогают три вида конфликта: внутренний, межличностный, внешний.

+liftOut({mod:'L'}) Конфликт — это центр и движущая сила истории. На конфликте завязаны действия героев, к нему приковано внимание читателя.

p Допустим, наш герой — женщина по имени Анна. У неё своя компания, штат подчинённых, известность, репутация и хорошо налаженный прибыльный бизнес. Читатель заскучает, если это будет интервью о том, как Анна планомерно выстраивала бизнес, в каких таск‑менеджерах вела работу и как постепенно пришла к успеху. Зато, если построить интервью на конфликтах, появится драма.

+sidenote «Джипег» — картинка, нарисованная на скорую руку

p Абзац, напротив которого появится заметка. Дальше идёт рыбный текст. Типографы веками искали закономерности и связи между элементами набора.         

Кейс

Вынос справа от абзацев

+sidenote
  +liftOut
    p <i>Элемент дизайна</i> проходит через стадии:
    p <i>эскиз</i> — картинка, описывающая идею;
    p <i>макет</i> — конечный файл для типографии, <span class="smallcapitals">ХТМЛ</span>-код, чертёж для производства;
    p <i>реализация</i> — воплощение в жизнь продукта, разработка и запуск сайта, печать книжки, производство и монтаж вывески.

p Элемент дизайна — дизайн отдельного объекта, указанного в Задании, например: отдельной страницы сайта, экрана пользовательского интерфейса, рекламного банера, логотипа и элементов фирменного стиля, слайдов электронной презентации, бумажного буклета или флаера, указателя навигации в общественном месте, рекламной полосы в журнале.
p Эскиз элемента дизайна — упрощённое графическое изображение Элемента дизайна, демонстрирующее его идею, сценарий использования, проект визуального решения, текстового наполнения либо отличительные особенности внешней формы.
p Макет элемента дизайна — электронный файл в формате, предусмотренном Договором, содержащий точное описание внешнего вида элемента, пригодный для воспроизведения на целевом носителе с точностью и при условиях, предусмотренных Заданием. Примеры файлов макетов в зависимости от типа элемента: файлы гипертекста <span class="smallcapitals">HTML</span>, печатные файлы <span class="smallcapitals">EPS</span>, файлы изображений <span class="smallcapitals">PNG</span>, презентация <span class="smallcapitals">PPT</span> и любые другие форматы в соответствии с Заданием.
p Реализация элемента дизайна — программирование, обработка текстовых, графических и иных Информационных материалов, предоставляемых Клиентом или специально создаваемых Бюро, наполнение Информационными материалами, тестирование, печать в типографии, производство вывесок и указателей или другие работы, необходимые для подготовки к эксплуатации Элемента дизайна. В соответствии с Заданием Реализацию элемента дизайна выполняет Бюро, Клиент или третье лицо.

p Придумывать конфликт в инструкциях необязательно, это выбор автора. Можно и просто начать статью словами «Мы подготовили обзор новых способов наладить работу бухгалтерии». Статья потеряет в драме, но не в содержании. В то же время, если во введении есть конфликт, он создаёт для читателя дополнительную мотивацию прочитать статью и может вовлечь даже тех, кто изначально не собирался её читать.

+sidenote({mod: 'footnote'}) P. S. Это был воскресный совет об информационном стиле и редактуре текста. <a href="/bb/soviet/ask/">Присылайте вопросы</a>

p Я полагал, что хороший менеджер заранее просчитывает все возможные варианты. Чтобы на встрече, как только в воздухе запахнет возражениями, можно сразу предложить клиенту планы Б, В или Г, детально продуманные заранее. Я думал, что наличие запасных вариантов поможет заключить выгодную сделку. Я ошибался.

+rule План «Б» — это путь к провалу

p Давайте на примере. Клиент хочет фирстиль и сайт для своей компании по торговле украшениями. Вы начинаете составлять детальное коммерческое предложение — всё «под ключ» за пятьсот тысяч рублей. Это ваш план «А».

p Теперь синтаксис. В тексте есть подлежащие и сказуемые вроде «проблема», «незнание», «отсутствие». Вместо них должны появиться люди, которые будут совершать действия: 

+example Когда сотрудник только устраивается на работу, он может не знать принципов работы компании, в том числе в базовых организационно-бытовых вопросах. Когда коллеги знают такие вещи, а новый сотрудник нет, он чувствует себя беспомощным, а мотивация снижается.

p Просто прочитайте вслух и послушайте, насколько естественно звучит текст с «я» и без «я». Если ломается язык, сделайте так, чтобы не ломался. Дело может быть не только в «я», но и в других местоимениях и словах. 

+example
  p Пишу, сокращаю статьи, пресс-релизы, рекламу, промостраницы, тексты для «Инстаграма», в блоги, для изданий, курсовые, дипломные, свадьбы, юбилеи, похороны. Помогу за неделю.
  p Я работаю с текстами в разных жанрах: статьи, пресс-релизы, реклама и промостраницы, тексты для «Инстаграма» и блога. Ещё пишу курсовые и дипломные, свадебные тосты, речи для юбилеев и похорон. Обычно делаю текст за неделю.

+example
  +cols
    +module
      h3 Нельзя
      p Сайт о пользе вегетарианства для здоровья
      p Сервис подбора гомеопатического средства
      p Биохакинг
      p Как родить дома
    +module
      h3 Можно
      p Сайт рецептов вегетарианских блюд
      p Сайт о бесполезности гомеопатии
      p Лайфхаки
      p Послеродовая гимнастика (с консультантом-гинекологом)

+linkWithArrow({text: 'Все курсы бюро для компании', href: '/educenter/business/'})

+linkWithArrow({mod:'h2', text: 'Лекции', href: '/lectures/'})

+factoid({ number: '1 400' }) engineers split up into 24 teams

+factoid({ number: '1 400' }) engineers split up into 24 teams
+factoid({ mod: 'highlighted', number: '973' }) prototypes of new 1UZ-FE engine
+factoid({ mod: 'sans highlighted', number: '973' }) prototypes of new 1UZ-FE engine

+image({src: '/projects/code-guide/files/book-ui-mobile.png'})
h3 Самое полное и современное руководство по интерфейсу 

+price({amount: '1490', units: '₽'})

+linkWithArrow({text: 'Купить книгу', href: 'https://bureau.ru/projects/book-ui/'})

+code
  :escape
    p Абзац текста

p <span class="code">divisionPortion</span> — модификатор для одной колонки. Если нужно, чтобы одна колонка была шире остальных, то можно только ей и назначить нужную долю, а остальные подстроятся:

+code
  :escape
    +cols
      +module({divisionPortion: 3})
        h3 Этап
        p 1. Структура номера (cостав книжек, положение главных статей, основные рубрики, новые одностраничные рубрики, предварительный план рекламы)
      +module
        h3 Срок, раб. дней
        p 5 дней, 10—14 мар
      +module
        h3 Стоимость, ₽
        p 10 000
    +cols
      +module({divisionPortion: 3})
        p 2. Общее визуальное решение журнала
        p.margin-list Поиск стиля иллюстраций нового макета
        p.margin-list Согласование структуры номера
      p 5 дней, 17—21 мар
      p 20 000

p <span class="code">divisionPortion</span> — модификатор для одной колонки. Если нужно, чтобы одна колонка была шире остальных, то можно только ей и назначить нужную долю, а остальные подстроятся:

+code({mod: 'preWrap'})
  :escape
    +cols
      +module({divisionPortion: 3})
        h3 Этап
        p 1. Структура номера (cостав книжек, положение главных статей, основные рубрики, новые одностраничные рубрики, предварительный план рекламы)
      +module
        h3 Срок, раб. дней
        p 5 дней, 10—14 мар
      +module
        h3 Стоимость, ₽
        p 10 000
    +cols
      +module({divisionPortion: 3})
        p 2. Общее визуальное решение журнала
        p.margin-list Поиск стиля иллюстраций нового макета
        p.margin-list Согласование структуры номера
      p 5 дней, 17—21 мар
      p 20 000

p <span class="code">divisionPortion</span> — модификатор для одной колонки. Если нужно, чтобы одна колонка была шире остальных, то можно только ей и назначить нужную долю, а остальные подстроятся:

+code({mod: 'wide'})
  :escape
    +cols
      +module({divisionPortion: 3})
        h3 Этап
        p 1. Структура номера (cостав книжек, положение главных статей, основные рубрики, новые одностраничные рубрики, предварительный план рекламы)
      +module
        h3 Срок, раб. дней
        p 5 дней, 10—14 мар
      +module
        h3 Стоимость, ₽
        p 10 000
    +cols
      +module({divisionPortion: 3})
        p 2. Общее визуальное решение журнала
        p.margin-list Поиск стиля иллюстраций нового макета
        p.margin-list Согласование структуры номера
      p 5 дней, 17—21 мар
      p 20 000

+timer({till: '22 авг'})

+video({src: 'steve-vision.mp4', cover: 'steve-vision.jpg'})

+video({mod:'muted', src: 'steve-vision.mp4', cover: 'steve-vision.jpg'})

+video({mod:'autoplay muted', src: 'steve-vision.mp4', cover: 'steve-vision.jpg'})

+video({mod:'loop', src: 'steve-vision.mp4', cover: 'steve-vision.jpg'})

+video({mod:'noControls', src: 'steve-vision.mp4', cover: 'steve-vision.jpg'})

Кейс

Зацикленное видео

+video({mod:'autoplay loop noControls muted', src: 'steve-vision.mp4', cover: 'steve-vision.jpg'})

+video({mod:'playInView', src: 'steve-vision.mp4', cover: 'steve-vision.jpg'})

+youtubeVideo({src: 'https://www.youtube.com/watch?v=h_D3VFfhvs4'})

+vimeoVideo({src: 'https://vimeo.com/293288488'})

p Абзац текста.

h1 Заголовок первого уровня.

h1.m h1.m 36 пк
h1.l h1.l 43 пк 
h1.xl h1.xl 54 пк
h1.xxl h1.xxl 65 пк
h1.xxxl h1.xxxl 72 пк
h1.xxxxl h1.xxxl 85 пк

h2 Заголовок второго уровня.

h3 Заголовок третьего уровня.

p <h4>Выделение полужирным начертанием.</h4> Выделение полужирным начертанием используется для того, чтобы обозначить основную тему какого-либо фрагмента текста. По сути, это равносильно использованию еще одного заголовка.

+product({name: 'Деликат'})
  +productMenuItem({link: '/projects/delikat-cashier-guidelines/'}) Стандарты кассира
  +productMenuItem({link: '/projects/delikat-cashier-book/'}) Книга кассира
  +productMenuItem({link: '/projects/delikat-cashier-training'}) Обучение кассира
  +productMenuItem({link: '/projects/delikat-identity/'}) Логотип и фирстиль
  +productMenuItem({isActive: true, link: '/projects/delikat-merchandising/'}) Мерчендайзинг
  +productMenuItem({link: '/projects/delikat-mini-exterior/'}) Фасады

+product({name: 'Деликат', mod: 'small'})
  +productMenuItem({link: '/projects/delikat-cashier-guidelines/'}) Стандарты кассира
  +productMenuItem({link: '/projects/delikat-cashier-book/'}) Книга кассира
  +productMenuItem({link: '/projects/delikat-cashier-training'}) Обучение кассира
  +productMenuItem({link: '/projects/delikat-identity/'}) Логотип и фирстиль
  +productMenuItem({isActive: true, link: '/projects/delikat-merchandising/'}) Мерчендайзинг
  +productMenuItem({link: '/projects/delikat-mini-exterior/'}) Фасады

+product({name: 'Деликат'})
  +productMenuItem({link: '/projects/delikat-cashier-guidelines/'}) Стандарты кассира
  +productMenuItem({link: '/projects/delikat-cashier-book/'}) Книга кассира
  +productMenuItem({link: '/projects/delikat-cashier-training'}) Обучение кассира
  +productMenuItem({link: '/projects/delikat-identity/'}) Логотип и фирстиль
  +productMenuItem({isActive: true, link: '/projects/delikat-merchandising/'}) Мерчендайзинг
  +productMenuItem({link: '/projects/delikat-mini-exterior/'}) Фасады

h1 Онлайн-гейминг
p Ворлд Чесс организует и транслирует турниры по шахматам. В 2020 году компания запустила онлайн-гейминг с официальным рейтингом <span class=smallcapitals>ФИДЕ</span>. Теперь можно даже получить титул <nohyphen>онлайн-гроссмейстера</nohyphen>, не выходя из дома. В бюро спроектировали интерфейс игры и лобби.

+projectMeta({
  favicon: 'favicon-inv.png',
  href: 'https://arena.myfide.net/singlegames',
  linkText: 'worldchess.com/arena',
  publishDate: '18 июня 2020'
})

+thumbnail({fitsTo: '1', fitToProportion: '880:639', })
  +image({src: 'cover_full-width.jpg'})

+thumbnail({fitsTo: '7:8', fitToProportion: '767:639', }) 
  +image({src: 'cover_three-quarter.jpg'})

+thumbnail({fitsTo: '1:2', fitToProportion: '430:432', })
  +image({src: 'cover_half.jpg'})

mixin projectDescription
  p Ворлд Чесс организует и транслирует турниры по шахматам. В 2020 году компания запустила онлайн‑гейминг с официальным рейтингом ФИДЕ. Теперь можно даже получить титул онлайн-гроссмейстера, не выходя из дома. В бюро спроектировали интерфейс игры и лобби.

h1 Онлайн-гейминг

+projectDescription

+projectMeta({
  favicon: 'favicon-inv.png',
  href: 'https://arena.myfide.net/singlegames',
  linkText: 'worldchess.com/arena',
  publishDate: '18 июня 2020'
})

https://bureau.ru/projects/partials/edit/

include ../partials/index.pug

+module({mod:'animationBase'})
  +image({src: 'image.png'})

+module({mod:'animationBase'})
  +image({src: 'image.png', animation: {
    '0%': 'opacity:1',
    '100%': 'opacity:0', 
    fromPosition: '0', 
    tillPosition: '100',}})

+module({mod:'animationBase'})
  +image({src: 'image.png', animation: {
    '0%': 'opacity:1',
    '100%': 'opacity:0', 
    fromPosition: '-1000', 
    tillPosition: '-300',}})

+module({mod:'animationBase'})
  +image({src: 'image.png', animation: {
    '0%': 'opacity:1',
    '100%': 'opacity:0', 
    fromPosition: '50', 
    tillPosition: '300',}})

+module({mod:'animationBase'})
  +image({src: 'image.png', animation: {
    '0%': 'opacity:1',
    '100%': 'opacity:0', 
    fromPosition: '-500', 
    tillPosition: '0',}})

Объект начнёт анимироваться, когда верх родителя окажется на 500 пк ниже верха окна браузера, а закончит анимироваться, когда верх родителя достигнет верха окна браузера

+module({mod:'animationBase'})
  +image({src: 'image.png', animation: {
    '0%': 'opacity:1',
    '100%': 'opacity:0', 
    fromPosition: '0%', 
    tillPosition: '100%',}})

Объект начнёт анимироваться, когда верх родителя достигнет верха окна браузера, а закончит анимироваться, когда низ родителя достигнет верха окна браузера

+module({mod:'animationBase'})
  +image({src: '/projects/code-guide/files/image.png', animation: {
    '0%': 'opacity:1',
    '100%': 'opacity:0', 
    fromPosition: '-100%', 
    tillPosition: '50%',}})

Объект начнёт анимироваться, когда расстояние между верхом родителя и верхом окна браузера будет равным высоте родителя, а закончит анимироваться, когда середина высоты родителя достигнет верха окна браузера

+module({mod:'animationBase'})
  +image({src: '/projects/code-guide/files/image.png', animation: {
    '0%': 'opacity:1',
    '25%': 'opacity:0',
    '50%': 'opacity:1',
    '75%': 'opacity:0',
    '100%': 'opacity:1', 
    fromPosition: '-800', 
    tillPosition: '-200',}})

В соответветствии с кодом изображение два раза меняет свою прозрачность с 1 до 0 и обратно

+module({mod:'animationBase'})
  +image({src: 'image-red.png', animation: {
    '0%': 'opacity:1; filter: grayscale(1);',
    '25%': 'opacity:0; filter: grayscale(1);',
    '26%': 'opacity:0; filter: grayscale(0);',
    '50%': 'opacity:1; filter: grayscale(0);',
    '75%': 'opacity:0; filter: grayscale(0);',
    '76%': 'opacity:0; filter: grayscale(1);',
    '100%': 'opacity:1; filter: grayscale(1);',  
    fromPosition: '-800', 
    tillPosition: '-200',}})

В соответветствии с кодом изображение два раза меняет свою прозрачность и один раз меняет свой цвет

+module({ mod:'animationBase'})
  +module({
    animation: {
    '0%': 'transform: translateX(-100%);',
    '100%': 'transform: translateX(-1%) translateY(0%);',   
    fromPosition: '-1000',
    tillPosition: '-500', 
    }})
    h1 Появление              
  +module({
    animation: {
    '0%': 'transform: translateX(100%);',
    '100%': 'transform: translateX(19%) translateY(0%);',    
    fromPosition: '-900',
    tillPosition: '-500', 
    }})
    h1 заголовка

+module({mod:'animationBase', style:'overflow:hidden'})
  +module({style:'background: linear-gradient(to top, #00aae3, #044587)', mod: 'textWidth', fitToProportion:'1:1.25'})
    +image({src: 'cloud_3.png', top:'-100px', left:'0', style:'width:180%', animation: {
    '0%': 'transform: translateY(0);',
    '100%': 'transform: translateY(120vh);', 
    fromPosition: '-1000', 
    tillPosition: '1500',}})
    +image({src: 'balloon.png', top:'-100px', right:'33%', style:'width:33%', animation: {
    '0%': 'transform: translateY(0);',
    '100%': 'transform: translateY(200vh);', 
    fromPosition: '-1000', 
    tillPosition: '2200',}})
    +image({src: 'cloud_1.png', top:'300px', right:'-40%', style:'width:100%', animation: {
    '0%': 'transform: translateY(0);',
    '100%': 'transform: translateY(80vh);', 
    fromPosition: '-1000', 
    tillPosition: '2000',}})
    +image({src: 'cloud_4.png', top:'100px', right:'0', style:'width:120%', animation: {
    '0%': 'transform: translateY(0);',
    '100%': 'transform: translateY(20vh);', 
    fromPosition: '-1000', 
    tillPosition: '2000',}})

+module({mod:'animationBase'})
  +image({src: 'spectrum.png',  animation: {
  '0%': 'transform:rotate(0deg);',
  '100%': 'transform:rotate(360deg);', 
  fromPosition: '-1000', 
  tillPosition: '1000',}})

+module({mod:'animationBase'})
  +image({src: 'spectrum.png', animation: {
  '0%': 'transform: rotate(0deg) rotate3d(0,0,0,0deg);',
  '100%': 'transform: rotate(2000deg) rotate3d(3,2,1,1080deg);'
  fromPosition: '-1000', 
  tillPosition: '1000',}})