Taffy: Schmales CSS-Framework auf der Basis von CSS Flexbox

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren...

Die Syntax der CSS Flexbox ist nicht eben so eingängig wie Micky Krauses Song über zehn nackte Friseusen. Wer nicht tagtäglich damit umgeht, wünscht sich für den Bedarfsfall was einfacheres. Das kleine CSS-Framework Taffy ist dieses Einfachere.

CSS Flexbox: Einarbeitung unumgänglich

Hier bei Dr. Web haben wir uns bereits desöfteren mit Flexbox beschäftigt. Die generellen Vorteile zeigten wir dir in diesem Artikel. Wenn du dich schnell und konzentriert einarbeiten willst, schau mal in diesen Artikel, in dem ich dir einen Videokurs vorstelle, der nicht mal etwas kostet.

Um noch schneller zum Ergebnis zu kommen, habe ich dir an dieser Stelle einige Flexbox Patterns, quasi Code-Textbausteine gezeigt. Bei t3n stellte ich das kleine Werkzeug Flex Layout Attribute vor, das ebenfalls den Workflow beschleunigen soll. Zu guter Letzt fand ich noch den Fibonacci Flexbox Composer. Aber am Ende lässt sich nicht leugnen, dass Flexbox eine erhöhte Einarbeitung benötigt.

Flexbox Made Easy mit Taffy

Der US-amerikanische Webentwickler Logan Carlile nahm sich ein Vorbild an älteren Frameworks, etwa dem bekannten Urgestein 960.gs, das wir hier bei Dr. Web vor Ewigkeiten, genauer in 2009, ebenfalls vorgestellt hatten. Er orientierte sich also an Grid-Systemen, die eine Designstruktur in nahe an natürlicher Sprache angelehnter Syntax bieten, integrierte aber CSS Flexbox als Basis.

Taffy: Landing Page

So gelingt es Carlile, die Flexibilität von CSS Flexbox ohne große Einarbeitungszeiten für jedermann zugänglich zu machen, der in der Lage ist, 12 Spalten voneinander zu unterscheiden. Mit voller Absicht verzichtet er auf eine umfassende Ausgestaltung seines Frameworks im Stile von Bootstrap oder Foundation.

Taffy ist dementsprechend auch eher eine Boilerplate als ein Framework. Dafür ist das CSS mit 11 kb extrem klein und kommt ohne jegliche Dependenzen in den JavaScript-Bereich. Styling und Typografie liefert Taffy dennoch mit, allerdings eher als Basis-Ausstattung.

Taffy wird mit Sass/SCSS erstellt und steht unter der liberalen MIT-Lizenz als Open Source auf der Projekt-Website zum Download bereit. Hier findest du auch die hinreichend ausgearbeitete und verständliche Dokumentation in englischer Sprache.

Spalten anlegen mit Taffy

Wie bereits erwähnt, orientiert sich Taffy an populären Grid-Systemen, verfolgt dabei aber den responsiven Mobile-First-Ansatz und arbeitet mit Breakpoints für unterschiedliche Display-Größen. Als Behälter für den Content insgesamt kommt die Klasse .container zum Einsatz.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

Diese Klasse sorgt bis 1.000 Pixeln Bildschirmbreite dafür, dass der Inhalt zentriert und auf 960 Pixel (!) limitiert wird. Bis 1.192 Pixeln Breite erhält der Inhaltecontainer eine Breite von 1.152 PIxeln und bei breiteren Displays begrenzt sie den Inhalt auf 1.344 Pixel. Diese gewürfelt erscheinenden Werte wählte Carlile, weil sie sich alle durch 12 teilen lassen.

Das eigentliche Grid wird innerhalb der Container-Klasse ausgelegt. Hierfür dient die Klasse .grid, in der wiederum per .grid_col entsprechende Spalten definiert werden. Die Klasse .grid können wir dabei als Reihe verstehen. Innerhalb einer Reihe erhalten alle Spalten generell die gleiche Breite. Je mehr Spalten bestehen, desto schmaler wird die einzelne. Das ist so logisch, wie es sich anhört.

Gezielte Grid-Steuerung mit Taffy

Da diese Verfahrensweise in der Regel eher nicht dem designerischen Willen entsprechen wird, gibt es verschiedene Möglichkeiten, diese Standardregelung außer Kraft zu setzen. So könntest du etwa einzelnen Spalten Prozentwerte zuweisen, so dass sie nur eine bestimmte Breite des zur Verfügung stehenden Platzes beanspruchen. setzt du etwa .grid_col die Klasse .is-50p hinzu, erstellst du eine Spalte, die 50 Prozent der Gesamtbreite für sich in Anspruch nimmt. Die jeweils verbleibenden Spalten der jeweiligen Reihe teilen sich automatisch den verbleibenden Platz.

Eine noch präzisere Möglichkeit, den vorhandenen Platz gezielt aufzuteilen, bieten die Klassen .is-1 bis .is-12. Die Anweisung grid_col is-1 würde hier bedeuten, dass diese Spalte eine Spalte von 12 Spalten Gesamtbreite einnimmt. Die zweite Spalte von zweien würde dementsprechend dann grid_col is-11 sein, so dass wir am Ende auf 12 kommen. Auf diese Weise kannst du nun die Spalten frei verteilen.

Wird ein Grid nun auf einem Display angezeigt, dass eine Breite von unter 768 Pixeln aufweist, transformieren sich alle Spalten zu solchen voller Breite und werden untereinander angezeigt. Möchtest du gezielt in die Darstellung bei den einzelnen Breakpoints eingreifen, bietet Taffy die Erweiterungen --small, --medium und --large. Damit legst du etwa fest, dass eine Spalte auf verschiedenen Bildschirmen verschiedene Breiten erhält.

Die Syntax von Taffy ist innerhalb einer halben Stunde erlernt. Die Boilerplate kümmert sich auch um Typografie, Formulare, Butttons, Tabellen und Medien. Es lohnt sich auf jeden Fall, einen näheren Blick auf Taffy zu werfen.

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.

Hinterlasse einen Kommentar

1 Kommentar auf "Taffy: Schmales CSS-Framework auf der Basis von CSS Flexbox"

Benachrichtige mich zu:
avatar
Sortiert nach:   neueste | älteste | beste Bewertung
Martin
Gast

Interessanter Artikel, vielen Dank! Ich habe mir gleich mal die Dokumentation angeschaut und Taffy heruntergeladen. 🙂