primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2025-01-09 00:07:49 +03:00
Code Issues Projects Releases Wiki Activity

update index and getting started

Browse Source
This commit is contained in:
Emily Plummer 2019-06-05 16:07:18 -07:00
parent 07f948a433
commit f518d20e2d
2 changed files with 19 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
pages/css/getting-started/index.md
View File

@ -25,6 +25,19 @@ Install the Primer CSS npm package modules by running `npm install @primer/css`.
npm install @primer/css --save
```
### Paths
Here's what you need to know about how the files are structured in both git and in the published npm module:
* In git, all of the SCSS source files live in the `src/` directory.
* When published, all of the files in `src/` are "hoisted" to the package root so that you can import, say, utilities with:
```scss
@import "@primer/css/utilities/index.scss";
```
* All bundle interdependencies within Primer CSS are defined as relative imports (e.g. with `../`), so everything should work fine as long as the `@primer/css` directory is in one of your Sass include paths (i.e. `node_modules`).
### For a Jekyll site
Make sure you have [Jekyll](https://jekyllrb.com/) version `3.3.1` or greater with:

24
pages/css/index.md
View File

@ -47,30 +47,18 @@ Primer CSS is built upon systems that form the foundation of our styles such as
<PrimitivesOverview />
## Primer CSS bundles
Each component or group of styles is distributed via npm as a separate CSS file, or "bundle". We also distribute "meta-packages" for core (shared) elements, product-specific (github.com) styles, and marketing.
<PrimerPackageBox meta={bundles.primer} count={Object.keys(bundles).length - 1} mb={4} />
<Flex justifyContent="space-around" mb={6}>
<MetaPackageBox title="Core" meta={bundles.core} width={1/3}>
The core bundle contains styles that are shared between GitHub product and marketing websites.
</MetaPackageBox>
<MetaPackageBox title="Product" meta={bundles.product} width={1/3}>
The product bundle contains styles that are used on GitHub product websites.
</MetaPackageBox>
<MetaPackageBox title="Marketing" meta={bundles.marketing} width={1/3}>
The marketing bundle contains styles that are used on GitHub marketing websites.
</MetaPackageBox>
</Flex>
## Structure
Primer CSS is published to [npm] as [@primer/css]. Each of Primer CSS's "modules" lives in a subfolder under `src/` with an `index.scss` in it. Generally speaking, the styles are divided into three primary themes:
* **Core** styles (in `core/`) are common dependencies, which include support variables, native element and typography styles, buttons, navigation, tooltips, etc.
* **Product** styles (in `product/`) are specific to github.com, and include components such as avatars, labels, markdown styles, popovers, and progress indicators.
* **Marketing** styles (in `marketing/`) are specific to GitHub marketing efforts, including international and event-focused sites as well as the more design-heavy feature pages on github.com. Marketing styles include new colors and button styles, and extend the core typography and whitespace scales.
<div class="bg-gray py-6">
<div class="d-flex flex-wrap flex-md-nowrap px-6 gutter-lg">
<div class="col-12 col-md-9 pr-0 pr-lg-2">
<h3 class="f3 text-normal m-0">Use Primer CSS in your project</h3>
<p class="my-3">Pick and choose what you need. Install the entire Primer CSS bundle or individual packages via npm.</p>
<p class="my-3">Pick and choose what you need. Install the entire Primer CSS bundle or import individual folders.</p>
<a href="/css/getting-started" class="btn btn-outline">Installation instructions</a>
</div>
</div>