2016-05-25 21:56:43 +03:00
# Primer CSS
2015-03-21 02:30:22 +03:00
2016-05-25 21:56:43 +03:00
[![NPM version ](http://img.shields.io/npm/v/primer-css.svg )](https://www.npmjs.org/package/primer-css)
2017-01-03 16:36:39 +03:00
[![Build Status ](https://travis-ci.org/primer/primer-css.svg?branch=master )](https://travis-ci.org/primer/primer-css)
2015-03-21 02:30:22 +03:00
2017-06-12 18:57:51 +03:00
Primer is the CSS framework that powers GitHub's front-end design. Primer CSS 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.
2015-03-21 02:30:22 +03:00
2017-06-10 01:15:42 +03:00
## Packages
2017-06-12 18:57:51 +03:00
The Primer CSS repo is managed as a monorepo that is composed of many NPM packages.
2017-06-10 01:15:42 +03:00
### Core Packages
2017-06-12 18:39:05 +03:00
| Package | Version |
|---|---|
| ** [primer-css ](/packages/primer-css )** < br /> Includes all 23 packages | [![npm ](http://img.shields.io/npm/v/primer-css.svg )](https://www.npmjs.com/package/primer-css) |
| [primer-core ](/packages/primer-core ) | [![npm ](http://img.shields.io/npm/v/primer-core.svg )](https://www.npmjs.com/package/primer-core) |
| [primer-product ](/packages/primer-product ) | [![npm ](http://img.shields.io/npm/v/primer-product.svg )](https://www.npmjs.com/package/primer-product) |
| [primer-marketing ](/packages/primer-marketing ) | [![npm ](http://img.shields.io/npm/v/primer-marketing.svg )](https://www.npmjs.com/package/primer-marketing) |
2016-05-25 21:56:43 +03:00
2015-03-21 02:30:22 +03:00
## Install
2016-05-25 21:56:43 +03:00
This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-css` with this command.
2015-03-21 02:30:22 +03:00
2015-05-26 10:03:29 +03:00
```
2016-05-03 00:19:35 +03:00
$ npm install --save primer-css
2015-03-21 02:30:22 +03:00
```
2016-05-25 21:56:43 +03:00
## Usage
2015-03-21 02:30:22 +03:00
2016-05-25 21:56:43 +03:00
The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
2015-03-21 02:30:22 +03:00
```scss
2016-05-25 21:56:43 +03:00
@import "primer-css/index.scss";
2015-03-21 02:30:22 +03:00
```
2016-05-25 21:56:43 +03:00
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._
2015-03-21 02:30:22 +03:00
2016-05-25 21:56:43 +03:00
## Build
2015-03-21 02:30:22 +03:00
2017-06-12 18:57:51 +03:00
For a compiled **CSS** version of this module, a 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.
2015-03-21 02:30:22 +03:00
2016-05-25 21:56:43 +03:00
```
$ npm run build
2015-03-21 02:30:22 +03:00
```
2016-06-02 16:39:45 +03:00
## Documentation
2016-05-25 21:56:43 +03:00
2016-06-02 16:39:45 +03:00
You can read more about primer in the [docs][docs].
2015-03-21 02:30:22 +03:00
## License
2016-06-02 16:39:45 +03:00
[MIT ](./LICENSE ) © [GitHub ](https://github.com/ )
2016-05-25 21:56:43 +03:00
2016-06-02 16:39:45 +03:00
[primer]: https://github.com/primer/primer
2016-05-25 21:56:43 +03:00
[docs]: http://primercss.io/
[npm]: https://www.npmjs.com/
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
[sass]: http://sass-lang.com/