Kleine Bootstrap-Alternative

Cutestrap – Eigensinniges CSS-Framework mit Charme
Kommentare

Frontend-Frameworks gibt es einige auf dem Markt, allen voran Bootstrap und Foundation. Ist man auf der Suche nach einem CSS-Framework mit vielen Funktionen und Komponenten, ist das sicher die richtige Wahl. Braucht man aber eher ein Mittelding zwischen normalize.css und einem vollumfänglichen Framework, bietet sich Cutestrap an.

Das kleine CSS-Framework Cutestrap wird von seinem Entwickler als Alternative zu Bootstrap bezeichnet. Für Entwickler, die kein aufgeblähtes Framework mit unzähligen Funktionen benötigen, aber doch etwas mehr Funktionalität als beispielsweise unter normalize.css wünschen, kommt Cutestrap genau richtig. Mit gerade einmal „8kb of CSS“ passt es in jedes System.

Cutestrap – nicht nur süß, sondern clever

Nicht nur schick, sondern auch ordentlich was dahinter: Das CSS-Framework Cutestrap bietet eine konsistente Kontrolle über Formulare, die so nicht die Browser-Accessibility beeinträchtigen. Sie sind sowohl im Display- als auch im Semantik-Markup vereinheitlicht. Zudem verfügt Cutestrap über ein sogenanntes „Implicit Grid“, das unter Verwendung von Flexbox erstellt wurde. So benötigen User lediglich eine einzige Klasse, um ein Grid zu kreieren. Spalten passen sich außerdem automatisch an die Größe bestehender Geschwister-Spalten an.

JavaScript Days 2017

Architektur mit JavaScript

mit Golo Roden (the native web)

JavaScript Testing in der Praxis

mit Dominik Ehrenberg (crosscan) und Sebastian Springer (MaibornWolff)

Des Weiteren lassen sich voreingestellte Variablen einfach modifizieren, sodass diese nur die Dateien beinhalten, die auch wirklich benötigt werden. Bei der Entwicklung von Cutestrap wurde auch darauf geachtet, dass sich alle Elemente und Komponenten harmonisch in das Baseline-Grid einfügen. Die Typographiegröße wird durch Rems bestimmt; jedes Element bleibt so mit dem Grundlinienraster verbunden.

Zur Benennung von Konventionen wird die BEM-Methode (Randelementmethode) herangezogen, da sie besonders einfach und flexibel ist. Zusätzlich bietet das CSS-Framework für Nutzer Grid- und Spalten-Modifier sowie Wrapper.

Außerdem ist die CSS-Spezifität in der Klassen-Hierarchie sehr gering, was das Framework leicht konfigurierbar macht. Cutestrap bietet des Weiteren eine solide Grundlage für einen lebendigen Styleguide, denn die Dokumentation ist mit KSS (Knyle Style Sheets) erstellt und so leicht nachvollziehbar. Und das Beste: Cutestrap ist gezippt nur 8 KB groß.

Cutestrap steht auf GitHub zum Download zur Verfügung. Die Dokumentation findet sich auf der Projektwebsite, die auch gleichzeitig als Demo-Anwendung dient.

Name Cutestrap
Hersteller Tyler Childs
Projektwebsite https://www.cutestrap.com/
GitHub https://github.com/cutestrap/cutestrap

Aufmacherbild: Heart-shaped red ribbon on a wooden table von Shutterstock / Urheberrecht: Evgeny Starkov

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -