mirror of
https://github.com/primer/css.git
synced 2024-12-15 15:34:02 +03:00
108 lines
2.9 KiB
Markdown
108 lines
2.9 KiB
Markdown
|
# Primer CSS Module Generator
|
||
|
|
||
|
[![npm version](http://img.shields.io/npm/v/generator-primer-module.svg)](https://www.npmjs.org/package/generator-primer-module)
|
||
|
[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css)
|
||
|
|
||
|
Primer is the CSS framework that powers GitHub's front-end design. This is a
|
||
|
[Yeoman] generator that we use to scaffold new Primer modules.
|
||
|
|
||
|
## Usage
|
||
|
|
||
|
### In the Monorepo
|
||
|
|
||
|
1. `cd` to the top level directory of the `primer-css` repository
|
||
|
1. Run:
|
||
|
|
||
|
```sh
|
||
|
npm run new-module
|
||
|
```
|
||
|
|
||
|
You can also pass the module name as a positional argument like this:
|
||
|
|
||
|
```sh
|
||
|
npm run new-module -- primer-module-name
|
||
|
```
|
||
|
|
||
|
1. Answer the interactive prompts.
|
||
|
|
||
|
> If you don't know some of the answers (aside from the module name, which
|
||
|
> is required), it's okay to press <kbd>enter</kbd> or <kbd>return</kbd>.
|
||
|
|
||
|
1. If all goes well, the new module will be bootstrapped and ready to use. You
|
||
|
should see a directory with this structure:
|
||
|
|
||
|
```
|
||
|
modules/primer-module-name/
|
||
|
├── LICENSE
|
||
|
├── README.md
|
||
|
├── index.scss
|
||
|
├── lib
|
||
|
│ └── module-name.scss
|
||
|
└── package.json
|
||
|
```
|
||
|
|
||
|
1. If you have any TODOs left from unanswered prompts, fill them out! You can
|
||
|
list them again with:
|
||
|
|
||
|
```sh
|
||
|
ack TODO modules/primer-module-name
|
||
|
```
|
||
|
|
||
|
(Note: you can use `grep` if you don't have `ack` installed.)
|
||
|
|
||
|
|
||
|
### Standalone installation
|
||
|
|
||
|
This repository is distributed with [npm][npm]. After [installing
|
||
|
npm][install-npm], you can install `generator-primer-module` with this command.
|
||
|
|
||
|
```sh
|
||
|
npm install --save generator-primer-module
|
||
|
```
|
||
|
|
||
|
You'll also need to install the [`yo` CLI](https://github.com/yeoman/yo):
|
||
|
|
||
|
```sh
|
||
|
npm install -g yo
|
||
|
```
|
||
|
|
||
|
### Standalone usage
|
||
|
|
||
|
It's possible to use this generator to create "standalone" Primer modules that
|
||
|
live outside of the Primer CSS monorepo, with the following caveats:
|
||
|
|
||
|
* When prompted to add the new module to existing meta-packages, you will need
|
||
|
to un-select them all.
|
||
|
* You will also need to manually install all of the monorepo's top-level dev
|
||
|
dependencies to get tools like `primer-module-build` and `ava`.
|
||
|
* The `npm test` command will not work, because it references a test spec in
|
||
|
the monorepo.
|
||
|
|
||
|
To run the generator, just pass `primer-module` to the `yo` CLI:
|
||
|
|
||
|
```sh
|
||
|
yo primer-module
|
||
|
```
|
||
|
|
||
|
Then answer the interactiv prompts. **Note that, unlike most other generators,
|
||
|
this one creates a new directory with the provided module name in the current
|
||
|
working directory.**
|
||
|
|
||
|
You can also pass the module name as a positional argument, as in:
|
||
|
|
||
|
```sh
|
||
|
yo primer-module primer-foo-bar
|
||
|
```
|
||
|
|
||
|
|
||
|
## License
|
||
|
|
||
|
[MIT](./LICENSE) © [GitHub](https://github.com/)
|
||
|
|
||
|
[primer]: https://github.com/primer/primer
|
||
|
[docs]: http://primercss.io/
|
||
|
[npm]: https://www.npmjs.com/
|
||
|
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
||
|
[sass]: http://sass-lang.com/
|
||
|
[yeoman]: http://yeoman.io
|