# phase2-brand-stylekit

> Phase2 Brand Stylekit

Latest version **1.2.1** (published 2016-08-23) · 0 weekly downloads

## Install

```sh
npm install phase2-brand-stylekit
pnpm add phase2-brand-stylekit
yarn add phase2-brand-stylekit
bun add phase2-brand-stylekit
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.1 |
| Published | 2016-08-23 |
| First published | 2016-08-10 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Evan Lovely |
| Maintainers | evanlovely |
| Keywords | pattern-lab, phase2 |

## Links

- npm: https://www.npmjs.com/package/phase2-brand-stylekit
- Repository: https://github.com/phase2/phase2-brand-stylekit
- Homepage: https://github.com/phase2/phase2-brand-stylekit#readme
- Issues: https://github.com/phase2/phase2-brand-stylekit/issues
- npm.io page: https://npm.io/package/phase2-brand-stylekit

## Recent versions

- 1.2.1 (latest) — 2016-08-23
- 1.2.0 — 2016-08-17
- 1.1.2 — 2016-08-17
- 1.1.1 — 2016-08-16
- 1.1.0 — 2016-08-12
- 1.0.2 — 2016-08-10
- 1.0.0 — 2016-08-10

## README

# [Phase2](http://phase2technology.com) Brand Stylekit

This has two main use cases:

1. To be installed as a `npm` dependency in other projects and used in scss files via `@import()` to be able to use Phase2 brand colors, typography, etc.
2. Clone this repo, and work on the styles for others to use in option 1. The best way to demonstrate the design system that is available via CSS is with [Pattern Lab](http://patternlab.io) in our opinion, so that is included here (though not in option 1).

# Use as `npm` dependency

## Install

    npm install --save phase2-brand-stylekit

Assuming you have a `scss/` folder next to `node_modules`; in the `scss/style.scss` file you would include:

```scss
@import "../node_modules/phase2-brand-stylekit/scss/core";
```

### Usage

After importing it into your scss, you'll have access to variables and mixins that you can use. This **will not** generate any CSS by simply including; you still need to use the mixins and variables in your desired CSS selectors.

Documentation for use can be found in these two places:

- [Pattern Lab](http://brand.phase2technology.com/patternlab/public)
- [SassDoc](http://brand.phase2technology.com/patternlab/dest/sassdoc)

---

# Using this repo's Pattern Lab

## QuickStart

After cloning the repo and `cd`-ing into it:

    npm install
    npm run setup
    npm start

## Orientation

- `pattern-lanb/source/_patterns/` - contains all Pattern Lab templates and the majority of the Sass files.
- `scss/` - Sass files that aren't really tied to a component, so not in the above location.
- `images/icons/src/` - all SVGs here are combined into font icons and have classes and Sass mixins made for each based on file name. See `atoms/images/icons` in Pattern Lab.

## Commands

Compile everything:

```bash
npm run compile
```

Start up watches and local server after compiling:

```bash
npm run start # or `npm start`
```

## Deploying

Simply pushing to `master` will compile and deploy the site to <http://brand.phase2technology.com/patternlab/public/>

---
_Source: https://npm.io/package/phase2-brand-stylekit · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._