前端【免费下载链接】foundation-emailsQuickly create responsive HTML emails that work on any device and client. Even Outlook.项目地址https://gitcode.com/gh_mirrors/fo/foundation-emails点击查看免费下载Callout前身为 panel是 Foundation for Emails 中最实用的布局组件之一只需一行标签即可为邮件中的关键内容加上边框、背景色与内边距让「重要提醒」「操作指引」「促销横幅」在收件箱中一眼可见。本文以 docs/pages/callout.md 为主线结合仓库中的 Sass 源码、主题配置 与真实模板示例完整讲解 Callout 的 Inky 用法、五套配色方案与底层样式定制读完后你可以直接在自己的邮件模板中复用它。BasicsCallout 的结构与 Inky 用法Callout 的本质是一个「加了边框、背景和内边距」的容器。由于邮件客户端只认表格布局Callout 在编译后会生成一套完整的 table 结构外层table上应用.callout类负责底部外边距最内层的th上应用.callout-inner类负责边框、背景与内边距。如果你使用 Inky 模板语言Foundation for Emails 的推荐写法不需要手写任何 table——直接写callout标签Inky 就会自动为你生成上述表格结构。callout可以包住一整行row也可以放在某个columns列内部。下面这段示例来自官方文档左侧列的文字不在 callout 内右侧列的文字被包在.secondary配色 callout 中第二个 callout 则包住了整行内容。row columns small6 pNot in a callout :(/p /columns columns small6 callout classsecondary pIm in a callout!/p /callout /columns /row callout classprimary row columns small12 pThis whole row is in a callout!/p /columns /row /callout在实际使用中两种场景都很常见把 callout 塞进列里用于局部高亮或用 callout 包裹整行内容制造「整段强调」的视觉区域。仓库的视觉测试页 test/visual/pages/callout-in-grid.html 甚至演示了在 callout 内部再嵌套一个双列row的复合布局说明 callout 与网格组件可以自由组合。配色类五套预设语义色Callout 的颜色通过追加类名切换支持.primary、.success、.warning、.alert四种语义色不加任何颜色类时背景为白色实际取$callout-background的默认值$white。callout pSuccessfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris./p /callout callout classprimary pSuccessfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris./p /callout callout classsuccess pSuccessfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris./p /callout callout classwarning pThere may be Krakens around. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris./p /callout callout classalert pIncoming Kraken! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris./p /callout注意 Inky 也支持像callout classsecondary这样的.secondary类文档示例中就有只是官方文档的配色清单里把它放在了primary/success/warning/alert之外属于第五种可配色。各色对应的基底色定义在 scss/settings/_settings.scss类名基底色变量默认色值.primary$primary-color#2199e8.secondary$secondary-color#777777.success$success-color#3adb76.warning$warning-color#ffae00.alert$alert-color#ec5840源码剖析Callout 的样式究竟如何生成要理解 Callout 为什么在各类邮件客户端中表现稳定可以看它的实现源码 scss/components/_callout.scss。核心规则只有两组table.callout { margin-bottom: $callout-margin-bottom; Margin-bottom: $callout-margin-bottom; } th.callout-inner { width: 100%; border: $callout-border; padding-top: $callout-padding; padding-right: $callout-padding; padding-bottom: $callout-padding; padding-left: $callout-padding; background: $callout-background; .primary { background: $callout-background-primary; border: $callout-border-primary; color: $black; } // .secondary / .success / .warning / .alert 依此类推 }这里有两个值得注意的实现细节table.callout上同时写了小写margin-bottom和大写Margin-bottom——这是 Foundation for Emails 的 Outlook 兼容惯例大写属性专门喂给 Word 渲染引擎Outlook 只认大写形式的 margin确保 callout 在 Outlook 中也不会挤压到后续内容。配色类的边框与背景色不是直接取色而是经过计算边框统一为「基底色降低 20% 亮度」的 1px 实线color.adjust($color, $lightness: -20%)背景则用color.scale($color, $lightness: $callout-background-fade)向白色方向淡化 85%同时文字强制为$black保证任何配色下正文都有足够对比度。通过 Sass 变量定制 CalloutCallout 的全部外观都由可覆盖的 Sass 变量控制默认值集中在 scss/settings/_settings.scss组件源码中同样以!default声明见 scss/components/_callout.scss。在自定义主题文件中覆盖这些变量即可全局改变所有 callout 的观感变量默认值作用$callout-background$white无配色类时的背景色$callout-background-fade85%配色背景向白色淡化的比例$callout-padding10px内边距四个方向一致$callout-padding-small$callout-padding小屏幕下的内边距$callout-margin-bottom$global-margin默认16px底部外边距$callout-border1px solid 背景色降亮 20%默认边框$callout-border-primary等对应配色降亮 20%各配色边框例如要做出更「重」的高亮卡片可以在自己的 settings 中覆盖$callout-padding: 20px; $callout-background: #fefefe; $callout-background-fade: 70%; // 让配色背景更饱和该组件通过 scss/foundation-emails.scss 中的components/callout被引入主样式文件属于默认启用的核心组件无需额外开关。实战场景侧边栏面板与正文强调Callout 最经典的实战用法是「侧边栏面板」。官方模板 templates/sidebar.html 中右侧large5的列里连续嵌套了三个classsecondary的 callout分别承载标题链接区、社交按钮区和联系方式区形成清晰的侧边栏视觉分组columns large5 classsidebar callout classsecondary h5Header/h5 p classleadSub-header/p pa href#Just a Plain Link raquo;/a/p /callout callout classsecondary h6CONNECT WITH US:/h6 button classfacebook expand href#Facebook/button button classtwitter expand href#Twitter/button /callout /columns另一个典型场景是正文中的「重点提示」基础模板 templates/basic.html 在介绍性段落之后插入classprimary的 callout 来强调附加说明templates/hero.html 则在 hero 区域使用 callout 突出主行动信息。此外 callout 还能与响应式可见性类叠加——视觉测试页 test/visual/pages/visibility.html 就展示了callout classprimary hide-for-large、callout classshow-for-large alert这类组合实现「小屏显示提示、大屏显示警报」的分屏内容策略。小结Callout 是 Foundation for Emails 中性价比极高的组件用 Inky 的callout标签即可免写表格用.primary/.success/.warning/.alert类即可切换语义配色通过scss/settings/_settings.scss中的$callout-*变量即可全局定制外观。无论是侧边栏面板、交易提醒还是促销横幅Callout 都能以最稳妥的 table 结构跨客户端呈现。若想进一步了解callout之外的其他 Inky 标签row、columns、button、menu等可继续阅读 Inky 模板语言指南。赞分享前端【免费下载链接】foundation-emailsQuickly create responsive HTML emails that work on any device and client. Even Outlook.项目地址https://gitcode.com/gh_mirrors/fo/foundation-emails点击查看免费下载相关推荐Foundation for Emails 快速上手用 Inky 模板语言构建全客户端兼容的响应式 HTML 邮件Foundation for Emails 快速上手用 Inky 模板语言构建全客户端兼容的响应式 HTML 邮件 Foundation for Emails前端x-wrt性能优化实战让你的路由器跑得更快的7个有效方法 x wrt性能优化实战让你的路由器跑得更快的7个有效方法 x wrt性能优化是每个路由器用户都关心的话题通过合理的配置和优化你可以让路由器运行更加稳Foundation for Emails Menu 组件实战指南用 Inky 快速构建跨客户端的横向/纵向链接菜单Foundation for Emails Menu 组件实战指南用 Inky 快速构建跨客户端的横向/纵向链接菜单 导读 Menu菜单是 Foundat前端上一篇如何快速重置JetBrains IDE试用期终极完整指南下一篇Visdom 快速上手指南5 分钟搭建实时可视化仪表盘并绘制第一张图创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考