由 GitHub 设计团队开源和维护的项目，包含了 GitHub 的界面设计原则、使用指南和开箱即用的 UI 组件。
介绍
目标是创建一个系统，能够轻松构建一致的用户体验，同时具有足够的灵活性来支持广泛的 GitHub 网站。这个目标已融入设计和代码决策中。同时 CSS 方法受到面向对象 CSS 原则、函数式 CSS 和 BEM 架构的影响。
高度可重用、灵活的样式
样式可以混合和匹配，以实现许多不同的布局，而与它们的位置无关。这些样式分为两类：
公用部分
单一目的、一成不变的风格，只做好一件事。
组成部分
常用视觉风格的抽象模式。
特色
高度可组合的间距比例
以 8 为基数的间距比例具有高度可组合性，并且与 GitHub 内容的密度相匹配。边距和填充间隔使垂直和水平节奏保持一致，同时保持灵活性，以便可以调整布局以适应每种情况。
可定制的排版
字体大小和行高选项一起工作可以产生更合理的样式排版。字体样式有多种粗细和大小，以便可以根据内容和可读性进行适当的设计。类型实用程序允许更改视觉样式，同时保持标记语义。
有意义的颜色
颜色系统使我们能够向内容和交互添加有意义的信号。颜色变量和实用程序提供主题样式选项，而不受结构的束缚。文本和背景颜色有一系列易于访问的组合，以确保构建包容性界面。
结构
Primer CSS 作为@primer/css. 每个 Primer CSS 的“模块”都位于一个 src/带有 的子文件夹中 index.scss。一般来说，风格分为三个主要主题：
-
「核心样式」是常见的依赖项，包括支持变量、原生元素和排版样式、按钮、导航、工具提示等。 -
「产品样式」特定于 github.com，包括头像、标签、Markdown 样式、弹出窗口和进度指示器等组件。 -
「营销风格」特定于 GitHub 营销工作，包括国际网站和以活动为中心的网站以及 github.com 上更注重设计的功能页面。营销风格包括新的颜色和按钮样式，并扩展了核心排版和空白比例。
使用
通过 npm 安装
npm install --save @primer/css
可以直接从包中导入各个 Primer 模块@primer/css：
@import "@primer/css/core/index.scss";
@import "@primer/css/product/index.scss";
@import "@primer/css/marketing/index.scss";
传送门
开源地址：https://github.com/primer/css
-END-
原文始发于微信公众号（开源技术专栏）：GitHub 开源的设计系统
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/191972.html
