080a7979ca
- primer-alerts@1.5.2 - primer-avatars@1.4.2 - primer-base@1.6.0 - primer-blankslate@1.4.2 - primer-box@2.5.2 - primer-branch-name@1.0.0 - primer-breadcrumb@1.4.2 - primer-buttons@2.5.0 - primer-core@6.5.0 - primer-forms@2.0.0 - primer-labels@1.5.2 - primer-layout@1.4.2 - primer-markdown@3.7.2 - primer-marketing-buttons@1.0.0 - primer-marketing-support@1.3.2 - primer-marketing-type@1.4.2 - primer-marketing-utilities@1.5.0 - primer-marketing@6.0.0 - primer-navigation@1.5.0 - primer-page-headers@1.4.2 - primer-page-sections@1.4.2 - primer-popover@0.0.2 - primer-product@5.5.0 - primer-subhead@1.0.0 - primer-support@4.4.2 - primer-table-object@1.4.2 - primer-tables@1.4.2 - primer-tooltips@1.4.2 - primer-truncate@1.4.2 - primer-utilities@4.8.2 - primer@10.0.0 - generator-primer-module@1.0.1 - stylelint-config-primer@2.2.1 - stylelint-selector-no-utility@1.8.1 |
||
---|---|---|
.. | ||
app | ||
test | ||
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 dev
dependencies 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