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.