前端UI组件设计系统【免费下载链接】tufte-cssStyle your webpage like Edward Tufte’s handouts.项目地址https://gitcode.com/gh_mirrors/tu/tufte-css点击查看免费下载Tufte CSS 是一套将 Edward Tufte 讲义美学带到网页的纯 CSS 方案其核心是简单排版 大量边注sidenote 图形与文字紧密整合。本文以仓库 README.md 为骨架结合演示文档 index.html 与完整样式表 tufte.css 的实现细节讲解如何接入、如何书写边注/引语/图形等核心结构以及项目的测试、构建与发布流程。Tufte CSS 是什么把讲义美学带到 HTMLEdward Tufte 在讲义中使用的风格独树一帜简单、排版精良、大量使用边注、图形与图表和正文紧密整合。tufte-css项目的目标就是把这种风格带到 HTML 文档中。项目直接受两个先导项目启发Tufte-LaTeXLaTeX 世界里的 Tufte 版式实现R Markdown Tufte HandoutR Markdown 生态中的 Tufte 讲义格式。tufte-css 从中提取了可复用到网页上的设计理念并以纯 CSS的形式交付。仓库中的 index.html 是一份自我描述的演示文档逐项演示了 Tufte CSS 的全部能力是了解项目的最佳入口。除了tufte.css、tufte.min.css与et-book/字体目录外仓库中的其他文件如img/演示图片、tests/测试夹具都只是为演示文档与测试服务的接入时可以直接忽略。快速开始复制两个资源、加一行样式引用README 给出的接入步骤非常轻量只需两步把tufte.css与et-book字体目录复制到你的项目目录中在 HTML 文档的head中加入样式引用link relstylesheet hreftufte.css/之后就可以直接使用 Tufte CSS 提供的 CSS 规则与下文介绍的各类结构约定。建议在接入过程中经常使用查看源代码和检查元素来对照样式效果。从发布物的角度也可以印证这一点package.json 的files字段声明了 npm 包实际包含的内容正是这三个资源files: [ tufte.css, tufte.min.css, et-book/ ]之所以必须连同et-book目录一起复制是因为 tufte.css 中的font-face以相对路径引用了该目录下的字体文件共四组字重/字型et-book-roman-line-figures常规字重、正体正文主力et-book-display-italic-old-style-figures斜体强调et-book-bold-line-figures粗体stronget-book-roman-old-style-figures旧式数字边注编号、.numeral类。如果 ET Book 字体因故加载失败body的字体栈会优雅回退到Palatino、Palatino Linotype、Book Antiqua、Georgia等一系列衬线字体排版不会彻底崩塌。项目范围与维护状态为什么它是CSS-only方案README 明确界定了项目边界Tufte CSS 是专门用纯 CSS 为网页排版提供样式的方案。由此推导出的范围约定包括虽然 JavaScript 方案在能力上常常优于纯 CSS但不在本项目范围内也不会被采用网页的打印版处理不在范围内与静态站点生成器或其他格式的集成不在范围内。这些有用但不属于本项目的需求README 建议由建立在 Tufte CSS 之上的独立衍生项目来承接——这也说明本项目刻意保持单薄、专注。维护状态方面项目有人维护但不在积极开发中被视为功能基本完备feature-complete。重构与新增功能优先级很低但欢迎通过修复 bug 或补充功能的贡献来完善它。当前仓库版本为1.9.0见 package.json。页面骨架article、section 与两级标题体系Tufte CSS 对文档结构有明确约定演示文档 index.html 全部遵循这一骨架在body内用一个article包裹全文用section把每一组逻辑相关的文字与标题圈起来h1用作文档标题p classsubtitle用作文档副标题h2用作章节标题h3用作更低一级标题不支持 h4 及以上的标题层级。如果你觉得需要四级以上标题README 借 Tufte 的话建议你重新设计文档结构——费曼物理学讲义三卷写尽全部物理只用了章和节内 A 级标题两级层次复杂内容并不需要繁复的层级。与之配套的还有newthought技巧用span classnewthought把段落开头几个词设置为小型大写字母font-variant: small-caps模拟 Tufte 后期书籍如《Beautiful Evidence》每节开头的排版。注意要保持一致要么用标题体系要么用newthought手法不要混用。从 tufte.css 的源码可以看到这套体系的数值基础html根字号15pxh1为3.2rem、行高 1、字重 400h2与h3为斜体、字重 400字号分别为2.2rem与1.7remp.subtitle为1.8rem斜体。body设置了max-width: 1400px保证超大屏上不会无限拉宽。正文排版配色、字体栈与暗色模式缓和对比的配色网页不是纸面Tufte CSS 没有使用纯白/纯黑而是用#fffff8近白的米色作背景、#111作文字色。两者与纯版本几乎无法区分却显著降低了刺眼的对比度。正文保持灰度把颜色留给图形与图片做谨慎、克制的使用。有意思的是tufte.css 还内置了暗色模式支持通过media (prefers-color-scheme: dark)把背景切换为#151515、文字切换为#ddd跟随操作系统偏好自动生效。独立的粗体/斜体字体文件Tufte CSS 为粗体与斜体准备了单独的字体文件font-face声明了font-weight: normal/bold与font-style: normal/italic的组合而不是让浏览器用机械变形去伪造字重与字型。这是印刷排版的最佳实践能显著提升强调文字的观感。无衬线与链接若偏好无衬线字体给段落加sans类即可它依赖 Tufte 钟爱的 Gill Sans 系列Gill Sans, Gill Sans MT, Calibri, sans-serif链接颜色继承正文文字色悬停与点击时不变色仅以下划线标示可点击性源码中通过text-underline-offset: 0.1em与text-decoration-thickness: 0.05em微调下划线外观numeral类使用旧式数字字体et-book-roman-old-styledanger类把文字染红。正文段落、dl、ol、ul统一为1.4rem字号、2rem行高section内的段落、引用尾注与表格宽度收敛到55%列表宽度为 50%从而为右侧边注留出余白——这是整个版式的关键比例。边注系统sidenote 与 marginnote 的完整实现边注sidenote是 Tufte 风格最标志性的特征也是 tufte-css 的核心卖点。它像脚注但不用读者把视线跳到底部而是把补充信息显示在正文旁边的页边距中尽量贴近引用它的正文。标准 HTML 模板一个边注由三个紧邻的元素组成一个带sidenote-number类的label、一个typecheckbox的隐藏input作为移动端开关以及一个内容span classsidenotelabel forsn-demo classmargin-toggle sidenote-number/label input typecheckbox idsn-demo classmargin-toggle/span classsidenote 这是边注的内容。 /span要点与规范来自 index.html 的边注章节手动指定 id把模板中的sn-demo替换为描述性名称建议用sn-前缀表边注、mn-前缀表边注图margin note位置紧邻编号 label 必须紧贴边注内容本身以保证for/id关联与布局正确用 section 包裹为了边注的最佳可读性请把正文包在section里这正是section p宽度收窄为 55% 的原因。自动编号的实现原理边注编号完全由 CSS 计数器完成无需任何 JavaScript。在 tufte.css 中可以看到完整链路body声明counter-reset: sidenote-counterL56全局计数器归零.sidenote-number每次出现counter-increment: sidenote-counterL265-L267.sidenote-number:after输出content: counter(sidenote-counter)作为正文中的上标数字L276-L281.sidenote:before输出content: counter(sidenote-counter) 作为边注前的编号L283-L287。也就是说编号是按文档顺序自动累加的你不需要手工写1、2、3。不带编号的边注图marginnote如果不需要脚注式编号就用边注图margin notelabel formn-demo classmargin-toggle#8853;/label input typecheckbox idmn-demo classmargin-toggle/ span classmarginnote 这是边注图注意前面没有编号。 /span大屏上边注图只是省略了编号的边注减弱了对正文流的中断感代价是读者匹配注与正文的认知负担略增小屏上边注图的展开开关是一个符号演示文档用#8853;即 ⊕而不是编号。小屏响应式行为tufte.css 的media (max-width: 760px)是边注系统的关键小屏没有页边距可用因此.sidenote与.marginnote默认display: none隐藏label.margin-toggle:not(.sidenote-number)显示出来即 ⊕ 开关点击开关后:checked .sidenote或.marginnote以float: left、width: 95%的形式内联展开到正文流中。这是边注在移动端变成可折叠脚注的实现细节也是 README 所强调的网页不是印刷品的绝佳例证同样的内容在大屏进边距、在小屏进折叠区。上标不撑破行高测试覆盖的细节边注编号以sup/label形式出现在正文行内若上标撑高行框会破坏基线节奏。因此 tufte.css 设置了sup { line-height: 0 }并且这正是仓库测试夹具之一见下文测试一节断言的对象。章首引语epigraph若想用引语开篇可使用章首引语epigraph结构模仿 Tufte 书籍尤其是《Beautiful Evidence》每章开头的引语排版。它由div classepigraph包裹一个或多个blockquote构成div classepigraph blockquote p引语正文……/p footer出处作者cite作品名/cite/footer /blockquote /div样式约定tufte.css引语文字斜体显示出处footer恢复正常字重cite斜体多个引语可放在同一个div.epigraph内自然叠排演示文档展示了短引语、长引语、带p与不带p、单引语与多引语等各种形态可作为参考模板。图文整合figure、边注图、全宽图与 iframe 占位Tufte 强调图形与文字的紧密整合数据、图表应与讨论它的正文放在一起而不是被扔到单独的页面上。在网页语境下这意味着读者无需额外的点击、切换标签页或滚动就能同时看到图和说明文字。主栏图默认图形默认使用figure元素被约束在主栏内源码中figure的max-width: 55%不要用p包裹figurefigure img srcimg/exports-imports.png alt.../ /figurefigure内的figcaption采用float: right、max-width: 40%的排版让说明文字浮到右侧空白处。需要标注来源时把说明放进figure内部的marginnote即可。边注图margin figure当图形只是正文的辅助信息时适合放到页边距把图片包在marginnote里、置于p标签内即可。演示文档 index.html 就以这种方式展示了 Dürer 的犀牛版画示例。全宽图需要整屏宽度的图形时给figure加fullwidth类figure.fullwidth img的width: 100%同时.fullwidth整体max-width: 90%。演示文档用 Tufte 翻译的拿破仑远征图img/napoleons-march.png展示了这种用法该图出自《Beautiful Evidence》第 122-124 页。iframe 占位助手网页上做优雅图形的一大障碍是屏幕尺寸适配iframe尤甚。为此项目提供了iframe-wrapper助手类以经典的 16:9 比例占位源码padding-bottom: 56.25%最常见的用途是嵌入 YouTube 视频figure classiframe-wrapper iframe width853 height480 srchttps://www.youtube.com/embed/... frameborder0 allowfullscreen/iframe /figure该类也可以用在div上效果略有差异但原理一致可按需选择。表格支持对宽表格项目提供div.table-wrapperoverflow-x: auto并使用 Trebuchet MS 等无衬线字体配合table.fullwidth可让表格横向滚动而不破坏版式这一能力来自社区对 booktabs 风格表格的贡献。代码与代码块样式行内代码与代码示例用code类标识。代码需要等宽以保证格式化与可读性因此 tufte.css 采用了 GitHub 同款字体选择从优雅但稀有的 Consolas 一路回退到人人皆有的 CourierConsolas, Liberation Mono, Menlo, Courier, monospace。较长的代码示例应放在pre code结构中这能同时控制缩进与溢出pre code宽度52.5%、margin-left: 2.5%与正文栏对齐overflow-x: auto处理超长行需要整宽展示的代码块加pre.fullwidthwidth: 90%标题内的代码字号缩为0.80em边注/边注图内的代码保持1rem。ImageQuilts 支持项目还为 Edward Tufte 与 Adam Schwartz 的ImageQuilts图像拼贴提供了直接支持。ImageQuilts 是拼贴了大量子图像的图片有的边缘参差、有的平直接入方式与普通figure完全一致大幅拼贴建议放入figure.fullwidth如演示文档中的中国书法拼贴img/imagequilt-chinese-calligraphy.png中等尺寸可放入约束在主栏的普通figure如 47 种动物声音重复拼接的示例img/imagequilt-animal-sounds.png。测试用 Playwright 断言计算样式项目用Playwright做样式层面的回归测试断言的是浏览器计算后的 CSS 属性computed style而非截图比对。运行方式README「Testing」一节npm install # 安装依赖含 playwright/test npm test # 运行测试相关配置与夹具playwright.config.jstestDir: tests指定测试目录tests/tufte.test.js当前唯一的测试用例sup does not expand the line box——加载夹具后读取sup的计算行高断言为0px验证上标不会撑高行框、破坏基线节奏tests/sup-line-height.html测试夹具是普通的纯 HTML 文件直接用浏览器打开即可单独检视该特性这也是 README 强调的夹具设计原则每个特性一个独立可检视的 HTML。构建、版本与发布README 的「Deploying」一节给出了发布流程对应 package.json 中的 npm scripts修改代码在 shell 中执行npm run build——该命令调用cleancss -o tufte.min.css tufte.css用 clean-css 压缩生成 tufte.min.css在package.json中提升版本号当前仓库版本为1.9.0在 shell 中执行npm publish发布。值得注意的两点prepublish脚本会自动先执行npm run build保证发布包里的压缩产物是最新的项目声明engines.node 18使用旧版 Node 会无法运行。发布物即files字段列出的tufte.css、tufte.min.css与et-book/。参与贡献与许可证README 的贡献指南要求发现异常可开 issue更好的是提交带修复建议的 pull request文档化你的问题与修复清晰的描述、可复现步骤条件允许时附上修复前后截图与相关讨论/提交链接一次 pull request 只做一处变更修复与新增功能应在 index.html 上测试覆盖从 iPhone 4 大小的小屏到你日常使用的大屏没有移动设备时可用浏览器开发者工具模拟不同尺寸的设备。项目以MIT 许可证发布许可文本见 LICENSE。主要贡献者包括Dave Liepmann创建者、维护者与设计、Edward Tufte编辑、方向与设计、Adam SchwartzET Book 字体、Clay Harmon媒体查询与 rem 单位、Linjie Ding斜体字型、Stephen A Thomas自动编号边注、Ben Newman边注编号样式、Kevin Godbybooktabs 表格、James Kolce边注修复、Chris MacKay小屏边注切换、Paul Rodriguez边注样式微调与 Claudiu-Vlad UrsacheHTML5 合规等。综上tufte-css 用一份 tufte.css 加一套 ET Book 字体就完整承载了 Tufte 式排版的三大支柱——精良排版、自动编号的边注体系、图文紧密整合配合 index.html 这份自描述演示文档无论是新手快速接入还是开发者深入定制都能找到对应的依据与范例。赞分享前端UI组件设计系统【免费下载链接】tufte-cssStyle your webpage like Edward Tufte’s handouts.项目地址https://gitcode.com/gh_mirrors/tu/tufte-css点击查看免费下载相关推荐Tufte CSS终极指南如何用Edward Tufte设计哲学打造优雅网页Tufte CSS终极指南如何用Edward Tufte设计哲学打造优雅网页 Tufte CSS是一款基于Edward Tufte设计理念的CSS框架它能帮前端UI组件设计系统自然语言转SQL实战指南五步构建企业级智能查询系统自然语言转SQL实战指南五步构建企业级智能查询系统 在数据驱动的商业环境中让非技术团队成员能够直接与数据库对话已成为提升决策效率的关键。本文基于Anthro示例工程Tufte CSS边注系统终极指南实现优雅的学术注释Tufte CSS边注系统终极指南实现优雅的学术注释 想要让你的网页拥有爱德华·塔夫特Edward Tufte书籍般优雅的排版风格吗Tufte CSS边前端UI组件设计系统创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考