@getbase/typography-helpers NPM

Base Typography Helpers

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.

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:

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:

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

SCSS Import:

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

LESS Import:

/* 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