Простой и весёлый инструмент для настройки Discourse 👀

[pearsonified]

Краткая предыстория: Я занимаюсь дизайном и разработкой, одержим типографикой, отступами и идеей адаптивного дизайна.

Что такое адаптивный дизайн? Это когда вы меняете шрифт или размер шрифта, и при этом всё остальное в вашем дизайне подстраивается под новые настройки.

Если вы когда-либо настраивали что-либо (особенно темы WordPress или Discourse), то знаете, что при смене шрифта или его размера многие элементы могут начать выглядеть некорректно.

Такая некорректность возникает потому, что изменение шрифтов или их размеров фактически меняет пропорциональность всего дизайна. Поэтому у вас остаётся два варианта:

1. Пройтись по вашему CSS и с трудом вручную подстроить всё под новые настройки, или…
2. Использовать мощную систему дизайна, которая сделает все эти изменения за вас

Я уже 14 лет создаю системы дизайна, которые адаптируются к изменениям шрифтов, их размеров, цветов и т.д.

Поскольку я активно использую (и обожаю) Discourse, я создал инструмент, помогающий людям настраивать свои собственные установки Discourse.

Инструмент основан на принципах типографики золотого сечения (GRT) и называется GRT для Discourse.

Golden Ratio Typography for Discourse Forums

Что делает GRT для Discourse?

Вы можете выбрать несколько базовых переменных дизайна — шрифты (включая Google Fonts), размеры и цвета макета — после чего GRT для Discourse предоставит вам CSS-код, необходимый для применения этих настроек дизайна к вашей установке Discourse.

Если вы выбрали шрифт из Google Fonts, GRT для Discourse также предоставит инструкции по его добавлению в вашу среду.

Зачем использовать GRT для Discourse?

Правильная настройка среды Discourse — задача непростая. По моему опыту, требуется много усилий, чтобы довести до идеала каждый CSS-деталь, необходимую для корректной работы кастомизаций; GRT для Discourse делает этот утомительный процесс тривиальным.

Благодаря типографике золотого сечения ваши форумы станут более визуально привлекательными и удобными для чтения. К тому же приятно знать, что вы можете использовать различные шрифты и цвета для расширения вашего брендинга в установке Discourse.

Возможно, самое главное: GRT для Discourse превращает часы работы в секунды. Это даёт вам возможность быстро тестировать различные комбинации шрифтов, их размеров и цветов.

С помощью GRT для Discourse вы можете протестировать разные настройки и найти идеальный дизайн для ваших форумов на Discourse.

Сколько стоит GRT для Discourse?

Это БЕСПЛАТНО, если вы начнёте бесплатную пробную версию GRT. Я хочу, чтобы люди использовали GRT для Discourse и испытали радость и удовлетворение от простой и точной настройки.

Кроме того, начав пробную версию GRT, вы получите доступ к форумам GRT (которые, естественно, работают на Discourse). Там вы сможете увидеть GRT для Discourse в действии: я использую шрифт 18px IBM Plex Sans (шрифт Google) вместе с пользовательской цветовой схемой.

Ещё один момент…

Я должен был упомянуть это выше, но одна из крутых особенностей GRT для Discourse — это способ работы инструмента. Когда вы вводите свои настройки дизайна, GRT для Discourse возвращает макет вашего макета Discourse, чтобы вы могли точно увидеть, как будут выглядеть страницы вашего форума с выбранными настройками.

↑ Панель настроек дизайна GRT для Discourse

Таким образом, вы сможете решить, нравится ли вам увиденное, прежде чем приступать к копированию/вставке CSS в вашу установку Discourse.

Попробуйте GRT для Discourse — это весело!

[Falco]

Вау, это довольно круто!

Работает ли это за счет кастомизации описанной здесь работы?

Cleaning up our font system

New font system is live This new font-size and line-height system has been merged into Discourse. These variables exist in our variables.scss file, and if you’re contributing to core you should refer to these (font-awesome icons are an exception). If you’re nesting font-sizes, you can move up/down the scale using addition/subtraction. For example: If you have a parent div set to font-size: $font-up-6; and you set font-size: $font-down-2; within it, you’ll end up at font-size: $font-up-4 (so bas…

[Heliosurge (Dan DeMontmorency)]

Это действительно довольно круто. Сколько стоит подписка после окончания пробного периода?

[pearsonified]

GRT для Discourse переопределяет довольно много базовых CSS-переменных в Discourse, но также включает множество собственных переменных.

Она работает с базовыми CSS-стилями Discourse везде, где это возможно, и добавляет собственные переопределения там, где это необходимо.

Однако полного соответствия 1:1 нет, так как базовые стили Discourse делают некоторые допущения, несовместимые с различными аспектами Golden Ratio Typography.

Например, GRT предоставляет 6 удобных размеров шрифта (f1–f6), которые применяются с помощью переменных GRT для Discourse (–grt-size-1, --grt-size-2 и т. д.), а не базовых переменных Discourse.

[pearsonified]

После пробного периода подписка GRT Pro стоит всего 57 долларов в год. Это дает вам доступ ко всем инструментам на сайте GRT Calculator:

• GRT для электронной почты — продукт ежедневного использования, который является моим личным фаворитом
• GRT для веб-сайтов
• GRT для Discourse

Эти инструменты обеспечивают аналогичные результаты в разных средах: ваши размеры и отступы оптимизированы на основе типографики золотого сечения, а также у вас есть возможность использовать стили форматирования текста GRT в каждой из этих сред.

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