Nib: Library für Stylus

Posted by in JavaScript, Nodejs, Präprozessor

Mit dem Präprozessor Stylus habe ich im letzten Blog meine Loginseite gestylt. Das Ergebnis sah dann so aus:

loginseite_nach_styling
image-283

Stylus an an sich ist schon sehr mächtig. Erweitert man es zusätzlich mit Nib hat man so ziemlich alles an der Hand, was man so braucht um Webseiten sogar Cross-Browserfähig zu gestalten.

Installation

Um Stylus mitzuteilen, dass es Nib verwenden soll hängt man in der Funktion compile noch ein use(nib()) an das return-Statement mit an.

In der style.styl muss man nur noch die gebrauchten Features einbinden. Für das Augmentieren von Gradienten schreibt man @import ’nib/gradients‘ an den Anfang der Datei. Will man alle Features nutzen, dann reicht ein @import ’nib‘ .

**Meiner Meinung nach abzuraten ist davon, nib über die app.js in die Stylesheets einzubinden, da dieser Ansatz zu unflexibel ist*

Vendor-Prefixes

Die größte Stärke von Nib sind die zahlreichen Augmentierungs-Funktionen, die einem das Herumschlagen mit Vendor-Prefixes abnimmt.

Das Formular der Loginseite enthält eine Regel

Mit Nib kann man das genauso schreiben bzw. stehen lassen, doch es wird augmentiert, d.h. mit Vendor-Prefixes automatisch Cross-Browser fähig gemacht. Die fertige Regel sieht in der css-Datei dann so aus:

Alle Augmentierungen im Überblick gibts auf der Nib-Doku-Seite .

Clearfix

Wer noch nicht weiß, wie man mit Floats umzugehen hat, der kann das in diesem tollen Tutorial nachholen. Allen anderen dürfte der Begriff clearfix schon geläufig sein.
Nib bringt eine Implementierung gleich mit. Die Regeln weist man dann wie gehabt einer Klasse clearfix:

Reset-Funktionen

Eric Meyers Style Reset Funktionen sind bei Nib ebenfalls mit eingebaut. Damit lassen sich einfache Style-Resets leicht über Funktionen aufrufen. Mein Body-Element zum Beispiel erhält die Eigenschaften

Das kann man damit so schreiben

Das Ergebnis

Genaue Informationen zur Implementierung gibt es in der reset.styl

Fazit

Nib erweitert mit Augmentierungen und zusätzlichen Funktionen Stylus. Es ist einfach zu installieren, die Lernkurve ist praktisch nicht vorhanden, denn die Dokumentation ist umfangreich und gut verständlich.