README
Primer Module Generator
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
cd
to the top level directory of theprimer
repositoryRun:
npm run new-module
You can also pass the module name as a positional argument like this:
npm run new-module -- primer-module-name
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 enter or return.
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
If you have any TODOs left from unanswered prompts, fill them out! You can list them again with:
ack TODO modules/primer-module-name
(Note: you can use
grep
if you don't haveack
installed.)
Standalone installation
This repository is distributed with npm. After installing
npm, you can install generator-primer-module
with this command.
npm install --save generator-primer-module
You'll also need to install the yo
CLI:
npm install -g yo
Standalone usage
It's possible to use this generator to create "standalone" Primer modules that live outside of the Primer 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 devDependencies to get tools like
primer-module-build
andava
. - 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:
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:
yo primer-module primer-foo-bar