Foundation - Global Styles

在本章中,我们将研究全球风格. Foundation框架的全局CSS包括有用的重置,确保样式在浏览器中保持一致.

字体大小调整

浏览器样式表的字体大小默认情况下设置为100%.默认字体大小设置为16像素.根据字体大小,计算网格大小.要具有不同的基本字体大小和未受影响的网格断点,请将 $ rem-base 设置为 $ global-font-size 值,该值必须以像素为单位.

颜色

links buttons 等交互式元素使用来自SASS变量

SASS参考

变量

下表列出了SASS变量,用于自定义项目 _settings.scss 中组件的默认样式.

Sr.No.名称&说明输入默认值
1

$全局宽度

它表示网站的全局宽度.用于确定网格的行宽.

数字rem-calc(1200)
2

$ global-font-size

它表示应用于&lt的字体大小; html> < body> .它默认设置为100%,用户的浏览器设置值将被继承.

Number100%
3

$ global-lineheight

它代表所有类型的默认行高. $ global-lineheight 为24px,而 $ global-font-size 设为16px.

数字1.5
4

$ primary-color

它为交互式组件(如链接和按钮)提供颜色.

颜色#2199e8
5

$ secondary-color

它与支持 .secondary 类的组件一起使用.

颜色#777
6

$ success-color

它表示与 .success 类一起使用时的正状态或操作.

颜色#3adb76
7

$ warning-color

它表示与 .warning 类一起使用时的警告状态或操作.

颜色#ffae00
8

$ alert-color

当与 .alert 类一起使用时,它表示负面状态或操作.

颜色#ec5840
9

$浅灰色

它用于浅灰色UI项目.

颜色#e6e6e6
10

$ medium-grey

它用于中灰色UI项目.

颜色#cacaca
11

$ dark-grey

它用于深灰色UI项目s.

颜色#8a8a8a
12

$ black

它用于黑色UI项目.

颜色#0a0a0a
13

$ white

它用于白色UI项目.

颜色#fefefe
14

$ body-background

它代表身体的背景颜色.

颜色$ white
15

$ body-font-color

它代表身体的文字颜色.

颜色$ black
16

$ body-font-family

它代表正文的字体列表.

列表'Helvetica Neue',Helvetica,Roboto,Arial,sans-serif
17

$ body-antialiased

通过使用CSS属性 -webkit-font-smoothing 将此属性设置为 true 来启用抗锯齿类型-moz-osx-font-smoothing .

Booleantrue
18

$ global-margin

它代表组件的全球保证金价值.

数字1rem
19

$ global-padding

它表示组件的全局填充值.

Number1 rem
20

$ global-margin

它代表组件之间使用的全球保证金值.

数字1rem
21

$ global-weight-normal

它代表正常类型的全局字体粗细.

关键字或数字正常
22

$ global-weight-bold

它表示粗体类型的全局字体粗细.

关键字或数字粗体
23

$ global-radius

它表示具有边界半径的所有元素的全局值.

数字0
24

$ global-text-direction

它设置文本CSS的方向 ltr rtl


ltr