Ansehnliche Kartenlayouts mit Bootcards erstellen

Bootcards: kartenbasiertes UI-Framework
Keine Kommentare

Twitter, Google, Pinterest, Amazon & Co. haben es vorgemacht: Mithilfe von Kartenlayouts werden dem Leser übersichtlich und ansehnlich Inhalte dargestellt. Solche Listen, Summary-, File- oder Media-Karten lassen sich mithilfe des UI-Frameworks Bootcards generieren. Das kartenbasierte Bootcards baut auf Bootstrap auf und ermöglicht ferner die Erstellung von dynamischen Dashboards.

Kartenbasierte UIs erfreuen sich großer Beliebtheit – im Web und auch mobile. Gerade bei mobilen Devices wie Tablets und Smartphones bietet sich das UI-Design auf dynamischer Kartenbasis intuitiv an. Egal ob Kontakt-, Routen-, Kalender-, ToDo- oder Dateiinformationen Im Zeitalter der schnellen Information treffen kartenbasierte UIs den Nerv der Zeit.

Paul Adams Einschätzung trifft desn Nagel auf den Kopf. Er hält die kartenbasierten UIs für die Design-Patterns der Zukunft:

If the predominant medium of our time is set to be the portable screen (think phones and tablets), then the predominant design pattern is set to be cards. The signs are already here…

Auf einer Karte lassen sich an und für den User angepasste Informationen in einzelne Einheiten kategorisieren. Das soll die Übersichtlichkeit steigern und neben einem attraktiven Design auch die Usability auf ein neues Niveau heben. Vorreiter sind Google Now, Twitter und Facebook mit ihren Kartensystemen, Instagram, Pinterest und viele andere.

Bootcards – Features und Funktsumfang

Wie der Name schon andeutet, basiert das UI-Framework auf Version 3 von Bootstrap. Bootcards ist für iOS, Android und den Desktop entwickelt, für Smartphones und Tablets gleichermaßen optimiert und soll laut den Entwicklern durch die enthaltenen Stylesheets stets einen „native look & feel“ bieten. Mit der Bootcards Demo-App kann man sich ein Bild davon machen, welche Figur das Framework auf unterschiedlichen Devices macht.

Grundsätzlich dient Bootcards dazu, Listen, Summary-, File- oder Media-Karten zu erstellen. Die Listen können dabei mehr Informationen als gewöhnlich enthalten. Die Summary-Karten sind ein geeigneter Weg, um kartenbasierte Dashboards zu kreieren. Der Entwickler Taulant Spahiu stellt in seiner informativen Bootcards-Einführung für jede der Anwendungsarten ein mit CodePen eingearbeitetes Beispiel vor. Auf GitHub sind diese diese Bootcards-Examples zugänglich gemacht.

Zudem bietet Bootcards für Tablet-User, anders als andere UI-Frameworks, ebenso ein Zwei-Fenster-Interface wie auch ein Einzelfenster-Interface. Das Einzelfenster-Interface wird im Fall von Portraits interessant: Um mehr Raum für den Content zu bieten, wird die Liste der Karten in den Hintergrund geschaltet.

Installation und Einstieg

Die Einrichtung des Frameworks ist ziemlich simpel. Zuerst wird die Grundlage geschaffen: Schritt eins ist deshalb die Installation von Bootstrap. Jetzt muss nur noch die OS-spezifische CSS-Datei und die Bootcards-JavaScript-Datei integriert werden. Die herunterzuladende CSS-Datei hängt jeweils vom Device ab, das benutzt werden soll.

Spezifische Anpassungen für Tablet- und Smartphone-User lassen sich mithilfe von JavaScript erreichen. So kann man zum Beispiel das vorgestellte Einzelfenster-Interface für Tablets deaktivieren oder einen Hintergrund anzeigen lassen, wenn das offCanvas-Menü aktiv ist.

Die nötigen Code-Schnippsel lassen sich der offiziellen Webiste und dem Bootcard-Starter-Template auf GitHub entnehmen.

Name Bootcards
Hersteller Teamstudio
Projektwebsite http://bootcards.org/
GitHub https://github.com/bootcards
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 -