Es gibt heute viele UI–Frameworks im Web.

Zu den beliebtesten gehören Bootstrap von Twitter, Foundation, Pure, HTML5 Boilerplate und Skeleton, um nur einige zu nennen.

Einstieg UIKit

Sie bilden eine hervorragende Grundlage für die Erstellung ihrer Webprojekte, ohne dass sich selbst darum kümmern müssen, Grundraster und Stile neu zu erfinden oder sich mit Browser-Disrepamzem für viele der Standard-HTML-Elemente auseinandersetzen zu müssen.

Die meisten, wenn nicht alle, arbeiten auch auf der Basis von „mobile first“. Das heißt, sie verwenden reaktionsschnelles CSS, um sicherzustellen, dass ihre Website von Smartphones bis hin zu Desktop-Anwendungen gut aussieht.

Einige könnten argumentieren, dass dies eine faule Art zu arbeiten ist und es gibt sicherlich keinen Mangel an sachkundigen Web-Experten, die immer noch den Aufbau ihrer Website von Grund auf befürworten.

Aber der wahre Wert in jedem dieser Frameworks ist zweifach: Im Idealfall sorgen sie für ein konsistentes Erlebnis für ihre Benutzer, während Sie gleichzeitig die dafür erforderliche Entwicklungszeit einsparen. Praktisch.

Was ist UIKit?

UIKit ist ein CSS Framework – wie Bootstrap und Foundation – das ihnen eine „saubere Weste“ von Stilen für ihre Website bietet. Alles, was Sie tun müssen, ist, das benötigte CSS einzugeben, ihr HTML mit einigen spezifischen Klassen zu markieren und Sie können eine schöne, einfache und leicht zu bedienende Website in wenigen Minuten haben.

Keine Sorge mehr über diese kleinen Inkonsistenzen zwischen den verschiedenen modernen Browsern. Plus, wenn Sie überhaupt kein Styling machen möchten, brauchen Sie das nicht. UIKit kommt komplett verpackt mit einem einfachen, aber schönen Stil, der zu den meisten Websites passt. Der Umgang mit UIKit ist wirklich sehr einfach, wenn Sie die Dinge besser an ihre Bedürfnisse anpassen möchten.

Warum UIKit?

Wir haben viele dieser Frameworks im Laufe der Jahre selbst verwendet, haben uns aber seit der ersten Veröffentlichung als Open-Source-Projekt im Jahr 2011 hauptsächlich auf Bootstrap konzentriert und es ist großartig.

Es machte alles, was ich gebaut habe, so viel schneller und einfacher, solange ich die richtigen Klassen und Markups benutzte und sogar eigene Icons dabei hatte.

Als Bootstrap 3 veröffentlicht wurde, war das der Wendepunkt für mich, weil es sich so anfühlte, als müssten wir alle Seiten durchgehen und das HTML entsprechend überarbeiten, um mit der Änderung der Klassennamen und Layouts zu arbeiten, die eingeführt wurden.

Also suchten wir nach etwas Neuem.

Geben Sie UIKit ein. Es war nicht das erste Mal, dass wir es versucht haben, aber es war dasjenige, das einen bleibenden Eindruck hinterlassen hat, nicht nur wegen seiner Benutzerfreundlichkeit, den ziemlich semantischen Klassennamen und der Fülle an Optionen, sondern auch wegen des Stills` out the box`, welcher sauber, knackig und modern war.

Für bestimmte Bereiche von Websites, wie z.B. Formulare und Tabellen, kann UIKit mit seinen Komponenten umgehen, die es für die meisten Situationen gibt, die Sie benötigen.

Beispielsweise wird das Standardraster für Layouts als Komponente bezeichnet, ebenso wie Button, Alerts und sogar Modals.

Was es macht?

UIKit ist ein leichtgewichtiges und modulares Frontend-Framework für die Entwicklung schneller und leistungsfähiger Web-interfaces“ und arbeitet auf der Basis von Mobile-First-Styles bis hin zu Desktops.

Es macht genau das, was auf der Homepage steht. Es kommt auch dem Frontend-Designer-Bereich.

Nachdem wir das Archiv heruntergeladen, entpackt und dann unsere erste Seite damit erstellt haben, war ich erstaunt, wie einfach es war.

Anstatt allgemeine Klassen anzuwenden, die vorschreiben, wie viele Spalten ein Element aufnehmen soll, bestimmen die Klassen, welchen Anteil des Elternteils ein Element einnehmen soll.

Aber im Allgemeinen, wenn Sie wollen, dass ein Element die Hälfte des Elternteils einnimmt, geben Sie ihm eine Klasse von uk-width-1-2. uk.width-* ist die Helferklasse für alle breitenbasierten Messungen, also setzen Sie einfach ihren gewünschten Modifikator an das Ende und Sie sind fertig.

Betrachten Sie das folgende Beispiel:

Copy to Clipboard

Wir haben gerade einen Container geschaffen, der drei Elemente in sich vereint, die ein Drittel des Platzes einnehmen.

Diese müssen auch nicht in Verbindung mit

s verwendet werden, jedes Element auf Blockebende ist ausreichend, wie z.B.

oder

.Die Bibliothek verwendet Boxsizing, um sicherzustellen, dass die Breiten konsistent bleiben, egal welche Polsterung auf sie angewendet wird, so dass Sie die Polsterung und die Ränder dieser Elemente nach Belieben anpassen können, ohne sich darüber Gedanken machen zu müssen, dass das Display durcheinander gerät.Der Vorbehalt ist jedoch, dass, da die Bibliothek wirklich gut funktioniert, wenn sie die Seite richtig auslegt wird, diese Hauptbibliothekselemente nicht zu ändern, sondern stattdessen ein Element innerhalb eines der britischen Breiten-Elemente hinzuzufügen und diesen Stil zu verwenden.

