Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 22 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,25 +22,42 @@ The Primer CSS repo is managed as a monorepo that is composed of many npm packag

This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-css` with this command.

```
```sh
$ npm install --save primer-css
```

## Usage

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.
The source files included are written in [Sass][sass] (SCSS). You can point your Sass `include-path` at your project's `node_modules` directory and import it like this:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'll have this provided already with the website-starter repo, but others might not know what include-path is. Can we give context on this for Jekyll, or link to an example?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call. Can we link to a URL about Sass include paths more generally?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @mdo. @shawnbot Would you be down to open a new pr? This doesn't have to hold up the new release today, but should be added.


```scss
@import "primer-css/index.scss";
```

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._
You can import individual Primer modules by installing them each with npm, for instance:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

installing them with instead of installing them each with?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can fix that one the new release pr.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed here: 59fea15


## Build
```sh
$ npm install --save primer-navigation
```

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.
Then, you would import the module with:

```scss
@import "primer-navigation/index.scss";
```

Or, while you're figuring out which modules you need, you can import them directly from the `primer-css` [`packages` directory](./packages) like so:

```scss
@import "primer-css/packages/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.

```sh
$ npm run build
```

Expand Down