Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zachleat/postcss-foft-classes
A postcss plugin to automatically add classes for various font loading strategies.
https://github.com/zachleat/postcss-foft-classes
font postcss web-font
Last synced: 3 months ago
JSON representation
A postcss plugin to automatically add classes for various font loading strategies.
- Host: GitHub
- URL: https://github.com/zachleat/postcss-foft-classes
- Owner: zachleat
- License: mit
- Created: 2017-10-16T12:55:31.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-03-15T21:08:36.000Z (almost 4 years ago)
- Last Synced: 2024-10-17T12:09:40.083Z (3 months ago)
- Topics: font, postcss, web-font
- Language: JavaScript
- Homepage:
- Size: 15.6 KB
- Stars: 90
- Watchers: 5
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# postcss-foft-classes
A postcss plugin to automatically add classes for various [font loading strategies](https://www.zachleat.com/web/comprehensive-webfonts/). Based heavily on [`netlify/postcss-fout-with-a-class`](https://github.com/netlify/postcss-fout-with-a-class).
Documentation currently only has Gulp config examples but is open to contributions with other build tool configurations! This works anywhere postcss does.
## Installation
`npm install postcss-foft-classes`
## Sample: FOUT, Single Stage
See the [full FOUT with a Class example code](https://github.com/zachleat/web-font-loading-recipes/blob/master/fout-with-class.html), with font faces and the JavaScript code that goes with it.
### Gulp Config
See this working in `./gulp-test/`.
```js
.pipe(
postcss([
foftLoadedClasses({
groups: [
{
families: ["Lato"],
classNames: ["fonts-loaded"]
}
]
})
])
)
```
### Input CSS
```css
body {
font-family: Lato, sans-serif;
}
```
### Output CSS
```css
body {
font-family: sans-serif;
}
.fonts-loaded body {
font-family: Lato;
}
```
## Sample: FOFT, Two Stages
See the [full FOFT example code](https://github.com/zachleat/web-font-loading-recipes/blob/master/foft.html), with font faces and the JavaScript code that goes with it.
### Gulp Config
See this working in `./gulp-test/`.
```js
.pipe(
postcss([
foftLoadedClasses({
groups: [
{
families: ["LatoInitial", "Lato"],
classNames: ["fonts-loaded", "fonts-loaded-2"]
}
]
})
])
)
```
### Input CSS
```css
body {
font-family: Lato, sans-serif;
}
```
### Output CSS
```css
body {
font-family: sans-serif;
}
.fonts-loaded body {
font-family: LatoInitial;
}
.fonts-loaded-2 body {
font-family: Lato;
}
```