论坛36
Forma 36 FCSS - 用于应用间距,颜色,打字,阴影和向元素过渡的通用 CSS 类.
开始
将软件包安装到您的工程
yarn add @contentful/forma-36-fcss
或国家防范机制
npm i @contentful/forma-36-fcss
将样式.cs文件导入到您的样式表 .
@import '@contentful/forma-36-fcss/dist/styles.css'
命名公约
类名由前缀(如.f36-),属性(如比值-下方)和尺度或修饰符(-xs)组成. 参见下面所有类名列表
间距
边距
margin-top
margin-bottom
margin-right
margin-left
margin
margin-horizontal
margin-vertical
Scale:
xs, s, m, l, xl, 2xl, 3xl, 4xl
Class name composition example:
.f36-margin-top--xs
铺垫
padding-top
padding-bottom
padding-right
padding-left
padding
padding-horizontal
padding-vertical
Scale:
xs, s, m, l, xl, 2xl, 3xl, 4xl
Class name composition example:
.f36-padding-top--xs
类型
字体家庭
.f36-font-family--sans-serif
.f36-font-family--monospace
字体缩放
font-size
Scale:
s, m, l, xl, 2xl, 3xl
Class name composition example:
.f36-font-size--s
重量
font-weight
Scale:
normal, medium, demi-bold
Class name composition example:
.f36-font-weight--normal
线高
line-height
Scale:
default, condensed
Classname composition example:
.f36-line-height--default
颜色
文本颜色和背景
语义颜色 :
| 颜色 | 背景情况 |
|---|---|
| .f36 - 颜色 - 主要, | .f36-背景-颜色-主 |
| .f36-色-阳性 | .f36-背景-颜色-阳性 |
| .f36-颜色-阴性 | .f36-背景-颜色-阴性 |
| .f36-颜色-警告 | .f36 背景颜色警告 |
文本颜色 :
| 颜色 |
|---|
| .f36 -- -- 颜色 -- -- 文本 -- -- 暗色 |
| .f36-彩色文本中间 |
| .f36-color-text-光线 |
| .f36-颜色-文本最亮 |
元素颜色
| 颜色 | 背景情况 |
|---|---|
| .f36-彩色-元素-最暗处 | .f36-背景-颜色-元素-暗地 |
| .f36-彩色-元素-暗色 | .f36 背面- 颜色- 元素- 暗色 |
| .f36 -- -- 彩 -- -- 元素 -- -- 中 | .f36-背景-颜色-元素-中间 |
| .f36-颜色-元素-光 | .f36-背景-颜色-元素-光 |
| .f36-彩-元素-最轻 | .f36-背景-颜色-元素-最轻 |
相交颜色
| 颜色 | 背景情况 |
|---|---|
| .f36-彩-相接-暗色 | .f36-背景-颜色-相接-暗色 |
| .f36-彩-相接-中间 | .f36-背景-彩-相接-中 |
| .f36-彩色相接光线 | .f36-背景-彩-相接-光 |
颜色 :
| 颜色 | 背景情况 |
|---|---|
| .f36-颜色-蓝色 | .f36-背景-颜色-蓝色 |
| .f36-颜色-绿色 | .f36 背景- 颜色- 绿色 |
| .f36-彩-红色 | .f36-背景-颜色-红色 |
| .f36-颜色-橙色 | .f36-背景-颜色-橙色 |
| .f36-彩色-摄氏度 | .f36 背景- 颜色- 曲线 |
次要颜色 :
| 颜色 | 背景情况 |
|---|---|
| .f36-彩色-薄荷 | .f36 背景- 颜色- 薄荷 |
| .f36-颜色-冰 | .f36-背景-颜色-冰 |
白色 :
| 颜色 | 背景情况 |
|---|---|
| .f36 -- -- 颜色 -- -- 白色 | .f36 背景颜色-白色 |
阴影
box-shadow
Scale:
default, heavy
Class name composition example:
.f36-box-shadow--default
发光
box-shadow
Scale:
primary, negative, positive
Class name composition example:
.f36-glow--primary
过渡
transition-duration
Scale:
short, default, long
Class name composition example:
.f36-transition-duration--short
缓解
transition-easing
Scale:
default, cubic-bezier
Class name composition example:
.f36-transition-easing--default