制作CSS框架的注意事项

大约八个月前，我开始建立一个框架，最终会变成半月形。我在这个网站上发表了一篇文章，宣布推出第一个版本。Halfmoon被认为是一个具有内置暗模式功能的引导程序替代方案，在构建仪表板和工具时尤其有用。所有这些仍然适用于框架。n但是，今天我想谈谈框架中有点轻描淡写的一个方面。我认为我们整个行业严重低估了定制和用户个性化的价值，即用户能够设置自己的设计偏好。Chris以前写过关于知道设计系统是为谁设计的，指出了一系列的灵活性取决于一个系统应该帮助谁。让我们来谈谈半月谈如何解决这些问题，因为它们是了解哪个框架最适合您的具体需求的重要考虑因素？n在开始之前，让我们先来回答一个重要的问题：半月形适合你吗？下面的问题列表可以帮助您回答：n- 您是否正在构建仪表板、工具甚至文档网站？Halfmoon有许多独特的组件和特性，这些组件和特性是特定于这些用例的。n- 您熟悉Bootstrap的类名，但希望设计更高级一点吗？n- 您的用户希望或期望您的网站上出现暗模式吗？你不喜欢依赖关系吗？Halfmoon不使用jQuery，也没有涉及CSS预处理器的构建过程。一切都是纯粹的，普通的CSS和JavaScript。n- n- 你厌倦了处理复杂的构建系统和前端工具吗？这与前一点有关。就我个人而言，我发现很难处理前端工具和构建过程。如上所述，Halfmoon没有构建过程，所以您只需拉入文件（local、CDN或npm），然后开始构建。n如果您对这些问题中的任何一个（或所有）回答是肯定的，您可能应该尝试一下Halfmoon。但是需要注意的是，Halfmoon并不是React/Vue/Angular的UI组件库，因此您不应该期望这样做。此外，如果您更喜欢纯粹的工具驱动开发，那么Tailwind CSS对您来说是一个更好的选择。谈到CSS实用程序，Halfmoon采用了一种中间的方法，即使用CSS自定义属性为通用组件提供实用程序和语义类。n。CSS自定义属性是难以置信的，我希望它们在未来完全取代预处理器变量。浏览器支持率已经稳定在96%左右，随着Internet Explorer逐渐被微软淘汰，它们有望成为一项标准功能。nHalfmoon完全使用CSS变量构建，因为它们提供了很大程度的定制。现在，你可能会立即认为，所有这些意味着，有一些自定义属性的颜色洒在那里，但它不止这些。事实上，在半月中有超过1500个全球变量。几乎所有内容都可以通过重写属性进行自定义。这里有一个来自docs的漂亮例子：交换一些定制属性值在半月谈中打开了大量的可能性，无论是为一个品牌做主题，或者调整用户界面以获得正确的外观。n这就是我们在这里讨论的定制：如果使用它的人覆盖了任何东西，系统是否仍然能够正常工作。我在官方的Halfmoon文档页面上对此做了大量的介绍（还有更多内容）。n对于框架来说，变量并不是一个新概念。许多框架实际上使用Sass或更少的变量，并且已经这样做了相当长的一段时间。这仍然是建立可定制体验的一个好而有效的方法。但同时，它们会锁定到预处理器中（这也不一定是坏事）。通过依赖CSS自定义属性和变量大小所有的东西，我们依赖于原生的CSS，这不需要任何类型的构建依赖。因此，自定义属性不仅可以使自定义框架变得更容易，而且在使用的技术堆栈方面也更加灵活。n需要平衡。我知道我建议为所有东西创建变量，但是管理和维护变量的分数和分数（就像代码库中的任何其他东西一样）同样困难。因此，在很大程度上依赖于变量，以使框架或设计系统更灵活，但也要谨慎你需要提供多大的灵活性，以及添加另一个变量是否是这个范围的一部分。n。当然，对于一个从事激情项目的开发人员来说，你需要包含所有的东西。但这根本不可行，所以我做了一些决定。n到目前为止，Halfmoon拥有类似框架（如Bootstrap或Bulma）中的大部分组件。这些框架都很好而且应用广泛，所以它们是一个很好的参考框架。然而，正如我已经提到的，Halfmoon的一个独特之处是它专注于在web上构建工具和仪表板。这个利基，如果你可以这么说的话，已经让我建立了一些独特的组件和功能：n- 5种不同类型的边栏，内置切换和覆盖处理程序。侧边栏对于大多数仪表板和工具来说都非常重要（要正确使用也很困难），所以这是一个不需要考虑的问题。n- 2种不同类型的导航栏。有一个粘在页面底部，可以用来对动作按钮产生很大的效果。考虑一下在数据表上选择项时弹出的操作。您可以将这些操作按钮放在这里。n- 全方位下拉列表（有12个不同的位置，每个方向3个）。n- 漂亮的表单组件。n- 内置键盘快捷方式系统，可以轻松地为工具声明新组件。n- 大量实用程序。当然，这无法与Tailwind CSS相比，但是Halfmoon有足够的响应实用程序类来处理许多开箱即用的用例。n- 此外，内置的暗模式、巨大的可定制性以及组件的标准外观应该可以共同工作，使Halfmoon成为构建web工具的一个很好的工具和仪表板。希望我离完成任务还差得远！下一次更新将引入一个表单验证程序（演示视频）、更多表单组件、多选组件、日期和时间选择器、数据表组件等。那么Halfmoon到底缺少什么呢？最明显的是选项卡、列表组和微调器。但所有这些都计划在

and let a JavaScript template render all of it.Static: pre-render the HTML.Server: let a live server process requests and generate the HTML response.They are not mutually exclusive. A website could statically pre-render 75% of it\"s pages (say, blog posts), but the other 25% have a server respond to (say, forums).A website could statically pre-render all the pages, but have a couple of empty

