Sass variables, mixins, and functions for use in our components.


Keywords
primer, css, github, design-system, mixins, functions, variables, scss, design-systems, framework, sass, ui-components
License
MIT
Install
npm install primer-support@4.8.0-alpha.f7b11c63

Documentation

Primer

npm version Build Status

Primer is the design system that powers GitHub. Primer includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project.

Packages

The Primer repo is managed as a monorepo that is composed of many npm packages.

Core Packages

Package Version
primer
Includes all 23 packages
npm
primer-core npm
primer-product npm
primer-marketing npm

Install

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

$ npm install --save primer

Usage

The source files included are written in Sass (SCSS). After installing with npm, you can add your project's node_modules directory to your Sass include paths (AKA load paths in Ruby), then import it like this:

@import "primer/index.scss";

You can import individual Primer modules by installing them with npm, for instance:

$ npm install --save primer-navigation

Then, you would import the module with:

@import "primer-navigation/index.scss";

Development

See DEVELOP.md for development docs.

Releasing (Staff only)

You can find docs about our release process in RELEASING.md.

Documentation

Primer CSS documentation is published to the GitHub Style Guide.

License

MIT © GitHub