CRIDS customizable grid system

CRIDS

Mit CRIDS erhältst Du ein sehr flexibles, responsives, mobile-first CSS Grid System das nahezu für alle Anwendungsgebiete eingesetzt werden kann. Von sehr kleinen Internetseiten (Web-Visitenkarten) über mittlere und große Webseiten bis hin zu komplexen Portalen und Anwendungen.
Demo

Konfigurierbares, flexibles Grid System

Die Anzahl der Spalten ist natürlich ebenso konfigurierbar wie der Abstand zwischen den einzelnen Spalten. Desweiteren kannst Du auch nur die Spalten angeben die wirklich benötigt werden, man kann bei insgesamt 12 Spalten beispielsweise nur die Spalten 2, 3, 4, 6, 8, 9 und 10 generieren. Dies spart nicht nur Bandbreite, also Dateigröße, sondern vor allem verringert es das Vorkommen nicht benötigter CSS-Anweisungen. Kurz gesagt: man verbessert ganz einfach die Performance des Grid Systems.

Funktionen wie zentrieren der Spalten (center), einzelne Spalten mit einem Versatz (prepend/append) versehen, die Reihenfolge der Spalten (push/pull) vertauschen, einzelne Spalten je nach Breakpoint ausblenden, Spalten ohne Zwischenraum (pro Breakpoint) sind allesamt über eine einfache Variable in der scss-Datei konfigurierbar (true/false). Darüber hinaus kannst Du die zu verwendenen Klassennamen ebenfalls selbst bestimmen. Zu guter Letzt gibt es noch einen Debug-Modus wo Dir die einzelnen Konfigurationen und dargestellten Spalten (columns) direkt auf der Seite dargestellt werden.

Im Idealfall könnt ihr die Datei crids.scss einfach in eure bestehende SASS-Entwicklungsumgebung einbinden, die Einstellungsvariablen nach euren Bedürfnissen konfigurieren und loslegen. Alternativ findet ihr auch vorkonfigurierte CSS-Dateien im entsprechenden Github-Repo.

Github

Veröffentlicht von

FrontEnd-Entwickler bei der adesso SE in Dortmund. Schwerpunkte sind neben HTML, CSS, JavaScript und CMS vor allem UI/UX und Grafikdesign/Marketing.

Kommentare sind geschlossen.