1
1
mirror of https://github.com/primer/css.git synced 2024-09-20 13:17:29 +03:00
css/modules/primer-marketing-support
2018-06-13 16:48:56 -07:00
..
lib forgot about $spacer-12 2018-01-04 15:33:36 -08:00
.npmignore rename packages directory to modules 2017-06-29 12:49:16 -07:00
index.scss add new variables explicitly, remove x directional spacing from loop 2017-11-17 12:06:01 -08:00
LICENSE Happy new year 2018-01-03 15:05:16 -08:00
package-lock.json Adding package-lock.json back 2018-06-13 16:48:56 -07:00
package.json Publish 2018-06-13 16:02:32 -07:00
README.md update marketing variables links 2018-05-04 14:30:44 -07:00

Primer Marketing Support

npm version Build Status

Support files are Sass variables, mixins, and functions that we import into different bases for use across components, objects, and utilities. Sharing these common properties across GitHub sites helps us to keep our styles more consistent.

Most of the time to include these you'll only need to add @import "./primer-marketing-support"; to the top of your bundle. If you want only a specific partial you can import them separately.

This repository is a module of the full primer repository.

Install

This repository is distributed with npm. After installing npm, you can install support with this command.

$ npm install --save support

Usage

The source files included are written in Sass (scss) You can simply point your sass include-path at your node_modules directory and import it like this.

@import "primer-marketing-support/index.scss";

You can also import specific portions of the module by importing those partials from the /lib/ folder. Make sure you import any requirements along with the modules.

Documentation

Extended spacing scale

This module extends the primer-core spacing scale for marketing site needs. These are useful for achieving bigger vertical spacing between sections on marketing sites.

Starting where the primer-core spacing scale ends at spacer 6, the marketing scale first steps up with 8px for spacer 7 then steps in increments of 16px from spacer 8 up to 12.

Scale Value
7 48
8 64
9 80
10 96
11 112
12 128

See primer-marketing-support for the extended spacing scale used for marketing needs and the related y-axis spacing utilities for margin and padding.

License

MIT © GitHub