中添加，这是下一次更新。还有其他缺少的组件，如旋转木马、树导航、化身等，这些组件稍微超出了范围。提供用户首选项让最终用户能够设置他们的首选项常常被框架所忽略。比如设置一篇文章的字体大小，或者是使用深色还是浅色主题。从某种意义上说，这有点可笑，因为网络正在赶上操作系统几十年来允许用户做的事情。以下是一些用户个性化的例子：能够选择自己喜欢的颜色模式。而且，更棒的是，当页面加载时，网站会自动保存并尊重您的偏好。或者更好的方法是查看您的操作系统首选项并自动调整它们。设置元素的默认大小。尤其是字体大小。小字体在设计中可能看起来不错，但允许用户设置理想的字体大小可以使内容真正可读。从技术上讲，每个现代浏览器都有一个放大内容的选项，但这通常是不方便的，实际上并不能保存您的设置。设置元素的紧凑性。例如，有些人喜欢圆角的大填充，而另一些人则认为这是浪费空间，相反，他们更喜欢更紧凑的UI。有点像Gmail让你决定是在收件箱里留有足够的喘息空间，还是让收件箱尽可能的小而紧凑以查看更多的内容。在网站上设置原色。虽然这完全是装饰性的，能够在网站上的每个按钮和链接上设置您最喜欢的颜色仍然很迷人。启用高对比度模式。有人在GitHub上向我指出了这一点。显然，许多（我是说，many）CSS框架经常不能满足常见元素（如按钮）前景色和背景色之间推荐的最小对比度。这份名单包括半月。这通常是一种折衷，因为过度对比的元素往往看起来更糟（纯粹从审美角度而言）。用户个性化可以让您打开高对比度模式，如果您在默认对比度方面有困难，1. 从@font-face {font-family: \"Merriweather\";src: local(\"Merriweather\"), url(https://fonts.gstatic.com/...) format(\"woff2\");}更改为@font-face。2. @font-face从3. 表单验证程序（演示视频）4. 新组件，包括范围滑块、选项卡和微调器5. 高对比度模式用户首选项6. 多选组件（如Select2，只有没有jQuery）日期和时间选择器，数据表组件，基于GUI的表单生成器，更多的主题和模板，当然，你可以在文档网站上了解更多关于Halfmoon的信息，如果你想关注这个项目，你可以在GitHub上给它一颗星星n- Static: pre-render the HTML.n- Server: let a live server process requests and generate the HTML response.n- A website could statically pre-render 75% of it\"s pages (say, blog posts), but the other 25% have a server respond to (say, forums).n- A website could statically pre-render all the pages, but have a couple of empty

中添加，这是下一次更新。还有其他缺少的组件，如旋转木马、树导航、化身等，这些组件稍微超出了范围。提供用户首选项让最终用户能够设置他们的首选项常常被框架所忽略。比如设置一篇文章的字体大小，或者是使用深色还是浅色主题。从某种意义上说，这有点可笑，因为网络正在赶上操作系统几十年来允许用户做的事情。以下是一些用户个性化的例子：能够选择自己喜欢的颜色模式。而且，更棒的是，当页面加载时，网站会自动保存并尊重您的偏好。或者更好的方法是查看您的操作系统首选项并自动调整它们。n- 设置元素的默认大小。尤其是字体大小。小字体在设计中可能看起来不错，但允许用户设置理想的字体大小可以使内容真正可读。从技术上讲，每个现代浏览器都有一个放大内容的选项，但这通常是不方便的，实际上并不能保存您的设置。n- 设置元素的紧凑性。例如，有些人喜欢圆角的大填充，而另一些人则认为这是浪费空间，相反，他们更喜欢更紧凑的UI。有点像Gmail让你决定是在收件箱里留有足够的喘息空间，还是让收件箱尽可能的小而紧凑以查看更多的内容。n- 在网站上设置原色。虽然这完全是装饰性的，能够在网站上的每个按钮和链接上设置您最喜欢的颜色仍然很迷人。n- 启用高对比度模式。有人在GitHub上向我指出了这一点。显然，许多（我是说，many）CSS框架经常不能满足常见元素（如按钮）前景色和背景色之间推荐的最小对比度。这份名单包括半月。这通常是一种折衷，因为过度对比的元素往往看起来更糟（纯粹从审美角度而言）。用户个性化可以让您打开高对比度模式，如果您在默认对比度方面有困难，n- 1. 从@font-face {font-family: \"Merriweather\";src: local(\"Merriweather\"), url(https://fonts.gstatic.com/...) format(\"woff2\");}更改为@font-face。2. @font-face从3. 表单验证程序（演示视频）4. 新组件，包括范围滑块、选项卡和微调器5. 高对比度模式用户首选项6. 多选组件（如Select2，只有没有jQuery）日期和时间选择器，数据表组件，基于GUI的表单生成器，更多的主题和模板，当然，你可以在文档网站上了解更多关于Halfmoon的信息，如果你想关注这个项目，你可以在GitHub上给它一颗星星

制作CSS框架的注意事项

admin_action_{$_REQUEST[‘action’]}

admin_footer-{$GLOBALS[‘hook_suffix’]}

customize_save_{$this->id_data[‘base’]}

customize_value_{$this->id_data[‘base’]}

get_comment_author_url

network_admin_edit_{$_GET[‘action’]}

network_sites_updated_message_{$_GET[‘updated’]}

pre_wp_is_site_initialized

WordPress 的SEO 教学：如何在网站中加入关键字（Meta Keywords）与Meta 描述（Meta Description）？

谷歌的SEO是什么