|
如何自动化设计
Jan 25, 2024 2:07:49 GMT -5
Post by account_disabled on Jan 25, 2024 2:07:49 GMT -5
本文是与JotForm合作创建的。感谢您对合作伙伴的支持,使 SitePoint 成为可能。 问题 这一切都始于 2017 年 10 月,当时我们正在寻找 HackWeek 项目创意。 我们的JotForm团队注意到,我们的新表单设计 JotForm Cards 在嵌入用户网站时看起来不如独立版本好。呃哦。 基本上, JotForm Cards的设计不太适合相关网站。尽管表单本身看起来很漂亮,但在与标准用例如此不同的环境中使用该设计却会毁了它。 当我们继续将 JotForm 卡嵌入网站时,我们意识到这种情况相当普遍。双倍呃哦。 我们注意到诸如表格被挤入列之类的事情 并且功能颜色与网站不符: 并用不同的字体重复标题。 这些问题乍一看似乎并不严重,但因为我们只有 7 天的 HackWeek 来解决这些问题,所以我们很紧张,真的很紧张。 结构 在深入实施之前,我将分享一些有关 JotForm 卡的结构信息。 前端的样式结构使用 SCSS(基本上是具有奇特语法的 SASS)作为预处理器,使用 PostCSS 作为后处理器。其余的前端 WhatsApp 号码数据 结构(标记、逻辑)主要基于 React。 旁注:表单的 CSS 文件由 PHP 准备和提供,PHP 是此实现的主要后端语言。 挑战 我们决定自动化设计以实现以下目标: 为 JotForm 卡生成干净的模板(不会破坏其设计) 创建空间来操作表单以匹配每个网站的设计 了解我们嵌入表单的网站的设计选择 将此设计选择应用于我们的模板,而不会降低 JotForm 卡独立设计的质量 最后,在合理的时间内完成所有这些工作。 我们首先完全基于 SCSS 变量构建样式。这使我们能够通过在必要的变量上添加 !default 标志来生成更清晰的 JotForm Cards 模板。 默认 JotForm 卡模板(左)和清理后的模板(右)。 设计选择的推论 由于我们的主要重点是以易于调整的方式装饰干净的模板,因此我们决定考虑网站设计的一些样式方面: 颜色 字体 网页中容器的形状(边框、大小等) 阴影 第一步:让我们从 CSS 中获取 我们决定使用 PHP 读取网站的 CSS 内容并从中提取信息。我们在后端这样做的原因是因为我们的整个系统(CSS 生成)已经基于 PHP。 这意味着使用 SCSS 解析器将默认表单样式和用户定义的样式属性合并到一个文件中。因此,计划是添加另一层(合并流程),以便使用网站 CSS 中的信息覆盖默认样式属性。
|
|