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.