https://github.com/primer/primer-css
Primer is GitHub's design system. This is the CSS implementation
https://github.com/primer/primer-css
css design-system design-systems framework meta primer primer-css sass styleguide ui-components
Last synced: 9 months ago
JSON representation
Primer is GitHub's design system. This is the CSS implementation
- Host: GitHub
- URL: https://github.com/primer/primer-css
- Owner: primer
- License: mit
- Created: 2015-03-19T23:31:21.000Z (over 10 years ago)
- Default Branch: main
- Last Pushed: 2025-02-11T05:49:10.000Z (10 months ago)
- Last Synced: 2025-02-11T09:33:17.876Z (10 months ago)
- Topics: css, design-system, design-systems, framework, meta, primer, primer-css, sass, styleguide, ui-components
- Language: SCSS
- Homepage: https://primer.style/css
- Size: 35 MB
- Stars: 12,613
- Watchers: 247
- Forks: 1,236
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
- awesome-web-development - **Primer CSS** - Primer is the CSS toolkit that powers GitHub's front-end design. It's purposefully limited to common components to provide our developers with the most flexibility, and to keep GitHub uniquely *GitHubby*. It's built with SCSS and available via NPM, so it's easy to include all or part of it within your own project
README
Primer CSS
The CSS implementation of GitHub's Primer Design System
## Documentation
> :warning: It is encouraged that you use [primer/react](https://github.com/primer/react) and [primer/view_components](https://github.com/primer/view_components) for styling and markup.
> :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/)
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.
## Install
This repository is distributed with [npm]. After [installing npm][install-npm], you can install `@primer/css` with this command:
```sh
npm install --save @primer/css
```
## Usage
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:
```scss
@import "@primer/css/index.scss";
```
You can import individual Primer modules directly from the `@primer/css` package:
```scss
@import "@primer/css/core/index.scss";
@import "@primer/css/product/index.scss";
@import "@primer/css/marketing/index.scss";
```
## Development
See [DEVELOP.md](DEVELOP.md) for development docs.
## Releasing (for GitHub staff)
You can find docs about our release process in [RELEASING.md](RELEASING.md).
## License
[MIT](./LICENSE) © [GitHub](https://github.com/)
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
[npm]: https://www.npmjs.com/
[primer]: https://primer.style/
[sass]: http://sass-lang.com/