@brikcss/typography

0.0.1 • Public • Published

Brikcss Typography

NPM version NPM downloads per month Travis branch NPM version Coverage Status Commitizen friendly semantic release code style: prettier

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


Environment and browser support

Node CLI UMD ES Module Browser
x x x x
Chrome Firefox Safari Edge IE iOS Android
11

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.

Readme

Keywords

Package Sidebar

Install

npm i @brikcss/typography

Weekly Downloads

2

Version

0.0.1

License

none

Unpacked Size

15.1 kB

Total Files

5

Last publish

Collaborators

  • thezimmee