Uma ferramenta de design simples e DIVERTIDA para personalizar Discourse 👀

Breve histórico: Sou um cara de design + desenvolvimento obcecado por tipografia, espaçamento e a ideia de design adaptativo.

O que é design adaptativo? É quando você muda uma fonte ou um tamanho de fonte, e então todo o resto do seu design se ajusta para acomodar as novas configurações.

Se você já personalizou algo antes (mas especialmente Temas WordPress ou Discourse), então você sabe que, ao mudar uma fonte ou tamanho de fonte, muitas coisas podem começar a parecer estranhas.

Essa estranheza se deve ao fato de que mudar fontes ou tamanhos de fonte realmente altera a proporcionalidade de todo o seu design. Isso deixa você com 2 opções:

  1. Percorrer seu CSS e ajustar meticulosamente tudo para acomodar suas novas configurações, ou…
  2. Usar um poderoso sistema de design que pode fazer todos esses ajustes para você.

Passei os últimos 14 anos construindo sistemas de design que se adaptam a mudanças em fontes, tamanhos de fonte, cores, etc.

E como uso (e amo) o Discourse tanto, construí uma ferramenta para ajudar as pessoas a personalizar suas próprias instalações do Discourse.

A ferramenta é baseada nos princípios da Tipografia de Proporção Áurea (GRT - Golden Ratio Typography), e é chamada GRT for Discourse.

O que o GRT for Discourse faz?

Você pode selecionar algumas variáveis básicas de design — fontes (incluindo Google Fonts), dimensionamento e cores de layout — e então o GRT for Discourse fornecerá o CSS necessário para aplicar suas configurações de design à sua instalação do Discourse.

Se você selecionou uma Google Font, o GRT for Discourse também fornecerá instruções sobre como adicioná-la ao seu ambiente.

Por que usar o GRT for Discourse?

Personalizar adequadamente um ambiente Discourse é uma tarefa complexa. Na minha experiência, leva muito trabalho para acertar cada detalhe de CSS necessário para acomodar personalizações; o GRT for Discourse torna esse processo tedioso trivial.

Com a Tipografia de Proporção Áurea, seus fóruns serão mais visualmente atraentes e fáceis de ler. E é bom saber que você pode usar fontes e cores diferentes para estender sua marca à sua instalação do Discourse.

Talvez o melhor de tudo, o GRT for Discourse destila horas de trabalho em segundos. E isso lhe dá a capacidade de testar todos os tipos de combinações de fontes, tamanhos de fonte e cores de forma rápida.

Com o GRT for Discourse, você pode testar diferentes configurações e acertar o design perfeito para seus fóruns Discourse.

Quanto custa o GRT for Discourse?

É GRÁTIS se você iniciar um Teste Gratuito do GRT. Quero que as pessoas usem o GRT for Discourse e experimentem a alegria e a satisfação de uma personalização fácil e precisa.

Além disso, se você iniciar um Teste Gratuito do GRT, terá acesso aos Fóruns GRT (que rodam no Discourse, naturalmente). Você poderá ver o GRT for Discourse em ação lá, pois uso IBM Plex Sans de 18px (uma Google Font) junto com um esquema de cores personalizado.

Só mais uma coisa…

Eu deveria ter mencionado isso acima, mas uma coisa legal sobre o GRT for Discourse é a maneira como a ferramenta funciona. Quando você insere suas configurações de design, o GRT for Discourse retorna um mock-up do seu layout do Discourse para que você possa ver exatamente como suas páginas de fórum ficarão com suas configurações de design.


↑ O painel de configurações de design do GRT for Discourse

Dessa forma, você pode decidir se gosta do que vê antes de fazer o trabalho de copiar/colar o CSS em sua instalação do Discourse.

Experimente o GRT for Discourse, é divertido!

7 curtidas

Uau, isso é muito legal!

Isso funciona personalizando o trabalho descrito aqui?

3 curtidas

Isso é muito legal mesmo. Qual o custo após o período de teste?

GRT for Discourse substitui várias das variáveis CSS base do Discourse, mas também inclui muitas de suas próprias variáveis.

Ele funciona com o CSS principal do Discourse sempre que possível e, em seguida, adiciona suas próprias substituições onde necessário.

No entanto, não há uma correspondência de 1:1 com tudo, pois a base do Discourse faz algumas suposições que são incompatíveis com vários aspectos da Tipografia de Razão Áurea.

Por exemplo, GRT produz 6 tamanhos de fonte utilizáveis (f1–f6), e estes são implantados usando variáveis GRT for Discourse (–grt-size-1, --grt-size-2, etc.), NÃO as variáveis base do Discourse.

3 curtidas

Após o período de teste, uma assinatura GRT Pro custa apenas US$ 57 por ano. Isso lhe dá acesso a todas as ferramentas no site GRT Calculator:

  • GRT para Email, um produto de uso diário que é meu favorito pessoal
  • GRT para Websites
  • GRT para Discourse

Essas ferramentas fornecem resultados semelhantes em diferentes mídias: seu dimensionamento e espaçamento são otimizados com base na Tipografia da Proporção Áurea, e você também tem a capacidade de usar estilos de formatação de texto GRT em cada mídia.

De forma ainda mais simples, quero poder executar todos os aspectos do Attention Design onde quer que eu componha texto, e as Ferramentas GRT me ajudam a fazer isso.

3 curtidas

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.