Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » Boilerplates & andere Tools » Shards: Modernes UI-Kit auf Basis von Bootstrap 4 als Open Source

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

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Ein Kommentar
Lesedauer: 2 Minuten
  • von Dieter Petereit
  • 4. Dezember 2017

Inhaltsverzeichnis

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.

shards cards Shards: Modernes UI-Kit auf Basis von Bootstrap 4 als Open Source
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.

shards form validation Shards: Modernes UI-Kit auf Basis von Bootstrap 4 als Open Source
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

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 Technik-affine Medien wie T3N und Dr. Web. Dieter war acht Jahre lang Chefredakteur des Dr. Web Magazins.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

Johda Webdesign Berlin Logo.

JOHDA Webdesign

Berlin

VABELHAVT

Innsbruck

Marco Wydmuch von Glamourpixel fotografiert sich selbst mit einer Canon-Kamera in der Hand.

Glamourpixel Fotodesign

Gelsenkirchen

Trendmarke Logo.

Trendmarke GmbH

Stuttgart

360 grad konzept logo werbeagentur hannover.

Werbeagentur Hannover | 360 Grad Konzept

Hannover

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Die passende Digitalagentur finden: Das solltest Du beachten

Wir unterstützen Dich bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Mitarbeiter einer WordPress-Agentur mit einer Tasse Kaffee im Vordergrund.
WordPress

WordPress — eine gute Wahl für Ihre Unternehmenswebsite?

Hier finden Sie ein ausführliches FAQ zu WordPress als Entscheidungshilfe und eine Auswahl von professionellen WordPress Agenturen.

→

Eine Antwort zu „Shards: Modernes UI-Kit auf Basis von Bootstrap 4 als Open Source“
— was ist Deine Meinung?

  1. Sebastian sagt:
    5. Dezember 2017 um 13:10 Uhr

    Schöner Tipp! Danke! 🙂

    Antworten

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