大约八个月前，我开始构建一个框架，最终发展成为 Halfmoon。 我在这个网站上发布了一篇 文章，宣布了第一个版本的发布。 Halfmoon 被称为 Bootstrap 的替代方案，内置了暗黑模式功能，在构建仪表盘和工具方面尤其出色。 所有这些仍然适用于该框架。
但是，今天我想谈谈框架中一个有点被低估的领域。 我认为，我们整个行业严重低估了自定义和用户个性化的价值，即用户能够设置自己的设计偏好。 Chris 之前写过关于 了解设计系统是为谁而设计的，指出了根据谁是系统要帮助的对象而产生的灵活性范围。
但这不仅仅是设计系统。 让我们谈谈 Halfmoon 如何解决这些问题，因为它们对于了解哪个框架最适合您的特定需求至关重要。
Halfmoon 适合谁？
在深入探讨之前，让我们先解决一个重要的问题：Halfmoon 是否适合您？以下列出了一些问题来帮助您回答这个问题
- 您是否正在构建仪表盘、工具甚至文档网站？Halfmoon 具有许多针对这些用例的独特组件和功能。
- 您是否熟悉 Bootstrap 的类名，但希望设计看起来更高级一些？
- 您的用户是否希望或期望您的网站具有暗黑模式？
- 您是否不喜欢依赖项？Halfmoon 不使用 jQuery，也没有涉及 CSS 预处理器的构建过程。一切都是纯净的原生 CSS 和 JavaScript。
- 您是否厌倦了处理复杂的构建系统和前端工具？这与前一点相关。就我个人而言，我发现很难处理前端工具和构建过程。如上所述，Halfmoon 没有构建过程，因此您只需引入文件（本地、CDN 或 npm），然后开始构建。
如果您对上述任何（或所有）问题回答“是”，那么您可能应该尝试一下 Halfmoon。但是，需要注意的是，Halfmoon 不是 React/Vue/Angular 的 UI 组件库，因此您不应该期望它能做到这一点。此外，如果您更喜欢纯粹的实用程序驱动开发，那么 Tailwind CSS 是更好的选择。在 CSS 实用程序方面，Halfmoon 采取了一种折衷的方法——既有实用程序，又有用于常见组件的语义类。
使用 CSS 自定义属性
首先，让我们把简单的事情处理掉。CSS 自定义属性 非常棒，我预计它们将来会完全取代预处理器变量。浏览器支持已经达到稳定的 ~96%，并且随着微软逐步淘汰 Internet Explorer，它们有望成为标准功能。
Halfmoon 完全使用 CSS 变量构建，因为它们提供了高度的自定义程度。现在，您可能会立即认为，这意味着那里有一些用于颜色的自定义属性，但实际上不止于此。事实上，Halfmoon 中有超过1,500个全局变量。几乎所有内容都可以通过覆盖属性来自定义。以下是从文档中提供的一个巧妙示例
这就是我们在这里谈论的自定义方面：如果使用该系统的人覆盖任何内容，该系统是否仍然能够正常工作？我已经在 Halfmoon 官方文档页面 中广泛地讨论了这一点（以及更多内容）。
变量对于框架来说不是一个新概念。许多框架实际上使用了 Sass 或 Less 变量，并且已经使用了一段时间。这仍然是建立可自定义体验的一种良好且有效的方法。但同时，它们也会锁定到一个预处理器（这同样不一定是坏事）。通过改为依赖 CSS 自定义属性——以及将所有内容都变成变量——我们依赖的是原生 CSS，这不需要任何类型的构建依赖项。因此，自定义属性不仅可以使自定义框架变得更容易，而且在所使用的技术栈方面也更加灵活。
需要权衡利弊。我知道我建议为所有内容创建变量，但管理和维护大量变量也同样困难（就像代码库中的任何其他内容一样）。因此，要大量使用变量来使框架或设计系统更灵活，但也要注意您需要提供多少灵活性，以及添加另一个变量是否属于该范围。
决定要包含哪些组件
在构建 CSS 框架时，决定要包含哪些组件是这项工作的重要组成部分。当然，对于从事个人项目的开发人员来说，他们希望包含所有内容。但这根本不可行，因此我做了一些决定。
截至目前，Halfmoon 拥有您在类似框架（如 Bootstrap 或 Bulma）中可以找到的大多数组件。这些框架很棒且被广泛使用，因此它们是一个很好的参考框架。但是，正如我之前提到的，Halfmoon 的一个独特之处在于它专注于在 Web 上构建工具和仪表盘。这个利基市场（如果您可以这样称呼它的话）促使我构建了一些独特的组件和功能
- 5 种不同类型的侧边栏，内置切换和覆盖处理程序。侧边栏对于大多数仪表盘和工具都非常重要（并且很难正确实现），因此这是一个不言而喻的选择。
- 2 种不同类型的导航栏。其中一个粘贴在页面底部，可以有效地用作操作按钮。想想在数据表上选择项目时弹出的操作。您可以将这些操作按钮放在这里。
- 全方位下拉菜单（有 12 种不同的放置方式，每个方向 3 种）。
- 漂亮的表单组件。
- 内置键盘快捷键系统，并提供一种简单的方法来为您的工具声明新的快捷键。
- 大量的实用程序。当然，这无法与 Tailwind CSS 相提并论，但 Halfmoon 拥有足够的响应式实用程序类，可以开箱即用地处理许多用例。
此外，内置的暗黑模式、巨大的可定制性和组件的标准外观和感觉，都应该共同使 Halfmoon 成为构建 Web 工具和仪表盘的强大工具。并且我希望我离完成还很远！接下来的更新将引入表单验证器（演示视频）、更多表单组件、多选组件、日期和时间选择器、数据表组件等。
那么 Halfmoon 到底缺少什么呢？最明显的包括选项卡、列表组和加载指示器。但所有这些都计划在v1.2.0（下一个更新）中添加。还有一些其他缺少的组件，如轮播、树形导航、头像等，这些组件略超出范围。
提供用户偏好设置
框架通常会忽略让最终用户能够设置其偏好的功能。例如设置文章的字体大小，或是否使用暗黑或亮色主题。从某种意义上说，这有点可笑，因为 Web 正在赶上操作系统几十年来允许用户执行的操作。
以下是一些 Web 上用户个性化的示例
- 能够选择您首选的颜色模式。而且，更棒的是，网站会在页面加载时自动保存和尊重您的偏好。或者更好的是，查看您的操作系统偏好设置并自动适应它们。
- 设置元素的默认大小。特别是字体大小。小字体在设计中可能看起来不错，但允许用户设置其理想的字体大小可以使内容真正易于阅读。从技术上讲，每个现代浏览器都具有放大内容的选项，但这通常很笨拙，并且实际上不会保存您的设置。
- 设置元素的紧凑性。例如，有些人喜欢带有圆角的大填充，而另一些人则认为这是浪费空间，而是更喜欢更紧凑的 UI。有点像 Gmail 允许您决定是否希望在收件箱中留出大量空间，或者使其尽可能小巧紧凑以查看更多内容。
- 设置网站的主要颜色。虽然这完全是装饰性的，但能够在网站上的每个按钮和链接上设置您喜欢的颜色仍然很有魅力。
- 启用高对比度模式。有人在 GitHub 上向我指出了这一点。显然，许多（我的意思是 *很多*）CSS 框架经常无法满足 推荐的常见元素（如按钮）的前景和背景颜色之间的最小对比度。该列表包括 Halfmoon。这通常是一种权衡，因为对比度过高的元素通常看起来更糟糕（纯粹从美学角度来看）。如果您难以区分默认对比度，则用户个性化设置可以让您打开高对比度模式。
允许用户个性化设置可能非常难以实现——尤其是对于框架而言——因为这可能意味着需要更换 CSS 的大量部分来适应不同的个性化设置和组合。但是，对于像 Halfmoon 这样的框架（即完全使用 CSS 变量构建），这变得微不足道，因为CSS 变量可以使用 JavaScript 在运行时设置和更改，如下所示
// Get the <html> tag (for reading and setting variables in global scope)
var myElement = document.documentElement;
// Read CSS variable
getComputedStyle(myElement).getPropertyValue("--variable-name");
// Set CSS variable
myElement.style.setProperty("--variable-name", "value");因此，可以使用 Halfmoon 以以下方式实现用户个性化设置
- 用户设置首选项。这基本上意味着变量值会发生变化。变量使用 JavaScript 设置（如上所示），新值存储在 cookie 或本地存储中。
- 当用户返回网站时，他们的首选项会在页面加载后使用 JavaScript（再次，如上所示）检索并设置。
以下是一些直观的示例，以便真正强调这一点。
设置和保存默认字体大小
在上面的示例中，每当范围滑块发生变化时，变量 --base-font-size 都会更新为滑块的值。这对于喜欢更大文本的人来说非常有用。如上一节所述，此新值可以保存在 cookie 或本地存储中，并且下次用户访问网站时，可以在页面加载时设置用户首选项。
设置内容的紧凑性
在此示例中，仅更新了两个变量以从扩展视图切换到紧凑视图
--content-and-card-spacing从3rem (30px)更改为2rem (20px)。--card-border-radius从0.4rem (4px)更改为0.2rem (2px)。
对于现实场景，您可以使用一个下拉菜单询问用户是否希望他们的内容为默认或紧凑，选择其中一个将显而易见地设置上述 CSS 变量以设置网站的主题。再次强调，这可以保存并在用户在下次会话中访问网站时在页面加载时设置。
等等，为什么呢？
即使我到目前为止已经展示了所有示例，您可能仍然会问这实际上为什么有必要。答案非常简单：一刀切行不通。据我估计，大约一半的人口更喜欢深色 UI，而另一半更喜欢浅色。同样，人们在设计方面喜欢的东西也存在很大的差异。用户个性化是改进 UX 的一种形式，因为它允许用户选择他们喜欢的。这在登陆页面上可能不太重要，但在涉及工具或仪表盘（用户必须长时间使用才能完成某些操作）时，拥有一个可以个性化的 UI 有助于提高生产力。了解 Halfmoon 的设计初衷就是为了实现这一点，这使其成为此类用例的理想选择。
此外，您知道人们经常抱怨使用某个框架（例如 Bootstrap）构建的网站看起来都一样吗？这是朝着确保使用 Halfmoon 构建的网站始终看起来不同的方向迈出的一步，以便重点关注网站和内容本身，而不是用于构建它的框架。
再说一遍，我并不是说应该允许个性化所有内容。但了解框架的目标用户和设计初衷有助于明确哪些内容应该个性化。
展望未来
我强烈认为，自定义的灵活性以及对用户偏好的考虑在网络上经常被忽视，尤其是在框架领域。这就是我尝试使用 Halfmoon 要解决的问题。
将来，我希望使开发人员更容易实现用户首选项，并通过新的模板和主题来促进设计的多样性。也就是说，以下是一些 Halfmoon 的未来计划
- 表单验证器（演示视频）
- 新的组件，包括范围滑块、选项卡和加载动画
- 高对比度模式用户首选项
- 多选组件（类似于 Select2，但无需 jQuery）
- 日期和时间选择器
- 数据表组件
- 基于 GUI 的表单构建器
- 更多主题和模板
当然，您可以在 文档网站 中了解有关 Halfmoon 的更多信息，如果您想关注该项目，可以 在 GitHub 上为其加星标。
嗨！我看到了您之前发布的关于 Halfmoon 1 的帖子，我从中获得了很大的启发……
我也做了一个 CSS 库[不完全是一个框架]。
它更面向快速原型设计人员和初学者，因此学习曲线不会很大……
您可以在此处查看其运行情况
https://nikhilmwarrier.github.io/fluidcss
听到这个消息真是太好了，谢谢。您的库看起来不错。
很棒的努力！但我只是快速检查了
.btn类，它没有使用任何 css 变量。对于所有修饰符，它们只是简单地覆盖了，这不是好的做法！谢谢！您能详细说明您所说的不使用变量是什么意思吗？
.btn类在halfmoon-variables.css文件中使用了按钮变量：https://github.com/halfmoonui/halfmoon/blob/master/css/halfmoon-variables.css你好！
喜欢它自带的深色模式切换，但您能否将
@media (prefers-color-scheme: light)以某种方式与这个库结合使用？
所以按钮在那里，但也利用了用户偏好？
只是好奇是否有简单的答案！
谢谢，是的，这已经支持了。请阅读文档中的此部分：https://www.gethalfmoon.com/docs/page-building/#set-the-preferred-mode-onload。将
data-set-preferred-theme-onload属性添加到 DOM 的 body 将确保自动设置用户的首选模式，当然，这使用了prefers-color-scheme。这个项目真的很鼓舞人心。我开始实现您在这里谈到的许多功能，因为几乎所有 css 框架（以及，正如您指出的那样，依赖项的依赖项，其中大多数是不必要的）都普遍缺乏可访问性。所以为此表示敬意，我尽快就会尝试一下。
我认为 CSS 框架可以在鼓励可访问性方面发挥作用（这本身也与可用性相关）。我现在正在学习可访问性实践（我自己也有残疾），一旦你开始深入研究，就会有一些具有挑战性的问题需要解决，但朝着这个方向迈出的每一步都更接近于一个真正可访问和通用的网络。
感谢您的工作，并祝您一切顺利 :)
我真的很感谢您的评论。在可访问性方面，Halfmoon 还有很长的路要走，并且仍然存在一些问题。希望这些问题很快就能得到解决，我们能够实现我们的目标。谢谢。
你好！
我看到了您之前发布的关于 Halfmoon 的帖子，并且是 GitHub 上最早为其加星标的人之一！！:-)
在我在 CodeIgniter（一个 PHP 框架）论坛上提到 Halfmoon 之后，该项目的作者采用了它！
https://demo.simpleadmin.io
https://forum.codeigniter.com/thread-78055-post-382172.html
期待您出色的工作并宣传 Halfmoon！！
非常感谢您宣传！您发布的项目看起来也非常有用，所以我很高兴人们正在使用 Halfmoon。
非常有趣。感谢您的信息！
嗨，我刚刚发现了这个框架——叫我迟到也没关系，但我喜欢它！
一个主要问题是我无法打印半月网站。这似乎是所有半月网站的通病，甚至包括他们的主页 https://www.gethalfmoon.com。
有解决方法吗？
看起来很棒！
等待1.2 ;)
Tahmid的工作非常出色。
谢谢