Im obigen Beispiel haben wir Elemente aus der Panel-Komponente verwendet, die im Wesentlichen als visuelles Layout-Werkzeug zum Erstellen von Panels verwendet wird. Es gibt drei Standard-Panelstile, die mit dem UIKit hinzugefügt wurden, aber Sie können ganz einfach ihre eigenen hinzufügen, indem Sie Klassen erstellen, welche die Farben festlegen.

Weitere Layoutkomponenten sind „Artikel“, „Kommentar“ und eine „Utility“-Komponente, die zur Gestaltung von Dingen verwendet wird, die nicht von den anderen Komponenten abgedeckt werden, wie z.B. Rand, Ausrichtung und Überschriftenmodifikatoren. Da gibt es genug zum Spielen.

Neben den Layoutkomponenten gibt es auch die unter „Allgemein“ aufgelisteten und diese beinhalten Dinge, mit denen Sie wahrscheinlich vertraut sind, wenn Sie andere CSS-Frameworks verwendet haben. Dinge wie Alarme, Ausweise, Button und Fortschrittsanzeigen sind ebenso enthalten wie viele andere. Sehen Sie sich die Beispiele auf der UIKit-Webseite an, um sie in Aktion zu sehen.

Wie es verwendet wird.

Für die meisten Frameworks ist lediglich eine CSS-Datei Voraussetzung. Sie benötigen auch die Schriften von Font Awesome, da das Framework diese als Standard für alle Icons verwendet. Das folgende HTML wird ihnen den Einstieg erleichtern:

Copy to Clipboard

Jetzt sind wir durch. Fangen Sie an, ihr HTML mit den UIKit-Klassen zu programmieren und Sie werden im Handumdrehen eine Website haben.

Auch JavaScript?

Es gibt eine Reihe von JavaScript-Ressourcen, die mit UIKit out-of-the-box gebündelt sind. Viele von ihnen sind bei den meisten Frameworks dieser Art Standard, aber nicht weniger effektiv. Eine der JavaScript-Komponenten, die wir besonders präferieren, ist „Off Canvas“, eine wirklich einfache Möglichkeit, ein Navigationssystem zu ihrer Website hinzuzufügen, insbesondere im Falle von mobilen Nutzern, das alles enthalten kann, was Sie wollen, aber nicht auf der Seite ist, bis eine Aktion angeklickt wird.

Copy to Clipboard

Wie Sie sehen können, müssen Sie nur ein einziges Datenattribut auf dem Button verwenden, damit der Button funktioniert, um das Off-Canvas aufzurufen und so funktionieren alle JavaScript-Komponenten. Es ist eine wirklich einfache und saubere Art, den Elementen das gewisse Extra an Funktionalität zu verleihen. Als weiteres Beispiel, wenn Sie einem Element einen Tooltip hinzufügen möchten, müssen Sie ihm nur einen Titel und ein Datenattribut von data-uk-tooltip geben und schon ist es da.

Eine neue Ergänzung zu den UIKit-Funktionen sieht einige nette JavaScript-Plugins in den Mix. Die Standard-Datums- und Zeit-Picker sind wirklich nett und das Notify-Add-on ist sauber, einfach und effektiv.

Themes.

Es gibt eine Reihe von Themes für UIKit. Sie sind alle sauber und einfach und können leicht von der Customizer-Section UIKit-Website heruntergeladen werden.

Wählen Sie einfach in der Dropdown-Liste das Thema aus, für das Sie das CSS verwenden möchten und wählen Sie, ob Sie nur das CSS oder das LESS herunterladen möchten. Wir bervorzugen den Standardstil, der flach und quadratisch ist, aber es gibt ein paar verschiedene Optionen für diejenigen, die Steigerungen und abgerundete Ecken bevorzugen.

Es sieht so aus, als würde der Entwickler auch eine Liste von Themes erstellen oder kompilieren, die andere erstellt haben, aber das schöne an UIKit ist seine Erweiterbarkeit.

Schlußfolgerungen.

Einige fantastische Dinge können Sie mit einem Tool wie UIKit umsetzen. Es ist zu unserem Werkzeug für alle unsere aktuellen Webentwicklungsprojekte geworden, weil es keine Zeit brauchte, um zu lernen, wie die Klassen funktionieren und welche wir verwenden sollten, da sie semantisch in ihrer Implementierung ist.

Die Standard-Stile der Website sehen toll aus und erfordern keine weiteren Anpassungen. Aber wenn es sein muss, ist es sehr einfach. Auch die JavaScript-Komponenten verwenden die gleichen Standards für das Styling und sind daher sehr einfach zu modifizieren.

Das gesamte JavaScript kann einfach über Datenattribute auf HTML-Tags aufgerufen werden und benötigt kein zusätzliches JavaScript. Sie haben aber auch die Möglichkeit, Dinge manuell aus ihrem eigenen JavaScript aufzurufen, wenn Sie es wünschen.

Es gibt viele Beispiele und wenn Sie nicht wissen, wie man etwas macht, gibt es zahlreiche Möglichkeiten sich über eine der vielen Community-Seiten zu informieren.

Also warum versuchen Sie es nicht? Sie werden mit ziemlicher Sicherheit sehr beeindruckt sein. Also probieren Sie einmal etwas Neues aus.

Vielen Dank für ihren Besuch.