AutomaticCSS是美国WordPress圈子里比较流行的工具，尤其是如果你使用bricksbuilder、Oxygenbuilder等WordPress页面构建工具，这个工具几乎免不了要讨论。 我在英文网上搜了一下，虽然没有找到任何介绍这个工具的文章。 其实这个软件太冷门了，恐怕你只是默默地使用它，什么也不说。 写这篇文章是为了记录一下我自2021年11月订购这款软件以来，在开发者Kevin Geary的youtube频道、内圈里不断学习教程下搭建WordPress网站的一些心路历程。
CSSframework（CSS框架）有哪些？
CSS框架（framework）是一系列CSS文件的集合，包括基本元素重置、页面布局、网格布局、表单样式、通用规则等代码块，用于简化Web后端开发的工作并提高工作效率。 简单理解，就像商场里卖的肉和蔬菜是给你切好配的。 购买后可以直接做饭，省去了自己处理的过程。
什么是自动 CSS？
AutomaticCSS是专门为WordPress生态编译的CSS框架（CSS框架），在建站时可以大大提高工作效率和网站的统一性。 官网：，目前支持的编辑器包括Oxygenbuilder和bricksbuilder。 未来将支持Wordpress默认的Gutengburg和Zionbuilder、Cwicly、Generatepress等工具。 请注意，它不支持市场上最流行的 Elementor。
自动CSS能做什么？
我们知道，使用科学的CSS框架会减少你的开发时间，提高效率，因为在正常的网站编辑和设计中总会有很多可重用的代码参数。
AutomaticCSS 就是这样一种工具，它的预设 CSS 可以帮助您：
手动文字大小
由 Automatic.css 提供支持的网站上包含文本的任何内容，无论是标题、段落、列表、表单数组还是其他任何内容，都通过 12 种不同的大小选项、在不同的显示比特率下遵循完美的物理类层次结构。手动调整字体大小。 通常情况下，我们通常将桌面端的字体大小设置为16px。 如果平板和手机端没有单独设置，字体大小将显示为16px。 如果要在这两个部分显示不同的字体大小间距css，则必须分别设置相应的帧率。 前往设置。 有了Automatic.css的自定义css，比如text-m，其实你已经得到了一个可以在不同比特率下手动调整的字体设置。 如右图所示，字体手感可以从14px到16px手动调整，大屏幕上字体较大，小屏幕上字体较小。
自动.css背景字体设置界面 自动.css背景字体设置界面
手动颜色
设置您的品牌颜色，Automatic.css 将手动生成每种颜色的六种颜色变体。 您可以使用此变体为任何元素（包括背景和覆盖层）着色，甚至可以通过Automatic.css颜色实用程序变量将它们与自定义类和ID一起使用。
Primarycolor：设置网站的主颜色。
secondarycolor：设置辅助颜色，提示颜色。
Accentcolor：指向颜色，可以用作 CTA 按钮等。
Actioncolor：动作颜色，可用作CTA按钮等。
。 。 。
自动.css背景颜色设置界面 自动.css背景颜色设置界面
与直接设置颜色代码相比，设置变量的方法可以保持设计的连续性和一致性，也可以避免每次输入和记住一堆无意义代码的麻烦。 另一个用途是，如果您要将这个网站迁移到新网站，您可以轻松地一键更改网站的颜色。
2023-4-10更新：用了这么久，建了很多网站，我个人的习惯就是把不常用的颜色关掉，这样这些从来不用的代码就不会加载到css上向上。 对我来说，基本上大部分时候actioncolor加shade的组合就足够了。 PSshadecolor 默认情况下很难关闭。
手动行距
与Automatic.css中的排版一样，前导、填充和间距遵循完美的物理比例，使您可以访问六个分层宽度值和六个分层部分宽度值，所有这些都是手动响应的。 据了解，宽度实用变量可确保元素具有一致的宽度，尽管是完全自定义的。
适配不同设备
Automatic.css 使用先进的 CSSClamp 和 Calc 技术来确保所有版式、边距、填充和间隙都能完美响应您网站的最大和最小层规范。 尽管您可以自定义系统以适应特定的设计和布局，但您不必摆弄断点。
钳位()函数 钳位()函数
手动网格布局
Automatic.css 是第一个提供手动响应网格的实用程序框架。 在桌面上设置所需的列数，Automatic.css 会处理其余的事情。 对于喜欢在每个断点完全控制网格的开发人员来说，Automatic.css 通过传统的网格实用程序类提供完全控制。
ACSS 网格布局ACSS 网格布局
如上图所示，grid-3表示桌面码率下3格，grid-l-2表示平板模式下2格，grid-m-1表示移动码率下1格。 网格，gap-m表示网格的宽度。
高度可定制
感觉像一个完全手动的框架让您在每个站点上使用相同的值？ Automatic.css 为您提供了对版式、间距和颜色的令人惊叹的细粒度控制间距css，因此您可以快速地从 Figma、Sketch 和 XD 重新创建设计，而不会出现任何问题。
ACSS 强大的自定义功能 ACSS 强大的自定义功能
手动回退机制（fallback）
并非所有浏览器都支持 Clamp 和 Calc 功能，它们是 Automatic.css 响应能力的核心。 不过不用担心，因为对于不支持 Clamp 的浏览器，Automatic.css 可以近乎完美地使用 Calc 进行回退，而对于不支持 Calc 的浏览器则可以“纯粹”回退使用 rem 或 px。
发表评论