2019-02-22 00:42:43 +03:00
< p align = "center" >
< img width = "300px" src = "./static/readme.png" >
< / p >
2015-03-21 02:30:22 +03:00
2019-02-22 00:42:43 +03:00
< h1 align = "center" > Primer CSS< / h1 >
< p align = "center" > The CSS implementation of GitHub's Primer Design System< / p >
< p align = "center" >
< a aria-label = "npm package" href = "https://www.npmjs.com/package/@primer/css" >
< img alt = "" src = "https://img.shields.io/npm/v/@primer/css.svg" >
< / a >
< a aria-label = "contributors graph" href = "https://github.com/primer/css/graphs/contributors" >
< img src = "https://img.shields.io/github/contributors/primer/css.svg" >
< / a >
2021-03-22 08:34:44 +03:00
< a aria-label = "last commit" href = "https://github.com/primer/css/commits/main" >
2019-02-22 00:42:43 +03:00
< img alt = "" src = "https://img.shields.io/github/last-commit/primer/css.svg" >
< / a >
< a aria-label = "join us in spectrum" href = "https://spectrum.chat/primer" >
< img alt = "" src = "https://withspectrum.github.io/badge/badge.svg" >
< / a >
2021-03-22 08:34:44 +03:00
< a aria-label = "license" href = "https://github.com/primer/css/blob/main/LICENSE" >
2019-02-22 00:42:43 +03:00
< img src = "https://img.shields.io/github/license/primer/css.svg" alt = "" >
< / a >
< / p >
2016-05-25 21:56:43 +03:00
2019-02-19 21:00:27 +03:00
## Migrating
:rotating_light: **If you currently use the `primer` or `primer-`-prefixed npm packages, please read [the migration guide](MIGRATING.md)!**
2015-03-21 02:30:22 +03:00
## Install
2019-02-09 03:45:01 +03:00
This repository is distributed with [npm]. After [installing npm][install-npm], you can install `@primer/css` with this command:
2015-03-21 02:30:22 +03:00
2017-06-22 21:56:50 +03:00
```sh
2019-02-05 00:14:07 +03:00
$ npm install --save @primer/css
2015-03-21 02:30:22 +03:00
```
2016-05-25 21:56:43 +03:00
## Usage
2019-02-09 03:45:01 +03:00
The included source files are written in [Sass] using SCSS syntax. After [installing ](#install ) with npm, you can add your project's `node_modules` directory to your Sass [include paths ](https://github.com/sass/node-sass#includepaths ) (AKA [load paths ](http://technology.customink.com/blog/2014/10/09/understanding-and-using-sass-load-paths/ ) in Ruby), then import it like this:
2015-03-21 02:30:22 +03:00
```scss
2019-02-05 00:14:07 +03:00
@import "@primer/css/index.scss";
2015-03-21 02:30:22 +03:00
```
2019-02-05 00:14:07 +03:00
You can import individual Primer modules directly from the `@primer/css` package:
2017-06-22 22:32:28 +03:00
```scss
2019-02-05 00:14:07 +03:00
@import "@primer/css/core/index.scss";
@import "@primer/css/product/index.scss";
@import "@primer/css/marketing/index.scss";
2017-06-22 22:32:28 +03:00
```
2018-10-19 02:49:05 +03:00
## Development
See [DEVELOP.md ](./DEVELOP.md ) for development docs.
2015-03-21 02:30:22 +03:00
2019-02-09 03:45:01 +03:00
## Releasing (for GitHub staff)
2018-05-14 19:46:46 +03:00
You can find docs about our release process in [RELEASING.md ](./RELEASING.md ).
2018-05-11 22:16:08 +03:00
2016-06-02 16:39:45 +03:00
## Documentation
2019-02-15 22:02:02 +03:00
The [Primer CSS docs site ](https://primer.style/css ) is deployed from this repo with [primer/deploy ](https://github.com/primer/deploy ). See [the development docs ](DEVELOP.md#docs-site ) for more info.
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
2019-02-09 03:45:01 +03:00
2016-05-25 21:56:43 +03:00
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
2019-02-05 00:14:07 +03:00
[npm]: https://www.npmjs.com/
2020-10-15 00:53:02 +03:00
[primer]: https://primer.style/
2016-05-25 21:56:43 +03:00
[sass]: http://sass-lang.com/