2019-02-22 00:42:43 +03:00
< p align = "center" >
2022-02-17 17:46:40 +03:00
< img width = "300px" alt = "" src = "./docs/src/readme.png" >
2019-02-22 00:42:43 +03:00
< / 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 >
2021-04-01 23:36:44 +03:00
< a aria-label = "build status" href = "https://github.com/primer/css/actions/workflows/ci.yml" >
< img alt = "" src = "https://github.com/primer/css/actions/workflows/ci.yml/badge.svg" >
< / a >
2019-02-22 00:42:43 +03:00
< a aria-label = "contributors graph" href = "https://github.com/primer/css/graphs/contributors" >
2022-02-17 17:46:40 +03:00
< img alt = "" src = "https://img.shields.io/github/contributors/primer/css.svg" >
2019-02-22 00:42:43 +03:00
< / 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 >
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
2021-04-01 23:36:44 +03:00
## Documentation
2023-01-24 15:58:58 +03:00
> :warning: **The documentation of this repo is not maintained anymore**. Please raise any documentation-specific pull requests in [primer.style/design](https://github.com/primer/design/)
2021-04-01 23:36:44 +03:00
Our documentation site lives at [primer.style/css ](https://primer.style/css ). You'll be able to find detailed documentation on getting started, all of the components, our theme, our principles, and more.
2019-02-19 21:00:27 +03:00
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
2021-04-01 23:36:44 +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
2021-06-10 06:09:59 +03:00
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)
2021-06-10 06:09:59 +03:00
You can find docs about our release process in [RELEASING.md ](RELEASING.md ).
2018-05-11 22:16:08 +03:00
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/