Toast – CSS-Framework auf Grid-Basis

Leichtgewichtiges CSS-Framework

Schon wieder ein CSS-Framework? Gibt es denn davon nicht bereits mehr als genug? Im Grund genommen ja, und besonders die großen Frameworks wie Bootstrap oder Foundation bieten umfangreiche Möglichkeiten, um responsive, mobilefreundliche Websites zu erstellen. Allerdings haben sie einen Nachteil: Sie benötigen ziemlich viel Speicherplatz. Und genau hier setzt das leichtgewichtige, gridbasierte CSS-Framework Toast an.

Im Gegensatz zu anderen CSS-Frameworks, die zwar extrem mächtig sind, aber aus diesem Grund für kleinere Projekte oftmals viele überflüssige Features und Funktionen mitbringen, setzt Toast auf das Wesentliche. Das Framework basiert auf einem flexiblen Grid – seine Stärke liegt in seiner Anpassbarkeit.

Toast: Was kann das CSS-Framework?

Anstatt den eigenen Speicherplatz mit ungenutztem Code zuzumüllen, beschränkt sich das CSS-Framework Toast auf die grundlegenden Funktionen. Toast besteht aus nur 313 Zeilen Code und hat einen Umfang von 7 KB (unkomprimiert), während die verkleinerte Version von Bootstrap 3.2 CSS 106 KB und 6.200 Zeilen Code umfasst.

Toast ist komplett responsiv und individuell anpassbar. Die Zahl der Spalten sowie ihre Anordnung ist jedem User selbst überlassen. Weiterer Vorteil: Das Framework nutzt Pixel für Gutter (als Gutter wird im Grid-Design die Breite des Abstands zwischen Spalten bezeichnet), was die Erstellung ebendieser vereinfacht.

No fluid gutter width bullcrap. This is the real deal. What you set is what you get.

Falls man keine vordefinierten Klassen für Grid-Spalten verwenden möchte, lassen sich auch die CSS-Klassen anpassen.

Efficient Transformers

Christoph Henkelmann, DIVISIO

Enhancing Page Visits by Topic Prediction

Dieter Jordens, Continuum Consulting NV

Machine Learning on Edge using TensorFlow

Håkan Silfvernagel, Miles AS

Zudem unterstützt Toast Sass – auf diese Weise können CSS-Klassen, Gutter usw. einfach an die eigenen Wünsche angepasst werden. Auch für Nutzer, die noch nie mit Sass gearbeitet haben, bietet das Framework eine einfache Lösung: Dazu öffnet man toast.css im Code-Editor und nutzt die Suchen-und-Ersetzen-Funktion, um vorgegebene Klassennamen durch eigene zu ersetzen. In folgendem Video werden innerhalb von 15 Minuten die Features von Toast ausführlich erklärt:

Einen Überblick über die Funktionsweise von Toast bietet ein Blogpost von Tahir Taous, in dem er auch erste Schritte mit dem CSS-Framework erläutert. Auf GitHub findet sich der zugehörige Quellcode; Toast steht auf der Projektwebsite zum Download bereit.