@getbase/typography-helpers

# [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.