8-point-grid 中文文档教程
8点scss网格系统。
Installation
npm install 8-point-grid --save
在您的构建中包含 scss 或使用具有默认设置的编译 css 文件。
Config
根据您的喜好自定义变量。
$prefixwhatever prefix you want, leave this empty if you want -classname$sizenumber of pixels you want your grid to be, ofc we use 8 :ok_hand:$multiplieriterations of the size$size * $multiplier$lineline-height multiplierline-height: $size * $multiplier * $line
Usage
类名结构 .$prefix-prop-$multiplier
Avalible props
Margin
m - margin
mt - margin-top
mr - margin-right
mb - margin-bottom
ml - margin-left
my - margin-top, margin-bottom
mx - margin-left, margin-right
Padding
p - padding
pt - padding-top
pr - padding-right
pb - padding-bottom
pl - padding-left
py - padding-top, padding-bottom
px - padding-left, padding-right
Size
w - width
h - height
s - width, height
Type
fs - font-size
lh - line-height
Example
所以如果你想要 8px margin-top，它的：pg-mt-1
或者 64px font-size 是：pg-fs-8
Sketch
这个 repo 还包含一个带有 8 点网格的 Sketch 文件。 下载 Sketch 文件
将 sketch 中的元素微移 8px ，转到 Sketch -> Preferences 并在最后一次输入中将移动对象设置为 8。
What is a 8 point grid?
- https://spec.fm/specifics/8-pt-grid
- https://blog.prototypr.io/the-8pt-grid-consistent-spacing-in-ui-design-with-sketch-577e4f0fd520
- https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632
- https://medium.com/sketch-app-sources/8-point-soft-grids-in-sketch-e8f1d5ca2cd4
- https://material.io/guidelines/layout/metrics-keylines.html#metrics-keylines-baseline-grids
- http://harmony.intuit.com/grid/
The 8 point scss grid system.
Installation
npm install 8-point-grid --save
Include scss in your build or use the compiled css file with the default settings.
Config
Customize variables to your liking.
$prefixwhatever prefix you want, leave this empty if you want -classname$sizenumber of pixels you want your grid to be, ofc we use 8 :ok_hand:$multiplieriterations of the size$size * $multiplier$lineline-height multiplierline-height: $size * $multiplier * $line
Usage
Class name structure .$prefix-prop-$multiplier
Avalible props
Margin
m - margin
mt - margin-top
mr - margin-right
mb - margin-bottom
ml - margin-left
my - margin-top, margin-bottom
mx - margin-left, margin-right
Padding
p - padding
pt - padding-top
pr - padding-right
pb - padding-bottom
pl - padding-left
py - padding-top, padding-bottom
px - padding-left, padding-right
Size
w - width
h - height
s - width, height
Type
fs - font-size
lh - line-height
Example
So if you want 8px margin-top, its: pg-mt-1
Or 64px font-size is: pg-fs-8
Sketch
This repo also contains a Sketch file with an 8 point grid. Download Sketch file
To nudge a element in sketch 8px, go to Sketch -> Preferences and set move objects to 8 in the last input.
What is a 8 point grid?
- https://spec.fm/specifics/8-pt-grid
- https://blog.prototypr.io/the-8pt-grid-consistent-spacing-in-ui-design-with-sketch-577e4f0fd520
- https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632
- https://medium.com/sketch-app-sources/8-point-soft-grids-in-sketch-e8f1d5ca2cd4
- https://material.io/guidelines/layout/metrics-keylines.html#metrics-keylines-baseline-grids
- http://harmony.intuit.com/grid/
