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.

• $prefix whatever prefix you want, leave this empty if you want -classname
• $size number of pixels you want your grid to be, ofc we use 8 :ok_hand:
• $multiplier iterations of the size $size * $multiplier
• $line line-height multiplier line-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

See all classes

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/