Minimales Styling für Elemente

Spectre – Leichtgewichtiges CSS-Framework
Keine Kommentare

Ist man auf der Suche nach dem passenden CSS-Framework für das eigene Projekt, wird man meist schnell fündig. Neben Bootstrap gibt es nämlich mittlerweile auch zahlreiche andere Frameworks, die mal mehr, mal weniger Features für die Websitegestaltung mit sich bringen. Dazu gehört auch Spectre – ein CSS-Framework, das vor allem mit seiner Leichtgewichtigkeit und Responsiveness bei den Nutzern punkten will.

Neben den bekannten und viel genutzten Frameworks wie Bootstrap haben es kleinere CSS-Frameworks meist schwer, sich am Framework-Markt zu behaupten. Kein Wunder, ist Bootstrap dank seines Feature-Reichtums doch überaus beliebt, um sich die Arbeit bei der Websitegestaltung zu erleichtern. Allerdings werden meist längst nicht alle Features benötigt, die schwergewichtige Frameworks mit sich bringen. Leichtgewichtigere und moderne Alternativen wie das noch recht junge Spectre sind darum für so manches Projekt dem viel genutzten Bootstrap vorzuziehen und bringen in jedem Fall die meistgenutzten Features der gängigen CSS-Frameworks mit sich.

Spectre: Responsive und Mobile-friendly

Leichtgewichtig, responsiv und modern – so beschreiben die Entwickler von Spectre das CSS-Framework. User sollen damit schneller und einfacher Website-Layouts und -Elemente erstellen können; in Zukunft soll das Framework auch bei der Entwicklung von responsiven E-Mail-Templates zur Hand gehen. Spectre umfasst gerade einmal 6,8kb minified und gzipped und bringt neben einem Basic-Grid-System eine Reihe nützlicher Komponenten wie etwa Tabs, Modals und Cards mit.

Das responsive Grid-System basiert auf Flexbox und verfügt über zwölf Spalten, deren Breite anhand ihres Klassennamens bestimmt wird. Bereits damit lassen sich sowohl einfache als auch komplexere Layouts erstellen; zudem können zusätzliche Default-Styles für typografische Elemente wie Überschriften, Absätze und Zitate hinzugefügt werden (siehe Codepen):

Ebenso kann die Klasse table zu jedem <table>-Element hinzugefügt werden. Das Framework fügt anschließend Basic-Styling zu der Tabelle hinzu. Genauso stehen auch für das Einfügen von Buttons verschiedene Klassen zur Verfügung, und auch für typische Formular-Elemente bringt es entsprechende Style-Regeln mit. Natürlich lassen sich mit dem CSS-Framework auch Navigationselemente erstellen; insgesamt stehen dafür drei Navigations-Komponenten bereit. Außerdem bietet es mit Modals und Cards auch zwei weitere Komponenten an, die man bereits von Bootstrap kennt.

Installation von Spectre

Ähnlich wie die Nutzung des Frameworks ist auch die Installation von Spectre einfach. Gestartet werden kann auf drei verschiedene Arten: die manuelle Installation, die Installation mit npm oder die Installation mit Bower. Außerdem lässt sich bei Bedarf eine Custom-Version von Spectre.css kompilieren. Wie das geht, verrät die zugehörige Dokumentation; auf GitHub sind nochmal alle Informationen rund um das CSS-Framework zusammengefasst.

Name Spectre
Projektwebsite https://picturepan2.github.io/spectre/
GitHub https://github.com/picturepan2/spectre
Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -