# @nib-styles/v2-typography

> nib styled typography

Latest version **5.0.0** (published 2017-03-08) · 0 weekly downloads

## Install

```sh
npm install @nib-styles/v2-typography
pnpm add @nib-styles/v2-typography
yarn add @nib-styles/v2-typography
bun add @nib-styles/v2-typography
```

## 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 | 5.0.0 |
| Published | 2017-03-08 |
| First published | 2015-11-19 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | andrewoh, appclay, becamay, cmayson, cstonestreet, e-r-w, eastwood, glyn, iknowcss, infl3x, jameslnewell, kthomas, lauriejones, lurch83, mattbourke, matthew-turner, nford_nib, nib-build-agent, nib-mmurphy, nib-styles-admin, qimyi, ranjukj, samjeffress, sheakelly, sonnymai, tomasmckinless, wfalconer |

## Links

- npm: https://www.npmjs.com/package/@nib-styles/v2-typography
- Repository: https://github.com/nib-styles/v2-typography
- Homepage: https://github.com/nib-styles/v2-typography#readme
- Issues: https://github.com/nib-styles/v2-typography/issues
- npm.io page: https://npm.io/package/@nib-styles/v2-typography

## Dependencies (2)

- [@nib-styles/colors](https://npm.io/package/@nib-styles/colors.md) ^1.1.1
- [@nib-styles/v2-icons](https://npm.io/package/@nib-styles/v2-icons.md) ^3.0.0

## Recent versions

- 5.0.0 (latest) — 2017-03-08
- 4.0.0-fluid.1 (fluid) — 2016-02-01
- 4.3.0 — 2016-12-13
- 1.0.3 — 2016-07-25
- 4.2.1 — 2016-06-14
- 4.2.0 — 2016-05-09
- 4.1.0 — 2016-05-09
- 4.0.2 — 2016-03-10
- 4.0.1 — 2016-03-07
- 4.0.0 — 2016-03-01
- 3.1.0 — 2016-02-24
- 3.0.2 — 2015-12-17
- 3.0.1 — 2015-12-15
- 3.0.0 — 2015-12-15
- 2.2.0 — 2015-11-19

## README

# @nib-styles/v2-typography

nib styled typography

## Installation

    npm install --save @nib-styles/v2-typography

**Note**: Requires `Opens Sans` and `Roboto` fonts from Google Fonts:

```html
<link rel='stylesheet' href='//fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto:300,700' />
```

## Usage

### Using mixins

```scss
@import "@nib-styles/v2-typography";

.product {

  &__title {
    @include title(2, $color: 'grey', $pad: true)
  }

  &__description {
    @include copy($color: 'grey', $pad: true)
  }

  &__link {
    @include link($color: 'green')
  }

}
```

```html
<div class="product">
    <h2 class="product__title">Top</h2>
    <p class="product__description">
      The best hospital cover you can get.
      <a class="product__link">Join now!</a>
    </p>
</div>
```

### Using compiled classes

```scss
@import "@nib-styles/v2-typography/compiled";
```

```html
<div class="v2-article">
    <h2 class="v2-title v2-title--2 v2-title--color-doc">Top</h2>
    <p class="v2-copy">
      The best hospital cover you can get.
      <a class="v2-link v2-link--green">Join now!</a>
    </p>
</div>
```

## Mixins

```scss
@include title($size, $color : null, $padding : false)
```

- `$size` Required. An integer from `1-4`.

- `$color` Optional. May be `grey`, `green` or `white`. If no color is provided the title will inherit the color from its parent element.

- `$padding` Optional. If `true` an amount of top and bottom margin is applied.

```scss
@include copy($size : null, $color : null, $padding : false)
```

- `$size` Optional. May be `small` or `large`.

- `$color` Optional. May be `grey`, `green` or `white`. If no color is provided the title will inherit the color from its parent element.

 `$padding` Optional. If `true` an amount of top and bottom margin is applied.


```scss
@include link($color : null)
```

- `$color` Optional. May be `green`, `grey` or `white`. If no color is provided the title will inherit the color from its parent element.

## Functions

```scss
text-color-disabled($color)
```

- `$color` Required. The normal text color.

## Changelog

### 5.0.0

- break: bump version of `v2-icons`

### v4.3.0

- fix: colour should default to `currentColour` when no color is specified


### v4.2.0

- add: a reusable function for generating the disabled text color

### v4.0.2

- fix: both color names and color name strings work for `title()`, `copy()` and `link()` mixins e.g. `copy($color: green)`, `copy($color: 'green')`

### v4.0.1

- fix: bumped the package version to display the latest readme on npmjs.com

### v4.0.0

- break: `copy()` color defaults to inherit
- break: `title()`, `copy()` and `link()` mixins error if they receive an invalid param
- add: `copy()` size configurable via mixin
- add: `$font-copy` and `$font-title` variables
- fix/break: `link()`/`.v2-link` now has font specified so it doesn't have to be inside a `v2-copy` block
- fix: `title()` padding should be dependent on the title size
- fix: issues with mixins comparing strings and color names
- fix: documentation

### v2.3.0

- Mixins!!

### v2.2.0

- Setting `color: inherit` on `.v2-link` by default

---
_Source: https://npm.io/package/@nib-styles/v2-typography · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._