https://github.com/brikcss/typography
Typography component to make managing typography in CSS easier.
https://github.com/brikcss/typography
Last synced: 2 months ago
JSON representation
Typography component to make managing typography in CSS easier.
- Host: GitHub
- URL: https://github.com/brikcss/typography
- Owner: brikcss
- Created: 2018-06-05T19:32:16.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-11-08T20:44:23.000Z (over 6 years ago)
- Last Synced: 2025-03-17T19:03:16.701Z (3 months ago)
- Language: JavaScript
- Size: 516 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Brikcss Typography
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:
```sh
npm i -D @brikcss/typography
```
2. Include file(s) in your app:
- _PostCSS:_ The `main` file in package.json resolves to `./src/typography.css`. This must be used with PostCSS and must include [postcss-font-magician](https://github.com/jonathantneal/postcss-font-magician), [postcss-apply](https://github.com/pascalduez/postcss-apply), and [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem).
- _Precompiled:_ Or you can include the precompiled version: `./dist/typography.min.css`.
- _Custom build:_ To create your own custom typography styles, follow the example in `./src/typography.css`.
## Usage
Brikcss Typography follows [Material Design's Typography](https://material.io/design/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__` (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:
```css
.my-selector {
@apply --font__title;
}
```
Output:
```css
.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](./src/typography.css). It uses [postcss-apply](https://github.com/pascalduez/postcss-apply) to create property sets. Refer to their documentation for configuration and usage details.