A simple and FUN design tool for customizing Discourse 👀

[pearsonified]

Quick backstory: I’m a design + development guy who is obsessed with typography, spacing, and the idea of adaptive design.

What’s adaptive design? It’s when you change a font or a font size, and then everything else in your design adjusts to accommodate the new settings.

If you’ve ever customized anything before (but especially WordPress Themes or Discourse), then you know that when you change a font or font size, a lot of things can start to look wonky.

That wonkiness is due to the fact that changing fonts or font sizes actually changes the proportionality of your entire design. So that leaves you with 2 options:

1. Go through your CSS and painstakingly adjust everything to accommodate your new settings, or…
2. Use a powerful design system that can make all these adjustments for you

I’ve spent the last 14 years building design systems that adapt to changes in fonts, font sizes, colors, etc.

And since I use (and love) Discourse so much, I built a tool to help people customize their own Discourse installs.

The tool is based on the principles of Golden Ratio Typography (GRT), and it’s called GRT for Discourse.

Golden Ratio Typography for Discourse Forums

What does GRT for Discourse do?

You can select some basic design variables—fonts (including Google Fonts), sizing, and layout colors—and then GRT for Discourse will give you the CSS you need to apply your design settings to your Discourse installation.

If you’ve selected a Google Font, GRT for Discourse will also provide you with instructions for how to add that to your environment.

Why use GRT for Discourse?

Properly customizing a Discourse environment is an involved task. In my experience, it takes a lot of work to nail down every CSS detail necessary to accommodate customizations; GRT for Discourse makes this tedious process trivial.

With Golden Ratio Typography, your forums will be more visually appealing and easier to read. And it’s nice to know you can use different fonts and colors to extend your branding to your Discourse install.

Perhaps best of all, GRT for Discourse distills hours of work into seconds. And this gives you the ability to test all sorts of font, font size, and color combinations in a rapid-fire manner.

With GRT for Discourse, you can test out different settings and nail down the perfect design for your Discourse forums.

How much does GRT for Discourse cost?

It’s FREE if you start a GRT Free Trial. I want people to use GRT for Discourse and experience the joy and satisfaction of easy, precise customization.

Also, if you start a GRT Free Trial, you’ll get access to the GRT Forums (which run on Discourse, naturally). You’ll be able to see GRT for Discourse in action over there, as I use 18px IBM Plex Sans (a Google Font) along with a custom color scheme.

One last thing…

I should have mentioned this above, but one cool thing about GRT for Discourse is the way the tool works. When you enter your design settings, GRT for Discourse returns a mock-up of your Discourse layout so you can see exactly what your forum pages will look like with your design settings.

↑ The GRT for Discourse design settings panel

This way, you can decide if you like what you see before doing the work to copy/paste the CSS into your Discourse installation.

Try out GRT for Discourse, it’s fun!

[Falco]

Wow, this is pretty cool!

Does this work by customizing the work described here?

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

This is pretty cool indeed. What is the cost after the trial?

[pearsonified]

GRT for Discourse overrides quite a few of the base CSS variables in Discourse, but it also includes many of its own variables as well.

It works with the core Discourse CSS wherever possible, and then it adds its own overrides where necessary.

There is not a 1:1 correspondence with everything, though, as the Discourse base makes some assumptions that are incompatible with various aspects of Golden Ratio Typography.

For example, GRT yields 6 usable font sizes (f1–f6), and those are deployed using GRT for Discourse variables (–grt-size-1, --grt-size-2, etc), NOT the base Discourse variables.

[pearsonified]

After the trial, a GRT Pro subscription is only $57 per year. This gives you access to every tool on the GRT Calculator website:

• GRT for Email, a daily-use product that’s my personal favorite
• GRT for Websites
• GRT for Discourse

These tools provide similar results in different mediums: Your sizing and spacing is all optimized based on Golden Ratio Typography, and then you also have the ability to use GRT text formatting styles in each medium.

Put even more simply, I want to be able to execute every aspect of Attention Design wherever I compose text, and the GRT Tools help me do that.