Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add installation instructions #2

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add installation instructions #2

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 19 additions & 16 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,23 @@

This Twind plugin allows for the application of the above behaviours using shorthand like `cap-serif-3xl-tight`.

## Installation

```sh
npm install @twind/capsize
```

## Usage

The Twind integration here is just a function and works like any other plugin:

```js
import { setup } from "twind/shim";
import { capsize } from "./index.js";
import { setup } from 'twind/shim'
import { capsize } from '@twind/capsize'

setup({
plugins: { cap: capsize }
});
plugins: { cap: capsize },
})
```

Once set up, invoke the plugin with the following syntax in your HTML or JSX:
Expand All @@ -35,15 +41,15 @@ The plugin expects some arguments after the plugin name (i.e. `cap` in this inst
- `fontSize` (required): from the theme, for example `sm|base|lg|xl`
- `lineHeight` (optional): from the theme, for example `normal|relaxed|loose`

The appropriate corrections will be applied to an element according to these arguments and the relating values in your theme file. For convenience, some of the font metrics for default fonts on Windows, Mac and Android are included with the plugin, along with a function that uses canvas to detect what font is being used by the browser from any given font family.
The appropriate corrections will be applied to an element according to these arguments and the relating values in your theme file. For convenience, some of the font metrics for default fonts on Windows, Mac and Android are included with the plugin, along with a function that uses canvas to detect what font is being used by the browser from any given font family.

> 💡 It is possible to generate metrics for any font using the [tool on the capsize homepage](https://seek-oss.github.io/capsize/)

If you are using a custom font stack then you will need to supply the appropriate font metrics in your theme:

```js
import { setup } from "https://cdn.skypack.dev/twind/shim";
import { capsize } from "./index.js";
import { setup } from 'https://cdn.skypack.dev/twind/shim'
import { capsize } from 'https://cdn.skypack.dev/@twind/capsize'

setup({
theme: {
Expand All @@ -53,19 +59,19 @@ setup({
ascent: 1974,
descent: -426,
lineGap: 0,
unitsPerEm: 2000
}
unitsPerEm: 2000,
},
},
extend: {
fontFamily: {
display: ['Lato', 'sans-serif']
}
}
display: ['Lato', 'sans-serif'],
},
},
},
plugins: {
cap: capsize,
},
});
})
```

Then use the plugin in the same way as before but providing the name of the custom font stack as the first argument:
Expand All @@ -82,6 +88,3 @@ Then use the plugin in the same way as before but providing the name of the cust
## Acknowledgements

This project was inspired by and vendors code from [Capsize](https://seek-oss.github.io/capsize/) and [DetectFont](https://github.com/Wildhoney/DetectFont).