Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dieter Petereit 4. Dezember 2017

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

UI-Kits gibt es vie­le, auch kos­ten­lo­se. Shards von Designrevision ragt den­noch aus der Masse, weil es nicht nur kos­ten­los, son­dern auch aus­ge­spro­chen ansehn­lich und modern ist.

Catalin Vasile aka Designrevision

Shards ist das ers­te Produkt aus dem Hause Designrevision. Hinter dem Namen Designrevision ver­birgt sich der „design-fokus­sier­te Software-Entwickler“ (Selbstbeschreibung) Catalin Vasile. Catalin beab­sich­tigt wohl, mit Designrevision eine Marke zu schaf­fen, unter der er künf­tig hoch­wer­ti­ge Design-Helfer ver­mark­ten kann.

Das schlie­ße ich unter ande­rem aus dem Aufbau der ent­spre­chen­den Website, auf der es immer­hin den Punkt „Store“ gibt. Im Store fin­det sich aller­dings aktu­ell nur ein ein­zi­ges Produkt, näm­lich Shards. Und Shards ist Open Source unter der libe­ra­len MIT-Lizenz. So kannst du Shards sowohl für dei­ne per­sön­li­chen, als auch für dei­ne kom­mer­zi­el­len Zwecke, etwa in Kundenprojekten, ver­wen­den. Nach eige­nen Angaben arbei­tet Catalin der­zeit an einem kos­ten­pflich­ti­gen Add-on für Shards. Da hät­ten wir direkt schon ein Bezahlprodukt.

Shards und Bootstrap 4: So geht modernes Design

Shards basiert auf dem aktu­ells­ten Bootstrap, näm­lich der Version 4. Das UI-Kit inte­griert zudem die Symbolsätze der Material Icons und Font Awesome, was dir unkom­pli­zier­ten Zugriff auf über 1.500 Piktogramme gibt. Icons wer­den als Klassen ein­ge­bun­den und erfor­dern kei­ne manu­el­len Eingriffe in den Quelltext ansons­ten. So ist es mög­lich, Icons ohne wei­te­re Anpassungen nahe­zu jedem Element bei­zu­fü­gen. Das erfolgt ent­we­der mit einer kla­ren opti­schen Abgrenzung zum Text oder naht­los direkt neben­ein­an­der.

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

In Sachen Typografie könn­te Shards mehr tun. Immerhin ist der Einsatz des schlich­ten Google-Fonts Poppins in ver­schie­de­nen Schnitten für Überschriften schon mal ein ers­ter Ansatz. Fallback ist stets auf den ein­ge­stell­ten System-Font. Bei der Farbgebung setzt Shards auf etwas leuch­ten­de­re Varianten als den Bootstrap-Standard. Sehr nah am Material Design sind auch die Inhaltskarten.

Was Shards aber wirk­lich inter­es­sant macht, sind die inter­ak­ti­ven Elemente. Besonders die Gestaltung und Steuerung von Formularen und deren Feldern sieht aus­ge­spro­chen ele­gant aus. Das trifft eben­so für die Validierung zu. Auch das Design der Slider und Datums-Picker begeis­tert das Auge. So zieht sich die aus­ge­spro­chen gefäl­li­ge Gestaltung durch alle Bereiche des UI-Kits, das zusätz­lich Buttons, Badges, Fortschrittsbalken, Alerts, Tool-Tipps, Popovers und Modals umfasst.

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

Neben farb­lich pas­sen­den Navigationsleisten umfasst Shards zwei voll­stän­di­ge Landing Pages, sowie die fünf Megabyte gro­ße Sketch-Datei, die dem Design zugrun­de­liegt. Für den kos­ten­frei­en Download musst du Catalin eine gül­ti­ge E-Mail-Adresse ver­ra­ten, an die er dir die Downloadlinks sen­den kann. In der E-Mail fin­dest du einen Link zum UI-Kit und einen wei­te­ren zur Sketch-Datei. Den Haken zum Abonnieren des Newsletters kannst du, wenn du willst, auch weg­las­sen. Ebensowenig ist die Nennung von Vor- und Zuname pflich­tig.

Shards soll­test du dir in jedem Falle sichern. Catalin hat übri­gens ange­kün­digt, eine React-Version sei­nes Kits zu brin­gen. Hierzu gibt es aller­dings noch kei­nen Zeitplan.

Die Demo von Shards fin­dest du hier, die Dokumentation rufst du an die­ser 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.

Ein Kommentar

  1. Schöner Tipp! Danke! :)

Schreibe einen Kommentar

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