little Helpers

Kleine Helferlein für Entwickler (WIP)

Little helpers sind kleine Tools, die dir die Arbeit erleichtern sollen. Besonders einfach ist die Umrechnung von absoluten auf relative Font-Größen.

Features

  • Verschiedene Berechnungen
  • Pixel zu (R)EM
  • Prozentrechner
  • Konversionsrechner
  • Umrechnung während der Eingabe
  • Kopierfunktion

Wie es dazu kam

Die Umrechnung von Font-Größen ist ein immer wiederkehrender Task für Frontend Developer. Viele Entwickler nutzen eigens dafür entwickelte Websites. Zach Leatherman erstellte sich für diese Umrechnung einen Workflow mittels Textexpander. Ich fand die Idee gut, nutzte aber Alfred statt Textexpander. Ich entschied mich, einen Workflow für Alfred zu erstellen und diesen zu veröffentlichen. Du findest den Workflow auf Github.

Ich hatte nicht auf allen Rechnern, die Möglichkeit auf Alfred zurückzugreifen. Also entschied ich mich diese Art der Umrechnung über eine eigene Website zu lösen. Mittels einer Checkbox kannst du zwischen REM und EM wählen. Die initiale Umrechnung basiert auf 16px - der Standardgröße für Fließtext im Browser. Über eine Schaltfläche die Ausgabe kopieren. Das Ergebis ist mit einem Kommentar versehen und sieht so aus:

.75rem; /*-- 12px / 16px --*/

Du kannst das Ergebnis also einfach in dein CSS kopieren.

Mittlerweile sind ein paar weitere Umrechnungen hinzugekommen und ich plane, den Umfang zu erweitern.

Mit der Entwicklung dieser Website habe ich begonnen, ein Design-System zu entwickeln, das mittels BEM und ITCSS strukturiert ist.
Wirf einen Blick darauf