Школа
Веб-разработка

Расскажите, как автор советов работает с маргиналиями?

Если верстать руками через float, получается, что на узком экране с линейным отображением сноска будет до абзаца, к которому относится. Неправильно как‑то. Судя по коду, советы бюро дублируют текст и до, и после абзаца как раз на этот случай, а показывают только что‑то одно в зависимости от размера экрана. Как это выглядит для автора советов?

Антон Ефремов
2 июля 2020
👁 6449  
Веб-разработка

Расскажите, как автор советов работает с маргиналиями?

Если верстать руками через float, получается, что на узком экране с линейным отображением сноска будет до абзаца, к которому относится. Неправильно как‑то. Судя по коду, советы бюро дублируют текст и до, и после абзаца как раз на этот случай, а показывают только что‑то одно в зависимости от размера экрана. Как это выглядит для автора советов?

Антон Ефремов
2 июля 2020
👁 6449  
Юрий Мазурский
Разработчик и дизайнер
Полезно
 12
12
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

Антон!

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

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

Например, дизайнеры сами верстают карточки проектов, вёдра и многое другое. Какие‑то вещи сверстать или запрограммировать легче, какие‑то сложнее, но итоговая цель — максимально облегчить вёрстку и автоматизировать всё, что можно автоматизировать.

Маргиналии полностью автоматизированы. Автору нужно просто поставить модуль +sidenote перед абзацем, справа от которого должна появиться маргиналия. Внутри +sidenote может быть всё что угодно.

Препроцессор высчитает отступы для position: absolute, чтобы модуль встал в нужное место, и скомпилирует весь код страницы из Пага в ХТМЛ. Затем постпроцессор ХТМЛ скопирует код маргиналии и поставит его после абзаца, чтобы показывать его в узком окне. Таким образом, в широком окне маргиналия покажется справа от абзаца, в узком — после.

Кусок исходного кода с маргиналией выше:

+sidenote: a(href="https://github.com/pugjs/pug") Паг на Гитхабе
p В «Советах» и на сайте бюро используется один и тот же текстовый движок. Можно, например, взять исходный код этого совета и вставить в любую статичную страницу. При этом ничего не сломается. Сам исходный код пишется с использованием шаблонизатора Паг.

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

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Полезно
 12
12
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментариев пока нет

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы