Ein einfaches und unterhaltsames Design-Tool zum Anpassen von Discourse 👀

[pearsonified]

Kurzer Hintergrund: Ich bin ein Typ, der sich mit Design und Entwicklung beschäftigt und von Typografie, Abständen und der Idee des adaptiven Designs besessen ist.

Was ist adaptives Design? Es ist, wenn Sie eine Schriftart oder eine Schriftgröße ändern und dann passt sich alles andere in Ihrem Design an, um die neuen Einstellungen zu berücksichtigen.

Wenn Sie jemals etwas angepasst haben (aber besonders WordPress-Themes oder Discourse), wissen Sie, dass viele Dinge seltsam aussehen können, wenn Sie eine Schriftart oder Schriftgröße ändern.

Diese Seltsamkeit entsteht dadurch, dass das Ändern von Schriftarten oder Schriftgrößen tatsächlich die Proportionalität Ihres gesamten Designs verändert. Das lässt Ihnen also 2 Optionen:

1. Gehen Sie durch Ihr CSS und passen Sie alles mühsam an, um Ihre neuen Einstellungen zu berücksichtigen, oder…
2. Verwenden Sie ein leistungsstarkes Designsystem, das all diese Anpassungen für Sie vornehmen kann.

Ich habe die letzten 14 Jahre damit verbracht, Designsysteme zu entwickeln, die sich an Änderungen von Schriftarten, Schriftgrößen, Farben usw. anpassen.

Und da ich Discourse benutze (und liebe), habe ich ein Werkzeug entwickelt, das Menschen hilft, ihre eigenen Discourse-Installationen anzupassen.

Das Werkzeug basiert auf den Prinzipien der Golden-Ratio-Typografie (GRT) und heißt GRT for Discourse.

Golden Ratio Typography for Discourse Forums

Was macht GRT for Discourse?

Sie können einige grundlegende Designvariablen auswählen – Schriftarten (einschließlich Google Fonts), Größen und Layoutfarben – und dann gibt Ihnen GRT for Discourse das CSS, das Sie benötigen, um Ihre Designeinstellungen auf Ihre Discourse-Installation anzuwenden.

Wenn Sie eine Google-Schriftart ausgewählt haben, gibt Ihnen GRT for Discourse auch Anweisungen, wie Sie diese zu Ihrer Umgebung hinzufügen können.

Warum GRT for Discourse verwenden?

Die richtige Anpassung einer Discourse-Umgebung ist eine anspruchsvolle Aufgabe. Meiner Erfahrung nach ist viel Arbeit erforderlich, um jedes notwendige CSS-Detail zu perfektionieren, um Anpassungen zu ermöglichen; GRT for Discourse macht diesen mühsamen Prozess trivial.

Mit der Golden-Ratio-Typografie werden Ihre Foren optisch ansprechender und leichter zu lesen sein. Und es ist schön zu wissen, dass Sie verschiedene Schriftarten und Farben verwenden können, um Ihr Branding auf Ihre Discourse-Installation zu erweitern.

Vielleicht am besten von allem: GRT for Discourse destilliert Stunden Arbeit in Sekunden. Und das gibt Ihnen die Möglichkeit, alle Arten von Schriftarten-, Schriftgrößen- und Farbkombinationen in rasantem Tempo zu testen.

Mit GRT for Discourse können Sie verschiedene Einstellungen ausprobieren und das perfekte Design für Ihre Discourse-Foren finden.

Wie viel kostet GRT for Discourse?

Es ist KOSTENLOS, wenn Sie eine GRT kostenlose Testversion starten. Ich möchte, dass die Leute GRT for Discourse nutzen und die Freude und Zufriedenheit einer einfachen, präzisen Anpassung erleben.

Wenn Sie eine GRT kostenlose Testversion starten, erhalten Sie auch Zugang zu den GRT-Foren (die natürlich auf Discourse laufen). Sie können GRT for Discourse dort in Aktion sehen, da ich 18px IBM Plex Sans (eine Google-Schriftart) zusammen mit einem benutzerdefinierten Farbschema verwende.

Noch eine Sache…

Das hätte ich oben erwähnen sollen, aber eine coole Sache an GRT for Discourse ist die Funktionsweise des Werkzeugs. Wenn Sie Ihre Designeinstellungen eingeben, gibt GRT for Discourse ein Mock-up Ihres Discourse-Layouts zurück, sodass Sie genau sehen können, wie Ihre Forenseiten mit Ihren Designeinstellungen aussehen werden.

↑ Das GRT for Discourse-Einstellungsfenster

Auf diese Weise können Sie entscheiden, ob Ihnen gefällt, was Sie sehen, bevor Sie die Arbeit auf sich nehmen, das CSS in Ihre Discourse-Installation zu kopieren/einzufügen.

Probieren Sie GRT for Discourse aus, es macht Spaß!

[Falco]

Wow, das ist ziemlich cool!

Funktioniert das, indem die hier beschriebene Arbeit angepasst wird?

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)]

Das ist in der Tat ziemlich cool. Was kostet es nach dem Testzeitraum?

[pearsonified]

GRT for Discourse überschreibt einige der Basis-CSS-Variablen in Discourse, enthält aber auch viele eigene Variablen.

Es funktioniert, wo immer möglich, mit dem Kern-CSS von Discourse und fügt dann dort, wo nötig, eigene Überschreibungen hinzu.

Es gibt jedoch keine 1:1-Entsprechung für alles, da die Discourse-Basis einige Annahmen trifft, die mit verschiedenen Aspekten der Goldenen Schnitt-Typografie unvereinbar sind.

Beispielsweise liefert GRT 6 nutzbare Schriftgrößen (f1–f6), und diese werden mithilfe von GRT for Discourse-Variablen (–grt-size-1, --grt-size-2 usw.) bereitgestellt, NICHT mit den Basis-Discourse-Variablen.

[pearsonified]

Nach dem Testzeitraum kostet ein GRT Pro-Abonnement nur 57 US-Dollar pro Jahr. Dies gibt Ihnen Zugriff auf jedes Werkzeug auf der GRT Calculator-Website:

• GRT für E-Mail, ein tägliches Produkt, das mein persönlicher Favorit ist
• GRT für Websites
• GRT für Discourse

Diese Werkzeuge liefern ähnliche Ergebnisse in verschiedenen Medien: Ihre Größen- und Abstandsangaben werden alle auf der Grundlage der Goldenen Schnitt-Typografie optimiert, und Sie haben dann die Möglichkeit, GRT-Textformatierungsstile in jedem Medium zu verwenden.

Einfacher ausgedrückt: Ich möchte jeden Aspekt von Attention Design ausführen können, wo immer ich Text verfasse, und die GRT-Werkzeuge helfen mir dabei.