@getbase/typography

# [Base Typography](http://getbase.org) Base Typography 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.svg?branch=master [david-img]: https://img.shields.io/david/dev/getbase/typography.svg?branch=master&label=dependencies [travis]: https://travis-ci.org/getbase/typography [david]: https://david-dm.org/getbase/typography?type=dev * * * ## Table of contents * [Overview](#overview) * [Installation](#installation) * [Documentation](#documentation) * [Demo](#demo) * [Support](#support) * [Authors](#authors) * [License](#license) * * * ## Overview Base Typography contains styles for headings, copy, blockquotes, codeblocks, lists and all other standard typography. * * * ## Installation If you have an existing project and would like to include the Base typography module, run the following command: ```bash npm install --save @getbase/typography ``` Once you have the typography 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/index.css"); ``` #### SCSS Import: ```scss /* Import Base Typography */ @import "~@getbase/typography/scss/index"; /* Your Other Styles */ @import "main" ``` #### LESS Import: ```less /* Import Base Typography */ @import "~@getbase/typography/less/index"; /* Your Other Styles */ @import "main" ``` * * * ## Documentation Base Typography includes styles for headings (`h1 - h6`), heading helpers (`.fs-1` - `.fs-6`), links, horizontal lines, and general typography. #### Helpers (Applies to SCSS/LESS) | Helper Class | Purpose | Example | Outcome | | ------------ | ------- | ------- | ------- | | `.fs-1` | Apply the same font size and line height as a `h1` | `Heading` | Applies `h1` font size and line height to a `span` element | | `.fs-2` | Apply the same font size and line height as a `h2` | `Heading` | Applies `h2` font size and line height to a `span` element | | `.fs-3` | Apply the same font size and line height as a `h3` | `Heading` | Applies `h3` font size and line height to a `span` element | | `.fs-4` | Apply the same font size and line height as a `h4` | `Heading` | Applies `h4` font size and line height to a `span` element | | `.fs-5` | Apply the same font size and line height as a `h5` | `Heading` | Applies `h5` font size and line height to a `span` element | | `.fs-6` | Apply the same font size and line height as a `h6` | `Heading` | Applies `h6` font size and line height to a `span` element | ### SCSS #### Variables | Variable | Purpose | Default | | -------- | ------- | ------- | | `$base-background-color` | Color applied to the background body | `#fff` | | `$base-font-family` | Font family applied to body | `sans-serif` | | `$base-font-size` | Font size applied to body | `16px` | | `$base-line-height` | Line height applied to body | `22px` | | `$base-font-weight` | Font weight applied to body | `400` | | `$base-font-color` | Font color applied to body | `#000` | | `$base-link-color` | Color applied to links | `#000` | | `$base-link-hover-color` | Color applied to links on hover | `#000` | | `$base-link-active-color` | Color applied to links on active | `#000` | | `$base-heading-font-family` | Font family applied to headings `h1 - h6` | `sans-serif` | | `$base-h1-font-size` | Heading 1 font size | `32px` | | `$base-h1-line-height` | Heading 1 line height | `38px` | | `$base-h1-font-weight` | Heading 1 font weight | `700` | | `$base-h1-color` | Heading 1 color | `#000` | | `$base-h2-font-size` | Heading 2 font size | `26px` | | `$base-h2-line-height` | Heading 2 line height | `32px` | | `$base-h2-font-weight` | Heading 1 font weight | `700` | | `$base-h2-color` | Heading 2 color | `#000` | | `$base-h3-font-size` | Heading 3 font size | `22px` | | `$base-h3-line-height` | Heading 3 line height | `28px` | | `$base-h3-font-weight` | Heading 3 font weight | `700` | | `$base-h3-color` | Heading 3 color | `#000` | | `$base-h4-font-size` | Heading 4 font size | `18px` | | `$base-h4-line-height` | Heading 4 line height | `24px` | | `$base-h4-font-weight` | Heading 4 font weight | `700` | | `$base-h4-color` | Heading 4 color | `#000` | | `$base-h5-font-size` | Heading 5 font size | `16px` | | `$base-h5-line-height` | Heading 5 line height | `22px` | | `$base-h5-font-weight` | Heading 5 font weight | `700` | | `$base-h5-color` | Heading 5 color | `#000` | | `$base-h6-font-size` | Heading 6 font size | `14px` | | `$base-h6-line-height` | Heading 6 line height | `20px` | | `$base-h6-font-weight` | Heading 6 font weight | `700` | | `$base-h6-color` | Heading 6 color | `#000` | | `$base-blockquote-font-family` | Font family applied to blockquotes | `sans-serif` | | `$base-blockquote-font-size` | Font size applied to blockquotes | `18px` | | `$base-blockquote-line-height` | Line height applied to blockquotes | `24px` | | `$base-blockquote-line-height` | Line height applied to blockquotes | `24px` | | `$base-blockquote-font-weight` | Font weight applied to blockquotes | `400` | | `$base-blockquote-cite-font-weight` | Font weight applied to a `cite` within a blockquote | `700` | | `$base-code-font-family` | Font family applied to code blocks | `monospace` | | `$base-code-font-size` | Font size applied to code blocks | `13px` | | `$base-code-line-height` | Line height applied to code blocks | `18px` | | `$base-code-color` | Font color applied to code blocks | `#000` | | `$base-code-background-color` | Background color applied to code blocks | `#f7f7f7` | | `$base-code-border-color` | Border color applied to code blocks | `#e7e7e7` | ### LESS #### Variables | Variable | Purpose | Default | | -------- | ------- | ------- | | `@base-background-color` | Color applied to the background body | `#fff` | | `@base-font-family` | Font family applied to body | `sans-serif` | | `@base-font-size` | Font size applied to body | `16px` | | `@base-line-height` | Line height applied to body | `22px` | | `@base-font-weight` | Font weight applied to body | `400` | | `@base-font-color` | Font color applied to body | `#000` | | `@base-link-color` | Color applied to links | `#000` | | `@base-link-hover-color` | Color applied to links on hover | `#000` | | `@base-link-active-color` | Color applied to links on active | `#000` | | `@base-heading-font-family` | Font family applied to headings `h1 - h6` | `sans-serif` | | `@base-h1-font-size` | Heading 1 font size | `32px` | | `@base-h1-line-height` | Heading 1 line height | `38px` | | `@base-h1-font-weight` | Heading 1 font weight | `700` | | `@base-h1-color` | Heading 1 color | `#000` | | `@base-h2-font-size` | Heading 2 font size | `26px` | | `@base-h2-line-height` | Heading 2 line height | `32px` | | `@base-h2-font-weight` | Heading 1 font weight | `700` | | `@base-h2-color` | Heading 2 color | `#000` | | `@base-h3-font-size` | Heading 3 font size | `22px` | | `@base-h3-line-height` | Heading 3 line height | `28px` | | `@base-h3-font-weight` | Heading 3 font weight | `700` | | `@base-h3-color` | Heading 3 color | `#000` | | `@base-h4-font-size` | Heading 4 font size | `18px` | | `@base-h4-line-height` | Heading 4 line height | `24px` | | `@base-h4-font-weight` | Heading 4 font weight | `700` | | `@base-h4-color` | Heading 4 color | `#000` | | `@base-h5-font-size` | Heading 5 font size | `16px` | | `@base-h5-line-height` | Heading 5 line height | `22px` | | `@base-h5-font-weight` | Heading 5 font weight | `700` | | `@base-h5-color` | Heading 5 color | `#000` | | `@base-h6-font-size` | Heading 6 font size | `14px` | | `@base-h6-line-height` | Heading 6 line height | `20px` | | `@base-h6-font-weight` | Heading 6 font weight | `700` | | `@base-h6-color` | Heading 6 color | `#000` | | `@base-blockquote-font-family` | Font family applied to blockquotes | `sans-serif` | | `@base-blockquote-font-size` | Font size applied to blockquotes | `18px` | | `@base-blockquote-line-height` | Line height applied to blockquotes | `24px` | | `@base-blockquote-font-weight` | Font weight applied to blockquotes | `400` | | `@base-blockquote-cite-font-weight` | Font weight applied to a `cite` within a blockquote | `700` | | `@base-code-font-family` | Font family applied to code blocks | `monospace` | | `@base-code-font-size` | Font size applied to code blocks | `13px` | | `@base-code-line-height` | Line height applied to code blocks | `18px` | | `@base-code-color` | Font color applied to code blocks | `#000` | | `@base-code-background-color` | Background color applied to code blocks | `#f7f7f7` | | `@base-code-border-color` | Border color applied to code blocks | `#e7e7e7` | * * * ## Demo [View page example](https://unpkg.com/@getbase/typography/index.html) with the typography 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.