201622Jan

CoreSheet: Responsives Sass/CSS3-Framework

Für die Websites meiner Open Source-Projekte habe ich bisher eine CSS-Codebasis sowie ein entsprechendes HTML-Template eingesetzt. Da ich den CSS-Code stetig erweitert habe, ist daraus schließlich ein eigenes Framework entstanden. Es hat eine eigene Website erhalten und steht ab sofort bei GitHub, NPM und Bower zur Verfügung: CoreSheet stellt ein responsives Sass/CSS3-Framework dar, das ein prozentuales Grid-System sowie verschiedene Komponenten enthält. Dazu zählen gestaltete Formulare, Tabellen, Navigationsmenüs, Schaltflächen sowie ein Sticky Footer.

CoreSheet - Responsive Sass/CSS3 framework including a grid system

CoreSheet an sich ist kompakt und beinhaltet nur rudimentäre CSS-Resets und -Normalisierungen. Das primäre Layout setzt sich aus einem horizontal zentrierten Container und den Spalten des Grid-Systems bzw. Rasters zusammen. Das Grid-System ist wie alle anderen Komponenten konfigurierbar, so dass die Anzahl der Spalten und die Breite der Stege eingestellt werden können. Es gibt einen zentralen Breakpoint bei 767px, bei dem alle Elemente umbrechen und auf die volle Breite des Fensters gestreckt werden. Mit den bestehenden Konzepten und Elementen von CoreSheet können direkt responsive Seiten-Layouts erstellt werden. Die Grundidee besteht in einem minimalistischen Framework, das durch eigene Stile erweitert und so auf das Erscheinungsbild (Corporate Design) des eigenen Projekts zugeschnitten wird.
Es gibt zudem Themes, die als Vorlage genutzt werden können. Die Kompilierung der SCSS-Dateien erfolgt durch Gulp. Durch die beiliegende gulpfile.js werden die Sass-Dateien von CoreSheet (Framework, Konfiguration und Theme) eingelesen und die finale CSS-Datei inklusive der minifizierten Variante werden erzeugt. Ein Watcher für die Echtzeit-Aktualisierung ist ebenfalls enthalten.