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.
Table of contents
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-helpersOnce 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 |
Demo
View page example with the typography helpers stylesheet applied.
Support
- IE10+ and all other modern browsers.
- Please specify browsers you need to support in
package.jsonaccording to browserslist docs.
Authors
Matthew Hartman
License
Code released under the MIT Open Source license.