Das steckt in dem Sass-Framework

Hocus-Pocus: mehr als nur ein weiteres CSS-Framework?
Kommentare

CSS-Frameworks gibt es ja bereits einige auf dem Markt – allen voran natürlich das altbekannte Bootstrap. Wer lieber auf Frameworks setzen will, bei dem es vor allem um ein leichtgewichtiges Stylesheet-Starterpaket zum Erstellen von Website-Layouts geht, ist dagegen bei der Bootstrap-Alternative Hocus-Pocus gut aufgehoben.

Das Sass-Framework konzentriert sich vor allem darauf, die wichtigsten Features zum Erstellen von Website-Layouts zur Verfügung zu stellen – etwa eine Reihe wichtiger Tools, verschiedene Standard-Packages und unterschiedliche Basic-CSS-Komponenten. Bartłomiej Kozal hat das von ihm entwickelte Framework vorgestellt.

Features von Hocus-Pocus

Wenn es um die Arbeit mit CSS und den dazugehörigen Frameworks geht, hat jeder seine eigenen Vorlieben. Vielen ist Bootstrap mit seiner schieren Menge an Designmöglichkeiten und vorgefertigten Bausteinen zu umfangreich und zu unflexibel, andere brauchen genau diese Menge an Komponenten, um ansprechende Website-Designs zu erstellen.

Wer jedoch auch gut ohne viele der Bootstrap-eigenen Features und UI-Komponenten auskommt, findet in Hocus-Pocus eine nützliche Bootstrap-Alternative. Der besondere Vorteil an dem CSS-Framework: es lässt sich in fast jedem Projekt benutzen, ohne dass eine Reihe CSS-Klassen überschrieben werden müssen. Stattdessen lässt sich das Aussehen einer jeden Komponente mithilfe von Variablen ändern.

Auch darüber hinaus bietet Hocus-Pocus viele hilfreiche Features. Dazu zählt etwa ein verbessertes normalize.css-Reset, eine neue Default-Farbpalette, die auf clrs.cc basiert oder ein fluides, auf Flexbox basierendes Grid, dessen width-Helper Fraktionen als Klassennamen nutzen. Außerdem wird das Responsive Webdesign weitläufig unterstützt, wobei sowohl für einen Mobile-First- als auch einen Desktop-First-Ansatz die jeweils passenden Breakpoints definiert werden können.

Installation und Voraussetzung zur Nutzung

Die Installation von Hocus-Pocus ist simpel: das CSS-Framework lässt sich entweder über npm oder Bower installieren, einzige Bedingung ist, dass Sass mindestens in Version 3.3.0 sowie Autoprefixer genutzt wird. Letzteres ist dabei zum Hinzufügen der notwendigen Vendor-Prefixes zur fertig kompilierten CSS-Datei wichtig.

Alle Informationen zu dem CSS-Framework finden sich auf GitHub sowie in der Dokumentation auf der Projektwebsite. Dort steht Hocus-Pocus auch zum Download zur Verfügung.

Name Hocus-Pocus
Hersteller Bartłomiej Kozal
Projektwebsite http://hocus-pocus.io/
GitHub https://github.com/bkzl/hocus-pocus

Aufmacherbild: Magician icon von Shutterstock / Urheberrecht: pnDl

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -