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.
In the Monorepo
cdto the top level directory of the
Run: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
grepif you don't have
npm install --save generator-primer-module
You'll also need to install the
npm install -g yo
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
npm testcommand will not work, because it references a test spec in the monorepo.
To run the generator, just pass
primer-module to the
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