一个简单且有趣的设计工具,用于定制 Discourse 👀

简要背景: 我是一名设计与开发人员,痴迷于字体排印、间距和自适应设计理念。

什么是自适应设计?当您更改字体或字体大小时,所有其他内容都会随之调整以适应新设置。

如果您以前自定义过任何内容(尤其是 WordPress 主题或 Discourse),您就会知道,当您更改字体或字体大小时,许多内容可能会开始显得奇怪。

这种奇怪现象是由于更改字体或字体大小实际上会改变整个设计的比例。因此,您只有两种选择:

  1. 浏览您的 CSS,然后 painstaking 地调整所有内容以适应您的新设置,或者……
  2. 使用强大的设计系统,它可以为您完成所有这些调整。

在过去的 14 年里,我一直在构建能够适应字体、字体大小、颜色等变化的自适应设计系统。

由于我非常喜欢使用 Discourse,因此我构建了一个工具来帮助人们自定义自己的 Discourse 安装。

该工具基于黄金比例字体排印(GRT)原理,名为GRT for Discourse

GRT for Discourse 有什么作用?

您可以选择一些基本的设计变量——字体(包括 Google Fonts)、大小和布局颜色——然后 GRT for Discourse 将为您提供将设计设置应用于 Discourse 安装所需的 CSS。

如果您选择了 Google 字体,GRT for Discourse 还会提供有关如何将其添加到您的环境的说明。

为什么使用 GRT for Discourse?

正确自定义 Discourse 环境是一项复杂的工作。根据我的经验,需要大量工作才能掌握适应自定义设置所需的每一个 CSS 细节;GRT for Discourse 使这个繁琐的过程变得微不足道。

使用黄金比例字体排印,您的论坛将更具视觉吸引力,也更易于阅读。并且,您知道可以使用不同的字体和颜色将品牌延伸到您的 Discourse 安装中,这很好。

也许最重要的是,GRT for Discourse 将数小时的工作浓缩为几秒钟。这使您能够以闪电般的速度测试各种字体、字体大小和颜色组合。

使用 GRT for Discourse,您可以尝试不同的设置,并为您的 Discourse 论坛确定完美的设计。

GRT for Discourse 的价格是多少?

如果您开始GRT 免费试用https://grtcalculator.com/free-trial/),它是免费的。我希望人们使用 GRT for Discourse,并体验轻松、精确自定义带来的喜悦和满足感。

此外,如果您开始 GRT 免费试用,您还可以访问GRT 论坛(当然,它运行在 Discourse 上)。您可以在那里看到 GRT for Discourse 的实际应用,因为我使用了 18px 的 IBM Plex Sans(一种 Google 字体)以及自定义颜色方案。

最后一件事……

我应该在上面提到,但 GRT for Discourse 的一个很酷之处在于该工具的工作方式。当您输入设计设置时,GRT for Discourse 会返回您的 Discourse 布局的模拟图,以便您可以确切地看到使用您的设计设置的论坛页面将是什么样子。


↑ GRT for Discourse 设计设置面板

这样,您就可以在将 CSS 复制/粘贴到 Discourse 安装中之前决定是否喜欢看到的效果。

试试GRT for Discourse,很有趣!

7 个赞

太棒了,这真酷!

这是通过自定义此处描述的工作来实现的吗?

3 个赞

这确实很酷。试用期后的费用是多少?

GRT for Discourse 覆盖了 Discourse 的许多基础 CSS 变量,但它也包含许多自己的变量。

它尽可能地与核心 Discourse CSS 配合使用,然后在必要时添加自己的覆盖。

并非所有内容都一一对应,因为 Discourse 基础 CSS 做出了一些假设,这些假设与黄金比例排版的各个方面不兼容。

例如,GRT 产生 6 种可用的字体大小(f1–f6),这些大小使用 GRT for Discourse 变量(–grt-size-1、–grt-size-2 等)进行部署,而不是基础 Discourse 变量。

3 个赞

试用期结束后,GRT Pro 订阅每年仅需 57 美元。这将使您能够访问 GRT Calculator 网站上的所有工具:

  • GRT for Email,一款我个人最喜欢的日常使用产品
  • GRT for Websites
  • GRT for Discourse

这些工具在不同的媒介中提供类似的结果:您的尺寸和间距都基于黄金比例排版进行了优化,然后您还可以在每种媒介中使用 GRT 文本格式样式

更简单地说,我想在任何撰写文本的地方执行 Attention Design 的每一个方面,而 GRT 工具可以帮助我做到这一点。

3 个赞

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