From 7a9ca91d2c7e349632c524bfba6c415a7bd9e9e3 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Wed, 7 Aug 2019 15:09:55 -0700 Subject: [PATCH 1/2] add bundle README generator, template --- script/generate-bundle-readmes | 21 +++++++++++++++++++++ src/README.template.md | 25 +++++++++++++++++++++++++ 2 files changed, 46 insertions(+) create mode 100755 script/generate-bundle-readmes create mode 100644 src/README.template.md diff --git a/script/generate-bundle-readmes b/script/generate-bundle-readmes new file mode 100755 index 0000000000..db636c2926 --- /dev/null +++ b/script/generate-bundle-readmes @@ -0,0 +1,21 @@ +#!/usr/bin/env node +const {dirname, join} = require('path') +const globby = require('globby') +const {exists, readFile, writeFile} = require('fs-extra') + +Promise.all([ + readFile('src/README.template.md', 'utf8'), + globby('src/*/index.scss') +]).then(async ([template, indexes]) => { + for (const indexPath of indexes) { + const dir = dirname(indexPath) + const parts = dir.split('/') + const bundle = parts.pop() + const readmePath = join(dir, 'README.md') + await writeFile(readmePath, getReadmeContents(bundle), 'utf8') + } + + function getReadmeContents(bundle) { + return template.replace(/{bundle}/g, bundle) + } +}) diff --git a/src/README.template.md b/src/README.template.md new file mode 100644 index 0000000000..f8515f44ac --- /dev/null +++ b/src/README.template.md @@ -0,0 +1,25 @@ +--- +bundle: "{bundle}" +generated: true +--- + +# Primer CSS: `{bundle}` bundle + +## Usage + +Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with: + +```scss +@import "@primer/css/{bundle}/index.scss"; +``` + +## Build + +The `@primer/css` npm package includes a standalone CSS build of this module in `dist/{bundle}.css`. + +## License + +[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) + + +[scss]: https://sass-lang.com/documentation/syntax#scss From 0a5e90b274a0f94c36221d3a829a5c48a8e61ec5 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Wed, 7 Aug 2019 15:10:11 -0700 Subject: [PATCH 2/2] regenerate bundle readmes --- src/alerts/README.md | 33 +++++++++++---------------------- src/avatars/README.md | 34 +++++++++++----------------------- src/base/README.md | 33 +++++++++++---------------------- src/blankslate/README.md | 34 +++++++++++----------------------- src/box/README.md | 34 +++++++++++----------------------- src/branch-name/README.md | 34 +++++++++++----------------------- src/breadcrumb/README.md | 30 +++++++++++++++++------------- src/buttons/README.md | 34 +++++++++++----------------------- src/core/README.md | 34 +++++++++++----------------------- src/forms/README.md | 34 +++++++++++----------------------- src/labels/README.md | 34 +++++++++++----------------------- src/layout/README.md | 34 +++++++++++----------------------- src/markdown/README.md | 34 +++++++++++----------------------- src/marketing/README.md | 34 +++++++++++----------------------- src/navigation/README.md | 34 +++++++++++----------------------- src/pagination/README.md | 26 ++++++++++++-------------- src/popover/README.md | 35 +++++++++++------------------------ src/product/README.md | 34 +++++++++++----------------------- src/progress/README.md | 34 +++++++++++----------------------- src/select-menu/README.md | 29 +++++++++++++++++++++++++---- src/subhead/README.md | 36 +++++++++++------------------------- src/support/README.md | 30 ++++++++++++------------------ src/table-object/README.md | 35 +++++++++++------------------------ src/toasts/README.md | 26 +++++++++++++++++++++++++- src/tooltips/README.md | 35 +++++++++++------------------------ src/truncate/README.md | 35 +++++++++++------------------------ src/utilities/README.md | 34 +++++++++++----------------------- 27 files changed, 333 insertions(+), 560 deletions(-) diff --git a/src/alerts/README.md b/src/alerts/README.md index 3b6c2a4797..6dc24b83b6 100644 --- a/src/alerts/README.md +++ b/src/alerts/README.md @@ -1,36 +1,25 @@ -# Primer Alerts -> Flash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don’t show more than one at a time. +--- +bundle: "alerts" +generated: true +--- -This repository is a module of the full [Primer CSS][primer] repository. +# Primer CSS: `alerts` bundle ## Usage -The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. +Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with: ```scss -@import "primer-alerts/index.scss"; +@import "@primer/css/alerts/index.scss"; ``` -You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ - ## Build -For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package. - -``` -$ npm run build -``` - -## Documentation - -Find further documentation at [primer.style/css/components/alerts](https://primer.style/css/components/alerts). +The `@primer/css` npm package includes a standalone CSS build of this module in `dist/alerts.css`. ## License -[MIT](./LICENSE) © [GitHub](https://github.com/) +[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) + -[primer]: https://github.com/primer/css -[docs]: https://primer.style/css -[npm]: https://www.npmjs.com/ -[install-npm]: https://docs.npmjs.com/getting-started/installing-node -[sass]: http://sass-lang.com/ +[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/src/avatars/README.md b/src/avatars/README.md index ce817c3f6b..8fa16ff43c 100644 --- a/src/avatars/README.md +++ b/src/avatars/README.md @@ -1,37 +1,25 @@ -# Primer Avatars +--- +bundle: "avatars" +generated: true +--- -> Avatars are images that users can set as their profile picture. On GitHub, they’re always going to be rounded squares. They can be custom photos, uploaded by users, or generated as Identicons as a placeholder. - -This repository is a module of the full [primer][primer] repository. +# Primer CSS: `avatars` bundle ## Usage -The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. +Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with: ```scss -@import "primer-avatars/index.scss"; +@import "@primer/css/avatars/index.scss"; ``` -You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ - ## Build -For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package. - -``` -$ npm run build -``` - -## Documentation - -Find further documentation at [primer.style/css/components/avatars](https://primer.style/css/components/avatars). +The `@primer/css` npm package includes a standalone CSS build of this module in `dist/avatars.css`. ## License -[MIT](./LICENSE) © [GitHub](https://github.com/) +[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) + -[primer]: https://github.com/primer/css -[docs]: https://primer.style/css -[npm]: https://www.npmjs.com/ -[install-npm]: https://docs.npmjs.com/getting-started/installing-node -[sass]: http://sass-lang.com/ +[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/src/base/README.md b/src/base/README.md index efd735051c..4961486221 100644 --- a/src/base/README.md +++ b/src/base/README.md @@ -1,36 +1,25 @@ -# Primer Base -> GitHub's CSS to reset the browsers default styles. Built on top of normalize.css +--- +bundle: "base" +generated: true +--- -This repository is a module of the full [primer][primer] repository. And is built off of [normalize.css](https://github.com/necolas/normalize.css/) +# Primer CSS: `base` bundle ## Usage -The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. +Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with: ```scss -@import "primer-base/index.scss"; +@import "@primer/css/base/index.scss"; ``` -You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ - ## Build -For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package. - -``` -$ npm run build -``` - -## Documentation - -You can read more about base in the [docs][docs]. +The `@primer/css` npm package includes a standalone CSS build of this module in `dist/base.css`. ## License -[MIT](./LICENSE) © [GitHub](https://github.com/) +[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) + -[primer]: https://github.com/primer/css -[docs]: https://primer.style/css -[npm]: https://www.npmjs.com/ -[install-npm]: https://docs.npmjs.com/getting-started/installing-node -[sass]: http://sass-lang.com/ +[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/src/blankslate/README.md b/src/blankslate/README.md index 3cff75b19b..65962ed703 100644 --- a/src/blankslate/README.md +++ b/src/blankslate/README.md @@ -1,37 +1,25 @@ -# Primer Blankslate +--- +bundle: "blankslate" +generated: true +--- -> Blankslates are for when there is a lack of content within a page or section. Use them as placeholders to tell users why something isn’t there. Be sure to provide an action to add content as well. - -This repository is a module of the full [primer][primer] repository. +# Primer CSS: `blankslate` bundle ## Usage -The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. +Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with: ```scss -@import "primer-blankslate/index.scss"; +@import "@primer/css/blankslate/index.scss"; ``` -You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ - ## Build -For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package. - -``` -$ npm run build -``` - -## Documentation - -Find further documentation at [primer.style/css/components/blankslate](https://primer.style/css/components/blankslate). +The `@primer/css` npm package includes a standalone CSS build of this module in `dist/blankslate.css`. ## License -[MIT](./LICENSE) © [GitHub](https://github.com/) +[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) + -[primer]: https://github.com/primer/css -[docs]: https://primer.style/css -[npm]: https://www.npmjs.com/ -[install-npm]: https://docs.npmjs.com/getting-started/installing-node -[sass]: http://sass-lang.com/ +[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/src/box/README.md b/src/box/README.md index b210f8217b..30851460ce 100644 --- a/src/box/README.md +++ b/src/box/README.md @@ -1,37 +1,25 @@ -# Primer box +--- +bundle: "box" +generated: true +--- -> Box is a module for creating rounded-corner boxes with a white background and gray borders. Box has optional element styles for headers, lists, and footers. - -This repository is a module of the full [primer][primer] repository. +# Primer CSS: `box` bundle ## Usage -The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. +Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with: ```scss -@import "primer-box/index.scss"; +@import "@primer/css/box/index.scss"; ``` -You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ - ## Build -For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package. - -``` -$ npm run build -``` - -## Documentation - -Find further documentation at [primer.style/css/components/box](https://primer.style/css/components/box). +The `@primer/css` npm package includes a standalone CSS build of this module in `dist/box.css`. ## License -[MIT](./LICENSE) © [GitHub](https://github.com/) +[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) + -[primer]: https://github.com/primer/css -[docs]: https://primer.style/css -[npm]: https://www.npmjs.com/ -[install-npm]: https://docs.npmjs.com/getting-started/installing-node -[sass]: http://sass-lang.com/ +[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/src/branch-name/README.md b/src/branch-name/README.md index da35d3c68e..8408e26c66 100644 --- a/src/branch-name/README.md +++ b/src/branch-name/README.md @@ -1,37 +1,25 @@ -# Primer / Branch Name +--- +bundle: "branch-name" +generated: true +--- -> A nice, consistent way to display branch names. - -This repository is a module of the full [primer][primer] repository. +# Primer CSS: `branch-name` bundle ## Usage -The source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. +Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with: ```scss -@import "primer-branch-name/index.scss"; +@import "@primer/css/branch-name/index.scss"; ``` -You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ - ## Build -For a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package: - -``` -$ npm run build -``` - -## Documentation - -Find further documentation at [primer.style/css/components/branch-name](https://primer.style/css/components/branch-name). +The `@primer/css` npm package includes a standalone CSS build of this module in `dist/branch-name.css`. ## License -[MIT](./LICENSE) © [GitHub](https://github.com/) +[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) + -[primer]: https://github.com/primer/css -[docs]: https://primer.style/css -[npm]: https://www.npmjs.com/ -[install-npm]: https://docs.npmjs.com/getting-started/installing-node -[sass]: http://sass-lang.com/ +[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/src/breadcrumb/README.md b/src/breadcrumb/README.md index 31a5fbb32d..0abb273563 100644 --- a/src/breadcrumb/README.md +++ b/src/breadcrumb/README.md @@ -1,21 +1,25 @@ -# Primer Breadcrumb Navigation +--- +bundle: "breadcrumb" +generated: true +--- -> Breadcrumb navigation for GitHub's pages with parents / grandparents. +# Primer CSS: `breadcrumb` bundle -This repository is a module of the full [primer][primer] repository. +## Usage -## Documentation +Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with: -Find further documentation at [primer.style/css/components/breadcrumb](https://primer.style/css/components/breadcrumb). +```scss +@import "@primer/css/breadcrumb/index.scss"; +``` + +## Build + +The `@primer/css` npm package includes a standalone CSS build of this module in `dist/breadcrumb.css`. ## License -MIT © [GitHub](https://github.com/) +[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) + -[primer]: https://github.com/primer/css -[primer-support]: https://github.com/primer/css-support -[support]: https://github.com/primer/css-support -[docs]: https://primer.style/css -[npm]: https://www.npmjs.com/ -[install-npm]: https://docs.npmjs.com/getting-started/installing-node -[sass]: http://sass-lang.com/ +[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/src/buttons/README.md b/src/buttons/README.md index 41c34496c7..3489e3adea 100644 --- a/src/buttons/README.md +++ b/src/buttons/README.md @@ -1,37 +1,25 @@ -# Primer Buttons +--- +bundle: "buttons" +generated: true +--- -> Buttons are used for actions, like in forms, while textual hyperlinks are used for destinations, or moving from one page to another. - -This repository is a module of the full [primer][primer] repository. +# Primer CSS: `buttons` bundle ## Usage -The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. +Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with: ```scss -@import "primer-buttons/index.scss"; +@import "@primer/css/buttons/index.scss"; ``` -You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ - ## Build -For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package. - -``` -$ npm run build -``` - -## Documentation - -Find further documentation at [primer.style/css/components/buttons](https://primer.style/css/components/buttons). +The `@primer/css` npm package includes a standalone CSS build of this module in `dist/buttons.css`. ## License -[MIT](./LICENSE) © [GitHub](https://github.com/) +[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) + -[primer]: https://github.com/primer/css -[docs]: https://primer.style/css -[npm]: https://www.npmjs.com/ -[install-npm]: https://docs.npmjs.com/getting-started/installing-node -[sass]: http://sass-lang.com/ +[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/src/core/README.md b/src/core/README.md index 2011931bfe..8d14b44adc 100644 --- a/src/core/README.md +++ b/src/core/README.md @@ -1,37 +1,25 @@ -# Primer Core +--- +bundle: "core" +generated: true +--- -> Primer core is one of 3 meta-packages that belong to the Primer framework. Primer core contains packages that are shared between GitHub product and marketing websites. - -This repository is a compilation of [several CSS packages](https://github.com/primer/css). You can break it down into smaller sections using npm. +# Primer CSS: `core` bundle ## Usage -The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. +Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with: ```scss -@import "primer-core/index.scss"; +@import "@primer/css/core/index.scss"; ``` -You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ - ## Build -For a compiled **CSS** version of this module, an npm script is included that will output a CSS version to `build/build.css` The built CSS file is also included in the npm package. - -``` -$ npm run build -``` - -## Documentation - -You can read more about primer in the [docs][docs]. +The `@primer/css` npm package includes a standalone CSS build of this module in `dist/core.css`. ## License -[MIT](./LICENSE) © [GitHub](https://github.com/) +[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) + -[primer]: https://github.com/primer/css -[docs]: https://primer.style/css -[npm]: https://www.npmjs.com/ -[install-npm]: https://docs.npmjs.com/getting-started/installing-node -[sass]: http://sass-lang.com/ +[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/src/forms/README.md b/src/forms/README.md index 1d72f65f11..e092504c2c 100644 --- a/src/forms/README.md +++ b/src/forms/README.md @@ -1,37 +1,25 @@ -# Primer Forms +--- +bundle: "forms" +generated: true +--- -> Style individual form controls and utilize common layouts. - -This repository is a module of the full [primer][primer] repository. +# Primer CSS: `forms` bundle ## Usage -The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. +Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with: ```scss -@import "primer-forms/index.scss"; +@import "@primer/css/forms/index.scss"; ``` -You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ - ## Build -For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package. - -``` -$ npm run build -``` - -## Documentation - -Find further documentation at [primer.style/css/components/forms](https://primer.style/css/components/forms). +The `@primer/css` npm package includes a standalone CSS build of this module in `dist/forms.css`. ## License -[MIT](./LICENSE) © [GitHub](https://github.com/) +[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) + -[primer]: https://github.com/primer/css -[docs]: https://primer.style/css -[npm]: https://www.npmjs.com/ -[install-npm]: https://docs.npmjs.com/getting-started/installing-node -[sass]: http://sass-lang.com/ +[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/src/labels/README.md b/src/labels/README.md index 523c80c63e..c9fe44620e 100644 --- a/src/labels/README.md +++ b/src/labels/README.md @@ -1,37 +1,25 @@ -# Primer Labels +--- +bundle: "labels" +generated: true +--- -> Labels add metadata or indicate status of items and navigational elements. - -This repository is a module of the full [primer][primer] repository. +# Primer CSS: `labels` bundle ## Usage -The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. +Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with: ```scss -@import "primer-labels/index.scss"; +@import "@primer/css/labels/index.scss"; ``` -You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ - ## Build -For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package. - -``` -$ npm run build -``` - -## Documentation - -Find further documentation at [primer.style/css/components/labels](https://primer.style/css/components/labels). +The `@primer/css` npm package includes a standalone CSS build of this module in `dist/labels.css`. ## License -[MIT](./LICENSE) © [GitHub](https://github.com/) +[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) + -[primer]: https://github.com/primer/css -[docs]: https://primer.style/css -[npm]: https://www.npmjs.com/ -[install-npm]: https://docs.npmjs.com/getting-started/installing-node -[sass]: http://sass-lang.com/ +[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/src/layout/README.md b/src/layout/README.md index 25f69d2533..3d078ce96b 100644 --- a/src/layout/README.md +++ b/src/layout/README.md @@ -1,37 +1,25 @@ -# Primer Layout +--- +bundle: "layout" +generated: true +--- -> Primer’s layout includes basic page containers and a single-tiered, fraction-based grid system. That sounds more complicated than it really is though—it’s just containers, rows, and columns. - -This repository is a module of the full [primer][primer] repository. +# Primer CSS: `layout` bundle ## Usage -The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. +Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with: ```scss -@import "primer-layout/index.scss"; +@import "@primer/css/layout/index.scss"; ``` -You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ - ## Build -For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package. - -``` -$ npm run build -``` - -## Documentation - -Find further documentation at [primer.style/css/objects/layout](https://primer.style/css/objects/layout). +The `@primer/css` npm package includes a standalone CSS build of this module in `dist/layout.css`. ## License -[MIT](./LICENSE) © [GitHub](https://github.com/) +[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) + -[primer]: https://github.com/primer/css -[docs]: https://primer.style/css -[npm]: https://www.npmjs.com/ -[install-npm]: https://docs.npmjs.com/getting-started/installing-node -[sass]: http://sass-lang.com/ +[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/src/markdown/README.md b/src/markdown/README.md index 82f8d92bb3..6097f4b67b 100644 --- a/src/markdown/README.md +++ b/src/markdown/README.md @@ -1,37 +1,25 @@ -# Primer Markdown +--- +bundle: "markdown" +generated: true +--- -> Stylesheets for rendering GitHub Flavored Markdown and syntax highlighted code snippets. - -This repository is a module of the full [primer][primer] repository. +# Primer CSS: `markdown` bundle ## Usage -The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. +Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with: ```scss -@import "primer-markdown/index.scss"; +@import "@primer/css/markdown/index.scss"; ``` -You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ - ## Build -For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package. - -``` -$ npm run build -``` - -## Documentation - -Find further documentation at [primer.style/css/components/markdown](https://primer.style/css/components/markdown). +The `@primer/css` npm package includes a standalone CSS build of this module in `dist/markdown.css`. ## License -[MIT](./LICENSE) © [GitHub](https://github.com/) +[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) + -[primer]: https://github.com/primer/css -[docs]: https://primer.style/css -[npm]: https://www.npmjs.com/ -[install-npm]: https://docs.npmjs.com/getting-started/installing-node -[sass]: http://sass-lang.com/ +[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/src/marketing/README.md b/src/marketing/README.md index cb825619ce..44f2885a41 100755 --- a/src/marketing/README.md +++ b/src/marketing/README.md @@ -1,37 +1,25 @@ -# Primer marketing +--- +bundle: "marketing" +generated: true +--- -> Primer marketing is one of 3 meta-packages that belong to the Primer framework. Primer marketing contains packages that are used on GitHub marketing websites. - -This repository is a compilation of [several CSS packages](https://github.com/primer/css). You can break it down into smaller sections using npm. +# Primer CSS: `marketing` bundle ## Usage -The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. +Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with: ```scss -@import "primer-marketing/index.scss"; +@import "@primer/css/marketing/index.scss"; ``` -You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ - ## Build -For a compiled **css** version of this module, a npm script is included that will output a CSS version to `build/build.css` The built CSS file is also included in the npm package. - -``` -$ npm run build -``` - -## Documentation - -You can read more about primer in the [docs][docs]. +The `@primer/css` npm package includes a standalone CSS build of this module in `dist/marketing.css`. ## License -[MIT](./LICENSE) © [GitHub](https://github.com/) +[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) + -[primer]: https://github.com/primer/css -[docs]: https://primer.style/css -[npm]: https://www.npmjs.com/ -[install-npm]: https://docs.npmjs.com/getting-started/installing-node -[sass]: http://sass-lang.com/ +[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/src/navigation/README.md b/src/navigation/README.md index df1ae4247b..bf7ef02193 100644 --- a/src/navigation/README.md +++ b/src/navigation/README.md @@ -1,37 +1,25 @@ -# Primer Navigation +--- +bundle: "navigation" +generated: true +--- -> Primer comes with several navigation components. Some were designed with singular purposes, while others were design to be more flexible and appear quite frequently. - -This repository is a module of the full [primer][primer] repository. +# Primer CSS: `navigation` bundle ## Usage -The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. +Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with: ```scss -@import "primer-navigation/index.scss"; +@import "@primer/css/navigation/index.scss"; ``` -You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ - ## Build -For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package. - -``` -$ npm run build -``` - -## Documentation - -Find further documentation at [primer.style/css/components/navigation](https://primer.style/css/components/navigation). +The `@primer/css` npm package includes a standalone CSS build of this module in `dist/navigation.css`. ## License -[MIT](./LICENSE) © [GitHub](https://github.com/) +[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) + -[primer]: https://github.com/primer/css -[docs]: https://primer.style/css -[npm]: https://www.npmjs.com/ -[install-npm]: https://docs.npmjs.com/getting-started/installing-node -[sass]: http://sass-lang.com/ +[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/src/pagination/README.md b/src/pagination/README.md index dbe5e84f05..cb41808bd8 100644 --- a/src/pagination/README.md +++ b/src/pagination/README.md @@ -1,27 +1,25 @@ -# Primer Pagination +--- +bundle: "pagination" +generated: true +--- -> Pagination component for applying button styles to a connected set of links that go to related pages - -This repository is a module of the full [primer][primer] repository. +# Primer CSS: `pagination` bundle ## Usage -The source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. +Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with: ```scss -@import "primer-pagination/index.scss"; +@import "@primer/css/pagination/index.scss"; ``` -You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ - ## Build -For a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package: +The `@primer/css` npm package includes a standalone CSS build of this module in `dist/pagination.css`. -``` -$ npm run build -``` +## License + +[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) -## Documentation -Find further documentation at [primer.style/css/components/pagination](https://primer.style/css/components/pagination). +[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/src/popover/README.md b/src/popover/README.md index af81c98e02..3fd2e7314e 100644 --- a/src/popover/README.md +++ b/src/popover/README.md @@ -1,38 +1,25 @@ -# Primer Popover +--- +bundle: "popover" +generated: true +--- -> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page. - -This repository is a module of the full [primer][primer] repository. +# Primer CSS: `popover` bundle ## Usage -The source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. +Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with: ```scss -@import "primer-popover/index.scss"; +@import "@primer/css/popover/index.scss"; ``` -You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ - ## Build -For a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package: - -``` -$ npm run build -``` - -## Documentation - -Find further documentation at [primer.style/css/components/popover](https://primer.style/css/components/popover). - +The `@primer/css` npm package includes a standalone CSS build of this module in `dist/popover.css`. ## License -[MIT](./LICENSE) © [GitHub](https://github.com/) +[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) + -[primer]: https://github.com/primer/css -[docs]: https://primer.style/css -[npm]: https://www.npmjs.com/ -[install-npm]: https://docs.npmjs.com/getting-started/installing-node -[sass]: http://sass-lang.com/ +[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/src/product/README.md b/src/product/README.md index ce7030b630..1bb7cc1415 100644 --- a/src/product/README.md +++ b/src/product/README.md @@ -1,37 +1,25 @@ -# Primer product +--- +bundle: "product" +generated: true +--- -> Primer product is one of 3 meta-packages that belong to the Primer framework. Primer product contains packages that are used on GitHub product websites. - -This repository is a compilation of [several CSS packages](https://github.com/primer/css). You can break it down into smaller sections using npm. +# Primer CSS: `product` bundle ## Usage -The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. +Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with: ```scss -@import "primer-product/index.scss"; +@import "@primer/css/product/index.scss"; ``` -You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ - ## Build -For a compiled **CSS** version of this module, a npm script is included that will output a CSS version to `build/build.css` The built CSS file is also included in the npm package. - -``` -$ npm run build -``` - -## Documentation - -You can read more about primer in the [docs][docs]. +The `@primer/css` npm package includes a standalone CSS build of this module in `dist/product.css`. ## License -[MIT](./LICENSE) © [GitHub](https://github.com/) +[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) + -[primer]: https://github.com/primer/css -[docs]: https://primer.style/css -[npm]: https://www.npmjs.com/ -[install-npm]: https://docs.npmjs.com/getting-started/installing-node -[sass]: http://sass-lang.com/ +[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/src/progress/README.md b/src/progress/README.md index f62b9493c4..255a2febf6 100644 --- a/src/progress/README.md +++ b/src/progress/README.md @@ -1,37 +1,25 @@ -# Primer / Progress +--- +bundle: "progress" +generated: true +--- -> Use Progress components to visualize task completion - -This repository is a module of the full [primer][primer] repository. +# Primer CSS: `progress` bundle ## Usage -The source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. +Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with: ```scss -@import "primer-progress/index.scss"; +@import "@primer/css/progress/index.scss"; ``` -You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ - ## Build -For a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package: - -``` -$ npm run build -``` -## Documentation - -Find further documentation at [primer.style/css/components/progress](https://primer.style/css/components/progress). - +The `@primer/css` npm package includes a standalone CSS build of this module in `dist/progress.css`. ## License -[MIT](./LICENSE) © [GitHub](https://github.com/) +[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) + -[primer]: https://github.com/primer/css -[docs]: https://primer.style/css -[npm]: https://www.npmjs.com/ -[install-npm]: https://docs.npmjs.com/getting-started/installing-node -[sass]: http://sass-lang.com/ +[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/src/select-menu/README.md b/src/select-menu/README.md index b7f234a410..ca1c9151de 100644 --- a/src/select-menu/README.md +++ b/src/select-menu/README.md @@ -1,4 +1,25 @@ -# Select Menu -- [Live documentation](https://primer.style/css/components/select-menu) -- [Documentation source](../../pages/css/components/select-menu.md) -- [Style source](./select-menu.scss) +--- +bundle: "select-menu" +generated: true +--- + +# Primer CSS: `select-menu` bundle + +## Usage + +Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with: + +```scss +@import "@primer/css/select-menu/index.scss"; +``` + +## Build + +The `@primer/css` npm package includes a standalone CSS build of this module in `dist/select-menu.css`. + +## License + +[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) + + +[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/src/subhead/README.md b/src/subhead/README.md index cb5a11d6b2..2f8a8d188c 100644 --- a/src/subhead/README.md +++ b/src/subhead/README.md @@ -1,39 +1,25 @@ -# Primer / Subhead - -> The Subhead is a simple header with a bottom border. It's designed to be used on settings and configuration pages. - -This repository is a module of the full [primer][primer] repository. +--- +bundle: "subhead" +generated: true +--- +# Primer CSS: `subhead` bundle ## Usage -The source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. +Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with: ```scss -@import "primer-subhead/index.scss"; +@import "@primer/css/subhead/index.scss"; ``` -You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ - ## Build -For a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package: - -``` -$ npm run build -``` - -## Documentation - -Find further documentation at [primer.style/css/components/subhead](https://primer.style/css/components/subhead). - +The `@primer/css` npm package includes a standalone CSS build of this module in `dist/subhead.css`. ## License -[MIT](./LICENSE) © [GitHub](https://github.com/) +[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) + -[primer]: https://github.com/primer/css -[docs]: https://primer.style/css -[npm]: https://www.npmjs.com/ -[install-npm]: https://docs.npmjs.com/getting-started/installing-node -[sass]: http://sass-lang.com/ +[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/src/support/README.md b/src/support/README.md index f20f5f7b8d..7fa2b211c2 100644 --- a/src/support/README.md +++ b/src/support/README.md @@ -1,31 +1,25 @@ -# Primer Support +--- +bundle: "support" +generated: true +--- -> Support files are Sass variables, mixins, and functions that we import into different bases for use across components, objects, and utilities. Sharing these common properties across GitHub sites helps us to keep our styles more consistent. -> -> Most of the time to include these you'll only need to add `@import "support/support";` to the top of your bundle. If you want only a specific partial you can import them separately. - -This repository is a module of the full [primer][primer] repository. +# Primer CSS: `support` bundle ## Usage -The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. +Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with: ```scss -@import "primer-support/index.scss"; +@import "@primer/css/support/index.scss"; ``` -You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ - -## Documentation +## Build -Find further documentation at [primer.style/css/support](https://primer.style/css/support). +The `@primer/css` npm package includes a standalone CSS build of this module in `dist/support.css`. ## License -[MIT](./LICENSE) © [GitHub](https://github.com/) +[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) + -[primer]: https://github.com/primer/css -[docs]: https://primer.style/css/support -[npm]: https://www.npmjs.com/ -[install-npm]: https://docs.npmjs.com/getting-started/installing-node -[sass]: http://sass-lang.com/ +[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/src/table-object/README.md b/src/table-object/README.md index cc8c93edf0..148fab21e5 100644 --- a/src/table-object/README.md +++ b/src/table-object/README.md @@ -1,38 +1,25 @@ -# Primer table object +--- +bundle: "table-object" +generated: true +--- -> Table object is a module for creating dynamically resizable elements that always sit on the same horizontal line (e.g., they never break to a new line). Using table styles in our CSS means it’s cross browser friendly back to at least IE9. - -This repository is a module of the full [primer][primer] repository. +# Primer CSS: `table-object` bundle ## Usage -The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. +Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with: ```scss -@import "primer-table-object/index.scss"; +@import "@primer/css/table-object/index.scss"; ``` -You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ - ## Build -For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package. - -``` -$ npm run build -``` - -## Documentation - -Find further documentation at [primer.style/css/objects/table-object](https://primer.style/css/objects/table-object). - +The `@primer/css` npm package includes a standalone CSS build of this module in `dist/table-object.css`. ## License -[MIT](./LICENSE) © [GitHub](https://github.com/) +[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) + -[primer]: https://github.com/primer/css -[docs]: https://primer.style/css -[npm]: https://www.npmjs.com/ -[install-npm]: https://docs.npmjs.com/getting-started/installing-node -[sass]: http://sass-lang.com/ +[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/src/toasts/README.md b/src/toasts/README.md index 5850a7421b..0915129623 100644 --- a/src/toasts/README.md +++ b/src/toasts/README.md @@ -1 +1,25 @@ -# Primer Toasts +--- +bundle: "toasts" +generated: true +--- + +# Primer CSS: `toasts` bundle + +## Usage + +Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with: + +```scss +@import "@primer/css/toasts/index.scss"; +``` + +## Build + +The `@primer/css` npm package includes a standalone CSS build of this module in `dist/toasts.css`. + +## License + +[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) + + +[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/src/tooltips/README.md b/src/tooltips/README.md index 6475cfef07..67f22ab6a5 100644 --- a/src/tooltips/README.md +++ b/src/tooltips/README.md @@ -1,38 +1,25 @@ -# Primer Tooltips +--- +bundle: "tooltips" +generated: true +--- -> Add tooltips built entirely in CSS to nearly any element. Just add a few classes and an aria-label attribute. - -This repository is a module of the full [primer][primer] repository. +# Primer CSS: `tooltips` bundle ## Usage -The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. +Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with: ```scss -@import "primer-tooltips/index.scss"; +@import "@primer/css/tooltips/index.scss"; ``` -You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ - ## Build -For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package. - -``` -$ npm run build -``` - -## Documentation - -Find further documentation at [primer.style/css/components/tooltips](https://primer.style/css/components/tooltips). - +The `@primer/css` npm package includes a standalone CSS build of this module in `dist/tooltips.css`. ## License -[MIT](./LICENSE) © [GitHub](https://github.com/) +[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) + -[primer]: https://github.com/primer/css -[docs]: https://primer.style/css -[npm]: https://www.npmjs.com/ -[install-npm]: https://docs.npmjs.com/getting-started/installing-node -[sass]: http://sass-lang.com/ +[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/src/truncate/README.md b/src/truncate/README.md index 0472e7deca..ae6f88ea4a 100644 --- a/src/truncate/README.md +++ b/src/truncate/README.md @@ -1,38 +1,25 @@ -# Primer Truncate +--- +bundle: "truncate" +generated: true +--- -> .css-truncate will shorten text with an ellipsis. The maximum width of the truncated text can be changed by overriding the max-width of the .css-truncate-target. - -This repository is a module of the full [primer][primer] repository. +# Primer CSS: `truncate` bundle ## Usage -The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. +Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with: ```scss -@import "primer-truncate/index.scss"; +@import "@primer/css/truncate/index.scss"; ``` -You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ - ## Build -For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package. - -``` -$ npm run build -``` - -## Documentation - -Find further documentation at [primer.style/css/components/truncate](https://primer.style/css/components/truncate). - +The `@primer/css` npm package includes a standalone CSS build of this module in `dist/truncate.css`. ## License -[MIT](./LICENSE) © [GitHub](https://github.com/) +[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) + -[primer]: https://github.com/primer/css -[docs]: https://primer.style/css -[npm]: https://www.npmjs.com/ -[install-npm]: https://docs.npmjs.com/getting-started/installing-node -[sass]: http://sass-lang.com/ +[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/src/utilities/README.md b/src/utilities/README.md index 1472e603a6..95eade23fd 100644 --- a/src/utilities/README.md +++ b/src/utilities/README.md @@ -1,37 +1,25 @@ -# Primer Utilities +--- +bundle: "utilities" +generated: true +--- -> There are a handful of utilities in Primer for quick behaviors, floats, colors, alignment, and more. - -This repository is a module of the full [primer][primer] repository. +# Primer CSS: `utilities` bundle ## Usage -The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. +Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with: ```scss -@import "primer-utilities/index.scss"; +@import "@primer/css/utilities/index.scss"; ``` -You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._ - ## Build -For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package. - -``` -$ npm run build -``` - -## Documentation - -Find further documentation at [primer.style/css/utilities](https://primer.style/css/utilities). +The `@primer/css` npm package includes a standalone CSS build of this module in `dist/utilities.css`. ## License -[MIT](./LICENSE) © [GitHub](https://github.com/) +[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) + -[primer]: https://github.com/primer/css -[docs]: https://primer.style/css -[npm]: https://www.npmjs.com/ -[install-npm]: https://docs.npmjs.com/getting-started/installing-node -[sass]: http://sass-lang.com/ +[scss]: https://sass-lang.com/documentation/syntax#scss