@brikcss/typography v0.0.1

Brikcss Typography

Front end component to make managing typography in HTML and CSS easier.

Environment and browser support

Install

1. Install from NPM:

   npm i -D @brikcss/typography

2. Include file(s) in your app:

   • Include ./dist/typography.min.css or ./dist/typography.css for the precompiled CSS.
   • To create your own custom typography styles, follow ./src/typography.css as an example. It is compiled with PostCSS using postcss-font-magician, postcss-apply, and postcss-pxtorem.

Usage

Brikcss Typography follows Material Design's Typography to create the following font styles:

• overline
• caption
• button
• body2
• body
• subtitle2
• subtitle
• h6
• h5
• h4
• h3
• h2
• h1

Font classes

A class is created for each font style. Each class is named as follows: .font__<font style name> (i.e., .font__body).

Font property sets

A "property set" is also created for each font style, which allows you to @apply a font style's properties inside your own CSS rules.

Example input:

.my-selector {
	@apply --font__title;
}

Output:

.my-selector {
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 3rem;
	letter-spacing: 0.02em;
}

Creating your own custom font styles

You can easily create your own custom font styles by following the example in the source typography.css. It uses postcss-apply to create property sets. Refer to their documentation for configuration and usage details.