npm package: @getbase/typography-helpers
Description: Base Typography Helpers
Author: Matthew Hartman
Latest version: 4.1.0

# [Base Typography Helpers](http://getbase.org)

Base Typography Helpers is designed in a way where you can add it on top of the Base CSS framework or to your own custom project.

[![Travis Build Status][travis-img]][travis] [![David Dependencies Status][david-img]][david]

[travis-img]:   https://img.shields.io/travis/getbase/typography-helpers.svg?branch=master
[david-img]:    https://img.shields.io/david/dev/getbase/typography-helpers.svg?branch=master&label=dependencies
[travis]:       https://travis-ci.org/getbase/typography-helpers
[david]:        https://david-dm.org/getbase/typography-helpers?type=dev

* * *

## Table of contents

* [Overview](#overview)
* [Installation](#installation)
* [Documentation](#documentation)
* [Demo](#demo)
* [Support](#support)
* [Authors](#authors)
* [License](#license)

* * *

## Overview

Base Typography Helpers contains styles for adjusting font weights, text transformations and aligning copy for all breakpoints.

* * *

## Installation

If you have an existing project and would like to include the Base typography helpers module, run the following command:

```bash
npm install --save @getbase/typography-helpers
```

Once you have the typography helpers module installed, you can include it in your CSS/LESS/SCSS file with one of the following ways:

#### CSS Import:
  ```css
  @import url("https://unpkg.com/@getbase/typography-helpers/index.css");
  ```

#### SCSS Import:

  ```scss
  /* Import Base Typography Helpers */
  @import "@getbase/typography-helpers/scss/index";
  /* Your Other Styles */
  @import "main"
  ```


#### LESS Import:

  ```css
  /* Import Base Typography Helpers */
  @import "@getbase/typography-helpers/less/index";
  /* Your Other Styles */
  @import "main"
  ```

* * *

## Documentation

Base Typography Helpers includes styles for font weights (`.font-100 - .font-900`), text transformations (`.uppercase`, `.lowercase`, `capitalize`) and aligning copy for all breakpoints (`.text-right`, `.text-right-m`, etc)

#### Helpers (Applies to SCSS/LESS)

| Helper Class | Purpose | Example | Outcome |
| ------------ | ------- | ------- | ------- |
| `.font-100` | Apply a font weight of `100` | `<h2 class="font-100">Heading</h2>` | Applies a font weight of `100` to a `h2` element |
| `.font-200` | Apply a font weight of `200` | `<h2 class="font-200">Heading</h2>` | Applies a font weight of `200` to a `h2` element |
| `.font-300` | Apply a font weight of `300` | `<h2 class="font-300">Heading</h2>` | Applies a font weight of `300` to a `h2` element |
| `.font-400` | Apply a font weight of `400` | `<h2 class="font-400">Heading</h2>` | Applies a font weight of `400` to a `h2` element |
| `.font-500` | Apply a font weight of `500` | `<h2 class="font-500">Heading</h2>` | Applies a font weight of `500` to a `h2` element |
| `.font-600` | Apply a font weight of `600` | `<h2 class="font-600">Heading</h2>` | Applies a font weight of `600` to a `h2` element |
| `.font-700` | Apply a font weight of `700` | `<h2 class="font-700">Heading</h2>` | Applies a font weight of `700` to a `h2` element |
| `.font-800` | Apply a font weight of `800` | `<h2 class="font-800">Heading</h2>` | Applies a font weight of `800` to a `h2` element |
| `.font-900` | Apply a font weight of `900` | `<h2 class="font-900">Heading</h2>` | Applies a font weight of `900` to a `h2` element |
| `.no-select` | Disables selection | `<body class="no-select">...</body>` | Disabled user from selecting text on a web page |
| `.uppercase` | Apply a text transformation of `uppercase` | `<h3 class="uppercase">Heading</h3>` | Applies a text transformation of `uppercase` to a `h3` element |
| `.lowercase` | Apply a text transformation of `lowercase` | `<h3 class="lowercase">Heading</h3>` | Applies a text transformation of `lowercase` to a `h3` element |
| `.capitalize` | Apply a text transformation of `capitalize` | `<h3 class="capitalize">Heading</h3>` | Applies a text transformation of `capitalize` to a `h3` element |
| `.text-left` | Apply a text alignment of `left` | `<div class="text-left">This text will be aligned to the left</div>` | Applies text alignment of `left` to a `div` element |
| `.text-right` | Apply a text alignment of `right` | `<div class="text-right">This text will be aligned to the right</div>` | Applies text alignment of `right` to a `div` element |
| `.text-center` | Apply a text alignment of `center` | `<div class="text-center">This text alignment will be centered</div>` | Applies text alignment of `center` to a `div` element |
| `.text-left-m` | Apply a text alignment of `left` for medium devices and above | `<div class="text-left-m">This text will be aligned to the left for medium devices and above</div>` | Applies text alignment of `left` to a `div` element for medium devices and above |
| `.text-right-m` | Apply a text alignment of `right` for medium devices and above | `<div class="text-right-m">This text will be aligned to the right for medium devices and above</div>` | Applies text alignment of `right` to a `div` element for medium devices and above |
| `.text-center-m` | Apply a text alignment of `center` for medium devices and above | `<div class="text-center-m">This text alignment will be centered for medium devices and above</div>` | Applies text alignment of `center` to a `div` element for medium devices and above |
| `.text-left-l` | Apply a text alignment of `left` for large devices and above | `<div class="text-left-l">This text will be aligned to the left for large devices and above</div>` | Applies text alignment of `left` to a `div` element for large devices and above |
| `.text-right-l` | Apply a text alignment of `right` for large devices and above | `<div class="text-right-l">This text will be aligned to the right for large devices and above</div>` | Applies text alignment of `right` to a `div` element for large devices and above |
| `.text-center-l` | Apply a text alignment of `center` for large devices and above | `<div class="text-center-l">This text alignment will be centered for large devices and above</div>` | Applies text alignment of `center` to a `div` element for large devices and above |
| `.text-left-xl` | Apply a text alignment of `left` for extra large devices and above | `<div class="text-left-xl">This text will be aligned to the left for extra large devices and above</div>` | Applies text alignment of `left` to a `div` element for extra large devices and above |
| `.text-right-xl` | Apply a text alignment of `right` for extra large devices and above | `<div class="text-right-xl">This text will be aligned to the right for extra large devices and above</div>` | Applies text alignment of `right` to a `div` element for extra large devices and above |
| `.text-center-xl` | Apply a text alignment of `center` for extra large devices and above | `<div class="text-center-xl">This text alignment will be centered for extra large devices and above</div>` | Applies text alignment of `center` to a `div` element for extra large devices and above |

* * *

## Demo

[View page example](https://unpkg.com/@getbase/typography-helpers/index.html) with the typography helpers stylesheet applied.

* * *

## Support

* IE10+ and all other modern browsers.
* Please specify browsers you need to support in `package.json` according to [browserslist docs](https://github.com/ai/browserslist#queries).

* * *

## Authors

#### Matthew Hartman

* [https://twitter.com/matthewhartmans](https://twitter.com/matthewhartmans)
* [https://github.com/matthewhartman](https://github.com/matthewhartman)

* * *

## License

Code released under the [MIT Open Source](https://opensource.org/licenses/MIT) license.