Jedem Frontend-Entwickler sollten die Frontend-Frameworks Bootstrap und Foundation ein Begriff sein, jedoch sind diese regelrechte Schwergewichte. Jene Frameworks setzten die JavaScript Library jQuery voraus und schlagen in der Regel mit bis zu 300KB zu Buche. Heute liste ich euch schlanke Alternativen auf.
| Framework | Gridgröße | Spalten | Breakpoints | Präprozessoren |
|---|---|---|---|---|
| Pure.css | 1280px | 8, 12 oder 24 | 4 | - |
| Skeleton | 1200px | 12 | 5 | - |
| KnaCSS | 1920px | 12 | 6 | LESS/SASS |
| Cardinal | 960px | 12 | 2 | LESS |
| Base | 960px | 4, 5 oder 6 | 2 | LESS/SASS |
Was zeichnet die aufgelisteten Frameworks besonders aus?
Als allererstes zu erwähnen ist, dass die Frameworks mit maximal 15 bis 30 KB sehr viel kleiner sind. Dazu verzichten die meisten auf jQuery und haben häufig eigene kleinere JavaScript Bibliotheken. Besonders hervorzuheben ist, dass alle auf einem responsives Gridsystem basieren und einige sogar wahlweise mit den CSS-Präprozessoren SASS und oder LESS ausgeliefert werden. Darüberhinaus bieten sie Standard-Elemente für Webseiten wie Formulare, Buttons, Tabellen und Typografie. Auf Komplexe Slider und oder Galerien verzichten die kleinen Frameworks, zum gunsten der Größe. Wer aber auf eine responsive und swipe fähige Galerie nicht verzichten will, schaut sich einfach mein Beitrag über Jssor an.
Fazit
Für kleine Webseiten und oder Prototypen eignen sich die kleinen Libraries hervorragend. In Kombination mit VanillaJS lassen sich schnell und vor allem performante Projekte realisieren, und bieten eine echte Alternative zu den Schwergewichten Bootstrap und Foundation.