1b5ff950cc
- primer-alerts@1.5.9 - primer-avatars@1.5.6 - primer-base@1.7.4 - primer-blankslate@1.4.9 - primer-box@2.5.9 - primer-branch-name@1.0.7 - primer-breadcrumb@1.5.5 - primer-buttons@2.6.0 - primer-core@6.10.3 - primer-forms@2.1.4 - primer-labels@1.5.9 - primer-layout@1.4.9 - primer-markdown@3.7.9 - primer-marketing-buttons@1.0.8 - primer-marketing-type@1.4.9 - primer-marketing-utilities@1.6.5 - primer-marketing@6.2.4 - primer-navigation@1.5.7 - primer-page-headers@1.4.9 - primer-page-sections@1.4.9 - primer-pagination@1.0.3 - primer-popover@0.1.3 - primer-product@5.6.6 - primer-subhead@1.0.7 - primer-support@4.6.0 - primer-table-object@1.4.9 - primer-tables@1.4.9 - primer-tooltips@1.5.7 - primer-truncate@1.4.9 - primer-utilities@4.12.0 - primer@10.8.0 - generator-primer-module@1.0.8 - primer-module-build@1.0.5 - stylelint-config-primer@2.2.10 - stylelint-selector-no-utility@1.8.10 |
||
---|---|---|
.. | ||
app | ||
test | ||
package-lock.json | ||
package.json | ||
README.md |
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
repository -
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
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