Dieter Petereit 4. Dezember 2017

Shards: Modernes UI-Kit auf Basis von Bootstrap 4 als Open Source

UI-Kits gibt es viele, auch kostenlose. Shards von Designrevision ragt dennoch aus der Masse, weil es nicht nur kostenlos, sondern auch ausgesprochen ansehnlich und modern ist.

Catalin Vasile aka Designrevision

Shards ist das erste Produkt aus dem Hause Designrevision. Hinter dem Namen Designrevision verbirgt sich der „design-fokussierte Software-Entwickler“ (Selbstbeschreibung) Catalin Vasile. Catalin beabsichtigt wohl, mit Designrevision eine Marke zu schaffen, unter der er künftig hochwertige Design-Helfer vermarkten kann.

Das schließe ich unter anderem aus dem Aufbau der entsprechenden Website, auf der es immerhin den Punkt „Store“ gibt. Im Store findet sich allerdings aktuell nur ein einziges Produkt, nämlich Shards. Und Shards ist Open Source unter der liberalen MIT-Lizenz. So kannst du Shards sowohl für deine persönlichen, als auch für deine kommerziellen Zwecke, etwa in Kundenprojekten, verwenden. Nach eigenen Angaben arbeitet Catalin derzeit an einem kostenpflichtigen Add-on für Shards. Da hätten wir direkt schon ein Bezahlprodukt.

Shards und Bootstrap 4: So geht modernes Design

Shards basiert auf dem aktuellsten Bootstrap, nämlich der Version 4. Das UI-Kit integriert zudem die Symbolsätze der Material Icons und Font Awesome, was dir unkomplizierten Zugriff auf über 1.500 Piktogramme gibt. Icons werden als Klassen eingebunden und erfordern keine manuellen Eingriffe in den Quelltext ansonsten. So ist es möglich, Icons ohne weitere Anpassungen nahezu jedem Element beizufügen. Das erfolgt entweder mit einer klaren optischen Abgrenzung zum Text oder nahtlos direkt nebeneinander.

Kartenbasierte Designs mit Shards. (Screenshot: Dr. Web)

In Sachen Typografie könnte Shards mehr tun. Immerhin ist der Einsatz des schlichten Google-Fonts Poppins in verschiedenen Schnitten für Überschriften schon mal ein erster Ansatz. Fallback ist stets auf den eingestellten System-Font. Bei der Farbgebung setzt Shards auf etwas leuchtendere Varianten als den Bootstrap-Standard. Sehr nah am Material Design sind auch die Inhaltskarten.

Was Shards aber wirklich interessant macht, sind die interaktiven Elemente. Besonders die Gestaltung und Steuerung von Formularen und deren Feldern sieht ausgesprochen elegant aus. Das trifft ebenso für die Validierung zu. Auch das Design der Slider und Datums-Picker begeistert das Auge. So zieht sich die ausgesprochen gefällige Gestaltung durch alle Bereiche des UI-Kits, das zusätzlich Buttons, Badges, Fortschrittsbalken, Alerts, Tool-Tipps, Popovers und Modals umfasst.

Formularvalidation in schön. (Screenshot: Dr. Web)

Neben farblich passenden Navigationsleisten umfasst Shards zwei vollständige Landing Pages, sowie die fünf Megabyte große Sketch-Datei, die dem Design zugrundeliegt. Für den kostenfreien Download musst du Catalin eine gültige E-Mail-Adresse verraten, an die er dir die Downloadlinks senden kann. In der E-Mail findest du einen Link zum UI-Kit und einen weiteren zur Sketch-Datei. Den Haken zum Abonnieren des Newsletters kannst du, wenn du willst, auch weglassen. Ebensowenig ist die Nennung von Vor- und Zuname pflichtig.

Shards solltest du dir in jedem Falle sichern. Catalin hat übrigens angekündigt, eine React-Version seines Kits zu bringen. Hierzu gibt es allerdings noch keinen Zeitplan.

Die Demo von Shards findest du hier, die Dokumentation rufst du an dieser Stelle auf.

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Ein Kommentar

  1. Schöner Tipp! Danke! :)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück