zachleat / Postcss Foft Classes
Licence: mit
A postcss plugin to automatically add classes for various font loading strategies.
Stars: ✭ 87
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Postcss Foft Classes
postcss-font-grabber
A postcss plugin, it grabs remote font files and update your CSS, just like that.
Stars: ✭ 26 (-70.11%)
Mutual labels: font, postcss
postcss-font-pack
PostCSS plugin to simplify font declarations by validating only configured font packs are used and adding fallbacks.
Stars: ✭ 18 (-79.31%)
Mutual labels: font, postcss
Stylelint
A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
Stars: ✭ 9,350 (+10647.13%)
Mutual labels: postcss
Postcss Modules Example
How to use postcss-modules plugin
Stars: ✭ 78 (-10.34%)
Mutual labels: postcss
Styled Components Rhythm
Vertical Rhythm and Font Baselines with Styled Components
Stars: ✭ 76 (-12.64%)
Mutual labels: font
Cessie
Transpile your CSS bundle to support CSS variables, calc, and future CSS for legacy browsers.
Stars: ✭ 81 (-6.9%)
Mutual labels: postcss
Gp Vue Boilerplate
Grabarz & Partner Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites with vuejs.
Stars: ✭ 71 (-18.39%)
Mutual labels: postcss
Minna Ui
😸 A fast, friendly, and fun web UI kit for everyone.
Stars: ✭ 86 (-1.15%)
Mutual labels: postcss
Lit Loader
LitElement Single File Component loader for Webpack.
Stars: ✭ 84 (-3.45%)
Mutual labels: postcss
Agis Net
[SIGGRAPH Asia 2019] Artistic Glyph Image Synthesis via One-Stage Few-Shot Learning
Stars: ✭ 77 (-11.49%)
Mutual labels: font
Postcss Sass
A Sass parser for PostCSS, using gonzales-pe. https://www.npmjs.com/package/postcss-sass
Stars: ✭ 76 (-12.64%)
Mutual labels: postcss
Freetype Gl
OpenGL text using one vertex buffer, one texture and FreeType
Stars: ✭ 1,236 (+1320.69%)
Mutual labels: font
Postcss Prefix Selector
Prefix all CSS rules with a selector
Stars: ✭ 75 (-13.79%)
Mutual labels: postcss
Ofxfontstash
Easy (and fast) unicode string rendering addon for OpenFrameworks. FontStash is made by Andreas Krinke and Mikko Mononen
Stars: ✭ 84 (-3.45%)
Mutual labels: font
Kakwafont
Kakwafont, a 12px monospace bitmap font based on Terminus
Stars: ✭ 76 (-12.64%)
Mutual labels: font
Postcss Grid Kiss
A PostCSS plugin to keep CSS grids stupidly simple
Stars: ✭ 1,270 (+1359.77%)
Mutual labels: postcss
postcss-foft-classes
A postcss plugin to automatically add classes for various font loading strategies. Based heavily on 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, with font faces and the JavaScript code that goes with it.
Gulp Config
See this working in ./gulp-test/
.
.pipe(
postcss([
foftLoadedClasses({
groups: [
{
families: ["Lato"],
classNames: ["fonts-loaded"]
}
]
})
])
)
Input CSS
body {
font-family: Lato, sans-serif;
}
Output CSS
body {
font-family: sans-serif;
}
.fonts-loaded body {
font-family: Lato;
}
Sample: FOFT, Two Stages
See the full FOFT example code, with font faces and the JavaScript code that goes with it.
Gulp Config
See this working in ./gulp-test/
.
.pipe(
postcss([
foftLoadedClasses({
groups: [
{
families: ["LatoInitial", "Lato"],
classNames: ["fonts-loaded", "fonts-loaded-2"]
}
]
})
])
)
Input CSS
body {
font-family: Lato, sans-serif;
}
Output CSS
body {
font-family: sans-serif;
}
.fonts-loaded body {
font-family: LatoInitial;
}
.fonts-loaded-2 body {
font-family: Lato;
}
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].