Durch Pinterest sind Mosaik-Layouts, bei denen die einzelnen Layout-Elemente gegeneinander verschoben sind, sehr populär geworden. Es gibt eine viel zahl von Scripts um solche Layouts zu realisieren. Zuletzt habe ich Salvattore benutzt und da es mir sehr gut gefallen hat, stelle ich es euch vor.
Vorteile
Salvattore ist denkbar einfach eingebunden und besitzt keine Abhängigkeiten von anderen Libraries oder Scripten. Sollte euer Projekt bisher also z.B, kein jQuery benötigt haben, könnt ihr euch das weiterhin sparen. In der minifizierten Version ist das Script 7.32 KB klein, mit gzip-Auslieferung dürfte es nochmal um einiges Schrumpfen. Außerdem lässt sich Salvatorre sehr schön steuern und konfigurieren...
Anwendung
Die Anzahl und Aufteilung des Rasters wird per CSS gesteuert. Salvatorre macht sich dazu die content-Angabe der :before Pseudoklasse zu nutze. Es genügt dem Raster das Attribut data-columns zu geben und zum Beispiel wie folgt das Raster zu definieren:
.grid[data-columns]:before {
content: '3 .column.size-1of3';
}Salvattore setzt im Anschluss die Klassen zur Aufteilung der Elemente automatisch. Das schöne ist das so Angaben betreffend des Layouts im CSS bleiben - auch wenn es über einen Trick läuft. Außerdem lassen sich so die Veränderungen des Rasters, auf verschiedenen Endgeräten, per Mediaqueries im CSS steuern.
Fazit
Das Script ist leicht verstanden und angewendet. Durch die fehlenden Abhängigkeiten und kleine Größe ist es recht schmerzfrei in Projekte integriert und macht Spaß bei der Anwendung.