Una herramienta de diseño sencilla y DIVERTIDA para personalizar Discourse 👀

Breve historia: Soy un tipo de diseño y desarrollo obsesionado con la tipografía, el espaciado y la idea del diseño adaptable.

¿Qué es el diseño adaptable? Es cuando cambias una fuente o un tamaño de fuente, y luego todo lo demás en tu diseño se ajusta para acomodar la nueva configuración.

Si alguna vez has personalizado algo antes (pero especialmente temas de WordPress o Discourse), sabrás que cuando cambias una fuente o un tamaño de fuente, muchas cosas pueden empezar a verse mal.

Esa rareza se debe al hecho de que cambiar fuentes o tamaños de fuente en realidad cambia la proporcionalidad de todo tu diseño. Así que te quedan 2 opciones:

  1. Recorrer tu CSS y ajustar minuciosamente todo para acomodar tu nueva configuración, o…
  2. Usar un potente sistema de diseño que pueda hacer todos estos ajustes por ti.

He pasado los últimos 14 años construyendo sistemas de diseño que se adaptan a cambios en fuentes, tamaños de fuente, colores, etc.

Y como uso (y me encanta) Discourse, construí una herramienta para ayudar a las personas a personalizar sus propias instalaciones de Discourse.

La herramienta se basa en los principios de la Tipografía de Proporción Áurea (GRT, por sus siglas en inglés), y se llama GRT para Discourse.

¿Qué hace GRT para Discourse?

Puedes seleccionar algunas variables de diseño básicas: fuentes (incluidas Google Fonts), tamaño y colores de diseño, y luego GRT para Discourse te proporcionará el CSS que necesitas para aplicar la configuración de tu diseño a tu instalación de Discourse.

Si has seleccionado una fuente de Google, GRT para Discourse también te proporcionará instrucciones sobre cómo añadirla a tu entorno.

¿Por qué usar GRT para Discourse?

Personalizar correctamente un entorno de Discourse es una tarea compleja. En mi experiencia, lleva mucho trabajo afinar cada detalle de CSS necesario para acomodar las personalizaciones; GRT para Discourse hace que este tedioso proceso sea trivial.

Con la Tipografía de Proporción Áurea, tus foros serán más atractivos visualmente y más fáciles de leer. Y es bueno saber que puedes usar diferentes fuentes y colores para extender tu marca a tu instalación de Discourse.

Quizás lo mejor de todo es que GRT para Discourse destila horas de trabajo en segundos. Y esto te da la capacidad de probar todo tipo de combinaciones de fuentes, tamaños de fuente y colores de manera rápida.

Con GRT para Discourse, puedes probar diferentes configuraciones y lograr el diseño perfecto para tus foros de Discourse.

¿Cuánto cuesta GRT para Discourse?

Es GRATIS si inicias una Prueba Gratuita de GRT. Quiero que la gente use GRT para Discourse y experimente la alegría y la satisfacción de una personalización fácil y precisa.

Además, si inicias una Prueba Gratuita de GRT, obtendrás acceso a los Foros de GRT (que, naturalmente, se ejecutan en Discourse). Podrás ver GRT para Discourse en acción allí, ya que uso IBM Plex Sans de 18px (una fuente de Google) junto con un esquema de color personalizado.

Una última cosa…

Debería haberlo mencionado antes, pero algo genial de GRT para Discourse es la forma en que funciona la herramienta. Cuando introduces la configuración de tu diseño, GRT para Discourse devuelve una maqueta de tu diseño de Discourse para que puedas ver exactamente cómo se verán las páginas de tu foro con la configuración de tu diseño.


↑ El panel de configuración de diseño de GRT para Discourse

De esta manera, puedes decidir si te gusta lo que ves antes de hacer el trabajo de copiar/pegar el CSS en tu instalación de Discourse.

Prueba GRT para Discourse, ¡es divertido!

7 Me gusta

¡Guau, esto es genial!

¿Funciona personalizando el trabajo descrito aquí?

3 Me gusta

Esto es realmente genial. ¿Cuál es el costo después de la prueba?

GRT para Discourse anula bastantes de las variables CSS base en Discourse, pero también incluye muchas variables propias.

Funciona con el CSS principal de Discourse siempre que es posible y, a continuación, añade sus propias anulaciones cuando es necesario.

Sin embargo, no hay una correspondencia uno a uno con todo, ya que la base de Discourse hace algunas suposiciones que son incompatibles con varios aspectos de la Tipografía de Proporción Áurea.

Por ejemplo, GRT produce 6 tamaños de fuente utilizables (f1–f6), y estos se implementan utilizando variables de GRT para Discourse (–grt-size-1, --grt-size-2, etc.), NO las variables base de Discourse.

3 Me gusta

Después de la prueba, una suscripción a GRT Pro cuesta solo $57 al año. Esto te da acceso a todas las herramientas del sitio web de GRT Calculator:

  • GRT para Email, un producto de uso diario que es mi favorito personal
  • GRT para Sitios Web
  • GRT para Discourse

Estas herramientas proporcionan resultados similares en diferentes medios: tu tamaño y espaciado se optimizan según la Tipografía de Proporción Áurea, y luego también tienes la capacidad de usar estilos de formato de texto GRT en cada medio.

En términos aún más simples, quiero poder ejecutar cada aspecto del Diseño de Atención dondequiera que componga texto, y las Herramientas GRT me ayudan a hacerlo.

3 Me gusta

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