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: