Join 10350+ others. No spamming.
I promise!

Follow us at github.


primer/primer-css

5656

primer / primer-css

CSS

The base coat of GitHub. Our internal CSS toolkit and guidelines.


READ ME

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";

Or, while you're figuring out which modules you need, you can import them directly from the primer packages directory like so:

@import "primer/modules/primer-navigation/index.css";

Build

For a compiled CSS version of this module, an npm script is included that will output a CSS version to build/build.css. The built CSS file is also included in the npm package.

$ npm run build

Documentation

You can read more about primer in the docs.

License

MIT © GitHub