postcss foft classes

POSTCSS-FOFT-Klassen

Ein PostCSS -Plugin zum automatischen Hinzufügen von Klassen für verschiedene Schriftladungsstrategien. Basiert stark auf netlify/postcss-fout-with-a-class .

Die Dokumentation hat derzeit nur Gulp -Konfigurationsbeispiele, ist jedoch offen für Beiträge mit anderen Build -Tool -Konfigurationen! Dies funktioniert überall, wo PostCSS tut.

Installation

npm install postcss-foft-classes

Beispiel: Fout, Einzelstufe

Sehen Sie sich den vollständigen Fout mit einem Klassenbeispiel mit Schriftarten und dem damit verbundenen JavaScript -Code an.

Gulp -Konfiguration

Siehe diese Arbeit in ./gulp-test/ .

 . pipe (
  postcss ( [
    foftLoadedClasses ( {
      groups : [
        {
          families : [ "Lato" ] ,
          classNames : [ "fonts-loaded" ]
        }
      ]
    } )
  ] )
)

CSS eingeben

 body {
  font-family : Lato , sans-serif;
}

Ausgang CSS

 body {
  font-family : sans-serif;
}

. fonts-loaded body {
  font-family : Lato;
}

Beispiel: Foft, zwei Stufen

Siehe den vollständigen Foot -Beispielcode mit Schriftarten und dem damit verbundenen JavaScript -Code.

Gulp -Konfiguration

Siehe diese Arbeit in ./gulp-test/ .

 . pipe (
  postcss ( [
    foftLoadedClasses ( {
      groups : [
        {
          families : [ "LatoInitial" , "Lato" ] ,
          classNames : [ "fonts-loaded" , "fonts-loaded-2" ]
        }
      ]
    } )
  ] )
)

CSS eingeben

 body {
  font-family : Lato , sans-serif;
}

Ausgang CSS

 body {
  font-family : sans-serif;
}

. fonts-loaded body {
  font-family : LatoInitial;
}

. fonts-loaded-2 body {
  font-family : Lato;
}