Twindy CSS

css web

Für Websites und Webapps kommt man nicht um CSS herum. Es ist vielseitig und mächtig, aber an manchen stellen auch umständlich. CSS Frameworks schaffen Erleichterung, aber geben manchmal auch schon zu viel vor. Dann gibt es noch funktionale CSS Frameworks wie Tailwind, die die ganze Gestaltung wieder ins HTML verlagern.

Tailwind bietet in der Tat maximale Flexibilität bei ansprechenden Ergebnissen. Aber es lässt die semantische Struktur des HTML außer acht. Besonders, wenn verschiedene Themes verwendet werden sollen, ist der klassische Ansatz zur Trennung von Inhalt und visueller Gestaltung besser.

Um das Beste aus beiden Welten zu bekommen, habe ich mithilfe des unglaublich mächtigen und gleichzeitig eleganten Stylus CSS Präprozessors von Tailwind inspirierte Funktionen geschrieben, die den Code übersichtlicher machen sollen.

Herausgekommen ist twindy, zu finden auf Github https://github.com/holtwick/twindy

Erste Schritte

Zunächst lässt sich windy gut per npm installieren:

npm i twindy

Wir legen nun eine Stylus Datei an, z.B. mystormy.styl mit dem Inhalt:

@require "twindy"

// Add your windy CSS styles here :)

Nun lässt sich die eigene Datei mit Stylus übersetzen:

npx stylus -w ./mystormy.styl -o ./mystormy.css -I ./node_modules

Aber auch mit Webstorm etc. sollte sich Twindy ähnlich einbinden lassen.

Einheiten

Die Einheiten sind relativ zur Schriftgröße des Dokuments, die ja 1rem entspricht. In der Regel sind das 16px. Bei Angaben zum padding oder margin ist das Argument eine Pseudo-Pixel-Zahl. Also folgende Klasse erzeugt einen seitlichen Rand von 0.5rem:

.demo
  m-x(8)

Es sollte immer in 8er Schritten gedacht werden, um ein harmonisches Bild zu bekommen. Weitere Shortcuts wie p() oder m-y() oder p-r() stehen zur Verfügung.

Farben

Die Farben wurden ebenfalls von Tailwind übernommen und können wie folgt schön eingesetzt werden:

.success
  color green-900
  background green-100

Breakpoints

Stylus bietet bereits eine flexible @media Unterstützung, so kann es auch innerhalb einer Klasse oder Funktion stehen. Die Breakpoints sind als Variablen definiert. Beispiel:

container()
  m-x(32)

  @media lg
    margin-left auto
    margin-right auto
    max-width 960px

Reset

Der enthaltene Reset kanonisiert alle Elemente, sodass sie rein semantisch verwendet werden und später visuell überladen werden können. Das Box Modell wird mit box-sizing: border-box vordefiniert. In der eigenen CSS Definition sollte dann nur noch die gewünschte Schriftart gesetzt werden.

Allerdings fügt Twindy generell von sich aus keine Styles hinzu, das heißt wir müssen am Anfang der CSS Datei folgende Funktion aufrufen:

twindy-reset()

Fliesstext Formatierung

Ähnlich wie beim Reset gibt es auch für Fließtext Passagen vordefinierte Styles, die optional benutzt werden können. Zum Beispiel für Elemente innerhalb der Klasse .prose:

.prose
  twindy-prose()

Stack Layout

Eine starke Abstraktion für das Layout, besonders für Webapps, wird durch Stacks angeboten. Ein Container kann eine vertikalen vstack() oder horizontalen hstack() definieren. Die Kind-Elemente werden dann entsprechend angeordnet. Soll ein Element den verbleibenden Platz konsumieren kann das durch grow() markiert werden. Soll er vertikal scrollbar sein, geht das mit vscroll(). Wenn enthaltener Inhalt vertikal und horizontal mittig platziert werden soll, dann kann das mit center() definiert werden. Generell wird das Layout per Flexbox erzeugt, also wirken auch alle entsprechenden üblichen CSS Properties.

Beispiel:

.app
  hstack()

  &_sidebar
    vstack()

  &_content
    grow()
    vscroll()

Positionierung

Aber auch aus dem alten Stylus Framework nib habe ich einige Dinge übernommen, wie z.B. die Shortcuts für die Positionierung von Elementen:

.header
  absolute top left
  width 100%

Dateigröße

Windy ist auf Grund seines Designs schon sehr sparsam mit Definitionen. Allerdings geht da natürlich auch noch mehr:

Purge CSS verwenden um ungenutzte Styles zu entfernen
Einen CSS-Minifier anwenden, wie z.B. clean-css