Halfmoon：内置深色模式的 Bootstrap 替代方案

我最近发布了 Halfmoon 的第一个生产版本，这是一个我过去几个月一直在构建的前端框架。这是一篇关于该框架是什么以及我为什么决定构建它的简短介绍性文章。

电梯演讲

Halfmoon 是一个前端框架，它有一些有趣的特性。

• 内置深色模式： 创建网站的深色模式版本是内置的，非常简单。
• 模块化组件： 对模块化组件（如表单、导航栏、侧边栏、下拉菜单、提示、快捷方式等）进行了大量考虑，这些组件可以在任何地方使用，以创建布局，即使是像仪表板这样的复杂布局。
• JavaScript 可选： Halfmoon 中的许多组件都是为在没有 JavaScript 的情况下工作而构建的。但是，该框架仍然附带一个强大的 JavaScript 库，无需额外的依赖项。
• 您需要的所有 CSS 类： 类名对于使用过 Bootstrap 的任何人来说应该都非常熟悉，因为 Bootstrap 就是灵感来源。
• 跨浏览器兼容性： Halfmoon 完全支持几乎所有浏览器，包括非常旧的浏览器，如 Internet Explorer 11。
• 易于自定义： Halfmoon 使用自定义 CSS 属性来处理颜色和布局等方面，使其非常易于根据自己的喜好进行自定义，即使没有 CSS 预处理器也是如此。

在许多方面，您可以将 Halfmoon 视为带有集成深色模式实现的 Bootstrap。它使用 Bootstrap 的许多组件，在许多情况下使用略微修改的标记。

好的，很棒，但为什么是这个框架呢？

每当引入新的框架时，不可避免地会出现同样的问题：你为什么真正构建这个？ 答案是我非常喜欢深色模式和主题。带有浅色和深色模式（以及切换开关）的工具是我最喜欢的，因为我认为能够随意更改主题可以使我不太可能长时间盯着它感到厌烦。我有时在昏暗的光线下阅读（为我的眼睛祈祷），而深色模式在这种情况下会更舒适。

无论如何，几个月前，我想为自己构建一个简单的工具，让我的仪表板项目的深色模式实现变得容易。经过一番研究，我得出结论，我只有两种可行选择：要么选择前端框架的基于 JavaScript 的组件库——比如 Vue 的 Vuetify——要么为 Bootstrap 付款购买优质的深色主题（我不喜欢免费主题的外观）。我不想使用组件库，因为我喜欢使用 Django 构建简单的服务器端渲染网站。那只是我的菜。因此，我构建了我需要的东西：一个免费的、美观的前端框架，与 Bootstrap 一致，但开箱即用地包含同样美观的浅色和深色主题。

未来计划

我只是想与您分享 Halfmoon，让您知道它存在并且可以免费使用，如果您碰巧正在寻找与 Bootstrap 相似的可扩展框架，该框架在实现中优先考虑深色模式。

而且，正如您可能想象的那样，我仍在开发 Halfmoon。事实上，我有很多增强功能的想法。

• 更多组件
• 更多自定义选项（使用 CSS 变量）
• 更多示例和模板
• 更好的工具
• 改进文档中的可访问性示例
• 有用组件的原生 JavaScript 实现，例如自定义多选（考虑 Select2，只是没有 jQuery）、数据表和表单验证器，以及其他内容。

简而言之，该计划是构建一个在构建复杂仪表板时非常有用的框架，但仍然非常适合构建任何网站。该框架的文档可以在 项目的网站 上找到。代码是完全开源的，并根据 MIT 许可。 您也可以在 GitHub 上关注该项目。 我很乐意您查看它、留下反馈、打开问题，甚至为它做出贡献。