UIkit
UIkit ist ein Open Source Front-End Framework, welches eine Vielzahl an Interface Elementen zur Verfügung stellt. Dank dieser Elemente kann der Gestaltungsprozess von Webseiten und Apps vereinfacht werden. So können auch ohne umfangreiche CSS Kenntnisse moderne, responsive, schnelle und leistungsfähige Web Interfaces designt werden.
Die einzelnen Bestandteile, welche UIKit zur Verfügung stellt, sind in unterschiedliche Komponenten unterteilt. Diese können im Code ohne weitere Mühe einzelnen Elementen zugefügt werden, wodurch sich in kurzer Zeit bereits eine funktionierende, gestaltete Webseite erstellen lässt.
Im Folgenden seht ihr unsere Beispielwebseite:
Wie wird UIkit verwendet?
UIKit kann ganz einfach von der offiziellen Webseite aus heruntergeladen werden. Das Package enthält bereits sämtliche CSS, JS und Icon Dateien, die für die Nutzung benötigt werden.
Im Folgenden sollten sämtliche Dateien in den Head des HTML Dokumentes eingebettet werden.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="css/uikit.min.css"/>
<link rel="preconnect" href="https://fonts.googleapis.com/"/>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin/>
<link
href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/styles.css"/>
<script src="js/uikit.min.js"></script>
<script src="js/uikit-icons.min.js"></script>
</head>Basis
UIkit’s Komponenten definieren den Basis-Look der Seite. Grundsätzlich nutzt UIkit das berühmte Normalize.css, um Elemente zu bearbeiten und bereits ein grundlegendes Design zu etablieren. Allerdings werden hierbei nur die wichtigsten Elemente bereits in die Base Komponenten übernommen, um die Datei so robust wie möglich zu halten und Konflikte mit externen CSS-Dateien größtenteils zu vermeiden.
Zu diesen Base-Komponenten gehören:
<!-- Links -->
<a>Links</a>
<!-- Eingebetteter, bereits responsiver Inhalt -->
<audio>
<video>
<img>
<svg>
<!-- Paragraphen -->
<p>Paragraphen</p>
<!-- Überschriften <h1> bis <h6> -->
<h1>h1 bis h6</h1>
<!-- Listen -->
<ul>
<ol>
<dl>
<li>
<!-- Horizontale Linien -->
<hr>
<!-- Zitate -->
<blockquote>
<!-- Vorformatierter Text -->
<pre>
<code>Utility
UIkit beinhaltet eine große Ansammlung einzelner Hilfsklassen, für eine weitere Gestaltung des Layouts.
Panel
UIkit nutzt Panels, um Inhalte voneinander abzugrenzen und zu umranden. Hierfür wird .uk-panel einem <div> Element zugewiesen. Mithilfe von .uk-panel-scrollable können diese Panels scrollbar gemacht werden.
Floating-Elemente
Die sogenannten »Floating-Elements« werden aus dem Dokumentenfluss entnommen und je nach zugewiesener Klasse an der linken oder rechten Seite des Containers ausgerichtet.
Overflow
Durch Overflow lassen sich die Dimensionen der Container einzelner Elemente anpassen.
Resize
Durch Resize lassen sich die Elemente in ihrer Größe beeinflussen. Die Klasse stellt hierbei einen Regler zur Verfügung, durch welchen sich die Elemente durch einfaches Ziehen mit der Maus ändern lassen.
Display
Display ändert die Anzeigeeigenschaften eines Elementes.
Inline
Inline wird gerade dafür verwendet, für Container mit Bildern in der Unterklasse einen Positionskontext herzustellen. Der Container behält hierbei Größe sowie Reaktionsverhalten des Bildes bei. Auf diese Weise fließt Inhalt, der über dem Bild platziert wurde, nicht über.
Responsive Objekte
<img>, <canvas>, <audio> und <video> Elemente übernehmen die Breite derer Elterncontainer. Um responsives Verhalten zu I-Frames hinzuzufügen, kann diesen das Attribut uk-responsive gegeben werden.
Object-Fit und Position
Object-Fit- und Position-Klassen definieren, wie Videos oder Grafiken von der Größe her angepasst werden können, um sie ihren Elementen anzugleichen.
Da Bilder und Videos in UIkit standardmäßig responsiv gestaltet sind, ist es essenziell, Seitenverhältnisse festzulegen, wenn eine dieser Klassen verwendet wird.
Beispielsweise style="aspect-ratio: 1 / 1"
Um die Ausrichtung des Bildes oder Videos innerhalb seines Elements zu ändern, kann zusätzlich uk-object-position-* gegeben werden.
Logo
Mit uk-logo kann ganz einfach ein Element als Logo definiert werden.
Blend Modes
Beim Einfügen einer der Blend-Mode-Klasse werden verschiedene Elemente miteinander verblendet. Diese Klassen können auch mit Overlay-Komponenten genutzt oder kombiniert werden.
Disabled
.uk-disabled deaktiviert das Klickverhalten eines beliebigen Elements wie <a>, <button> oder <iframe>.
Drag
Um einen Bewegungscursor auf gezogene Elemente anzuwenden, kann die Klasse .uk-drag diesem hinzugefügt werden.
Visibility
Visibility-Klassen werden genutzt, um verschiedene Elemente auf den Webseiten ein- oder auszublenden. Hierbei werden verschiedene Aspekte wie die Bildschirmbreite mit einbezogen.
Gerade beim Gestalten eines responsiven Layouts, können diese Klassen dabei behilflich sein, Elemente ab einer bestimmten Bildschirmgröße platzsparender anzuzeigen.
Um Elemente zu verstecken, kann .uk-hidden oder .uk-invisible verwendet werden. .uk-hidden blendet das Element dabei auf jedem Gerät aus. .uk-invisible versteckt das jeweilige Element nur, ohne es aus dem Dokumentenflow zu entfernen.
In beiden Fällen können die Klassen jedoch mit Komponenten für die Bildschirmgröße ergänzt werden. So werden diese erst ab einer festgelegten Bildschirmgröße aktiviert.
.uk-hidden@s
(Für kleine Bildschirme)
<li class="uk-hidden@l">
<a class="uk-margin-small-left"
uk-icon="menu"
uk-toggle="target: #offcanvas-navigation">
</a>
</li>.uk-visible@m
(Für mittelgroße Bildschirme)
<li class="uk-visible@l">
<a href="#">
<span
class="uk-margin-small-right uk-ico uk-text-center"
uk-icon="location">
</span>
LOCATION</a>
</li>Um Elemente anzeigen zu lassen, während der Mauscursor darüber fährt oder diese im Fokus sind, kann dem Elternelement die Klasse .uk-visible-toggle dem Kinderelement je nach Bedarf .uk-hidden-hover oder .uk-invisible-hover geben werden.
<div
class="uk-position-relative uk-visible-toggle uk-light uk-margin-
xlarge-top uk-margin-xlarge-left uk-margin-xlarge-right"
tabindex="-1"
uk-slider>
</div>Um Elemente auf Touchscreens zu verdecken, können auch .uk-hidden-touch und .uk-hidden-notouch genutzt werden.
Komponente
Off-Canvas
Für mobile Ansichten benötigen wir oftmals eine Sidebar mit unterschiedlichen Navigationspunkten. Dafür eignet sich die Funktion Off-Canvas.
Um ein Off-Canvas-Element zu erstellen, wird hierbei das Attribut uk-offcanvas einem Eltern-<div>-Element zugeordnet. Das .uk-offcanvas-bar-Attribut einem darin liegenden Kind-<div>-Element.
<div id="offcanvas-navigation" class="uk-section-secondary" uk-offcanvas="mode: push;">
<div class="uk-offcanvas-bar"></div>
</div>Die Off-Canvas-Komponente kann durch jedes beliebige Element umgeschaltet, sowie durch <a> oder <button> abgeschaltet werden.
<button class="uk-offcanvas-close" type="button" uk-close></button>Es ist außerdem möglich, ein Overlay anzulegen, welches die restliche Seite ausblenden, die Ausrichtung des Off-Canvas-Elements an sich oder die Slide-Animation ändern kann.
Der Aufbau einer Off-Canvas-Navigation sieht in unserem Beispiel wie folgt aus
<nav>
<div id="offcanvas-navigation" class="uk-section-secondary" uk-offcanvas="mode: push;">
<div class="uk-offcanvas-bar">
<button class="uk-offcanvas-close" type="button" uk-close></button>
<div class="uk-navbar-vertical uk-margin-left">
<ul class="uk-navbar-nav" uk-tab>
<li class="uk-active">
<a href="#a" class="uk-margin-large-right">
<span class="uk-margin-small-right uk-ico uk-text-center" uk-icon="home"></span> HOME </a>
</li>
<li>
<a href="#" class="uk-margin-large-right">
<span class="uk-margin-small-right uk-ico uk-text-center" uk-icon="location"></span> LOCATION </a>
</li>
<li>
<a href="#">
<span class="uk-margin-small-right uk-ico uk-text-center" uk-icon="calendar"></span> VERANSTALTUNG </a>
</li>
</ul>
</div>
</div>
</div>
</nav>Navigationsleiste
Die Navbar-Komponente besteht aus einem Navbar-Container, der Navbar selbst und einer oder mehreren Navigationspunkten.
Um die Navigationsleiste auch beim Scrollen sichtbar zu halten, kann man sie sticky machen. Diese lässt die Elemente beim Scrollen oben im Ansichtsfenster (Viewport) stehenbleiben.
Man kann der Navigationsleiste auch benutzerdefinierte Inhalte wie Text, Symbole, Schaltflächen oder Formulare hinzufügen. Hierfür muss die Klasse .uk-navbar-item einem <div>-Element hinzugefügt werden, welches als Container für die Inhalte dient.
Fügt man die .uk-logo-Klasse aus der Utility-Komponente zu einem <a>- oder <div>-Element hinzu, kann man ein Logo anzeigen lassen.
<div class="uk-navbar-vertical uk-margin-left">
<ul class="uk-navbar-nav" uk-tab>
<li class="uk-active">
<a href="#a" class="uk-margin-large-right">
<span class="uk-margin-small-right uk-ico uk-text-center"></span>
</a>
</li>
</ul>
</div>Videos Einbinden
Ui-kit bietet ebenfalls die Funktion an, Videos auf eine Website einzubinden. Hierbei wird das Video bereits ohne Angabe weiteren Codes pausiert, sobald dieses vonseiten des CSS verdeckt ist oder es sich außerhalb des sichtbaren Bereiches befindet. Zudem lassen sich die Videos ebenfalls stummschalten, um diese wie in unserem Beispiel als Hintergrund verwenden zu können.
Um Videos in den Code einzubinden, wird das Attribut uk-video einem <video>-Element zugeordnet.
Um ein Video abzuspielen, wenn es in den Darstellungsbereich eintritt, und es wieder anzuhalten, wenn es den Darstellungsbereich verlässt, kann das Attribut uk-video="autoplay: inview" einem <video>-Element hinzugefügt werden.
<video
class="uk-overlay-primary"
src="videos/sushi.mp4"
autoplay=""
loop=""
muted=""
playsinline=""
uk-cover=""
uk-video="autoplay: inview"
style="height: 400px; width: 711px">
</video>Transition
Transitions gestalten den Übergang beim Bewegen oder Fokussieren eines Elements. Hierfür wird die Klasse .uk-transition-toggle einem Elternelement zugeteilt. Durch tabindex="0" wird die Animation durch Tastaturnavigation und auf Touch-Geräten fokussierbar.
Jedem untergeordneten Element wird im Anschluss eine der Klassen .uk-transition-* hinzugefügt, um den eigentlichen Effekt anzuwenden.
<li data-category="restaurant"
data-size="20km"
class="uk-padding-remove
uk-margin-remove
uk-transition-toggle">
</li>Overlay
Durch das Vergeben von .uk-overlay an ein Element, welches einem Bild oder, wie in unserem Beispiel, einem Video folgt, wird ein einfaches Overlay erstellt. Für den Positionskontext wird .uk-inline der Utility-Komponenten an einen Container um das Bild und dem Folgeelement vergeben.
Durch .uk-light oder .uk-dark kann der Text noch dazu angepasst werden, sodass er für höhere Sichtbarkeit sorgt. Genauso kann durch .uk-overlay-default oder .uk-overlay-primary der Hintergrund heller oder dunkler gestaltet werden.
Im Normalfall hat das Overlay bereits ein gewisses Padding, ist allerdings nicht weiter modifiziert.
Overlays können neben Text auch beispielsweise Icons anzeigen. Hierfür kann das Attribut uk-overlay-icon an ein <span>-Element innerhalb des Overlays vergeben werden.
Durch die .uk-position-* Klasse kann die Position des Overlays an sich angepasst werden.
<video
class="uk-overlay-primary"
src="videos/sushi.mp4"
autoplay=""
loop=""
muted=""
playsinline=""
uk-cover=""
uk-video="autoplay: inview"
style="height: 400px; width: 711px">
</video>Filter
Die Filterkomponente kann jegliches Layout, unabhängig von der Item-Positionierung, filtern oder sortieren. Oftmals agiert dieser hierbei gemeinsam mit den Grid-Komponenten.
Um den Filter zu nutzen, wird zunächst ein Container-Element mit dem Attribut uk-filter="target: *" benötigt. Darin sollte sich eine Liste mit Filter-Controls sowie den zu filternden Items befinden. Diese werden unter dem Attribut uk-filter-control angegeben.
Um die Metadaten, nach welchen gefiltert werden soll, festzulegen, wird hierbei das Attribut filter: * genutzt.
<div uk-filter="target: *">
<li class="uk-active" uk-filter-control>
<a href="#">
All
</a>
</li>
</div>Einzelnen Items können mehrere Filter zugewiesen werden.
<li
data-category="restaurant"
data-size="20km"
class="uk-padding-remove uk-margin-remove uk-transition-toggle">
</li>Zudem können Items mit mehreren Filtern gleichzeitig gefiltert werden, hierfür müssen die Filter Controls lediglich gruppiert werden. Um dies zu erreichen, wird die Option group:* dem uk-filter-control zugeordnet und mit einem Gruppennamen für die Metadaten versehen.
<li
uk-filter-control="filter: [data-category='restaurant'];
group: data-color">
</li>Auch hier lassen sich die Filteroptionen wieder durch die Animation Option animieren und individuell anpassen. Zusätzlich kann der Filter zurückgesetzt werden, indem lediglich das uk-filter-control-Attribut ohne zusätzlichen Selektor vergeben wird.
Items können zudem alphabetisch geordnet werden. Hierfür wird die Option sort: ATTRIBUT dem uk-filter-control-Attribut zugeordnet und das Metadatenattribute definiert, nach welchem geordnet werden soll.
Grid
Mit der Grid-Komponente kann ein dynamisches und ansprechendes Grid-Layout erstellt werden. Rasterelemente ordnen sich hierbei fließend und nahtlos für ein lückenloses mehrspaltiges Layout auf allen Gerätegrößen passend an.
Um ein Grid zu erstellen, müssen die Container-Elemente zunächst mit dem uk-grid Attribut ausgestattet werden. Die Breite der einzelnen Container werden mithilfe der Klasse uk-child-width-* festgelegt.
<div
class="uk-grid-small uk-grid-divider uk-child-width-auto uk-margin-xlarge-top uk-margin-xlarge-left uk-margin-xlarge-right uk-margin-small-bottom"
uk-grid>
</div>Die Lücken zwischen den Elementen werden durch uk-grid-medium verändert.
<!--
<div
class="uk-grid-small uk-grid-divider uk-child-width-auto uk-margin-xlarge-top uk-margin-xlarge-left uk-margin-xlarge-right uk-margin-small-bottom"
uk-grid>
-->
<ul
class="js-filter uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-3@m uk-text-center uk-grid-medium uk-margin-xlarge-right uk-margin-xlarge-left"
uk-grid="masonry: true"
uk-margin>
</ul>
<!--
</div>-->Jeder einzelne Container bekommt schließlich noch die Klasse uk-panel.
<div
class="uk-panel uk-grid-small uk-grid-divider uk-child-width-auto uk-margin-xlarge-top uk-margin-xlarge-left uk-margin-xlarge-right uk-margin-small-bottom"
uk-grid>
<!--
<ul
class="js-filter uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-3@m uk-text-center uk-grid-medium uk-margin-xlarge-right uk-margin-xlarge-left"
uk-grid="masonry: true"
uk-margin>
</ul>
</div>-->Icons
Für Icons stellt UIkit eine eigene große Icon-Bibliothek aus einem eigenen Vektor-Icon-System zur Verfügung. Diese Komponente versorgt die Seite mit qualitativen SVG-Icons, welche durch CSS in Größe und Farbe editiert werden können.
Um sich die Icons zunutze zu machen, muss im Header zunächst das Icon-Library-Script eingefügt werden.
<script src="uikit/dist/js/uikit-icons.min.js"></script>
Im Anschluss lassen sich die Icons durch das Vergeben des Attributs uk-icon einem <span> oder <a> zuordnen. Hierbei wird durch icon: * das gewünschte Vektor-Icon vergeben. Sollte das Icon, das einzige Attribut innerhalb des Elements sein, kann auch lediglich uk-icon= "*" vergeben werden.
Icons können zusätzlich noch individuell modifiziert werden.
<a class="uk-margin-small-left" uk-icon="menu" uk-toggle="target: #offcanvas-navigation"></a>Cover
Cover geben die Möglichkeit Bilder, Videos oder I-Frames über den gesamten Container zu ziehen und den eigenen Inhalt darüber zu platzieren.
Hierfür lässt sich .uk-cover-container einem Elternelement zuordnen, sowie uk-cover dem dazugehörigen Bild. Zusätzlich lässt sich die Positionskomponente nutzen, um weitere Inhalte über dem Cover-Element zu platzieren.
Bei Videos erbt das jeweilige Cover-Element jegliche Eigenschaften des ursprünglichen Videoelements.
Höhe und Breite des Covers lässt sich mithilfe eines unsichtbaren <canvas> Element bestimmen, dem eine Höhe und Breite zugeordnet wird.
<div class="uk-cover-container uk-light">
<canvas width="600" height="800"></canvas>
<video
class="uk-overlay-primary"
src="videos/sushi.mp4"
autoplay=""
loop=""
muted=""
playsinline=""
uk-cover=""
uk-video="autoplay: inview"
style="height: 400px; width: 711px">
</video>
<div class="uk-overlay-primary uk-position-cover"></div>
<div class="uk-position-cover uk-padding-large uk-text-right">
<h1 class="font">
Discover Ulm <br>
and its best food
</h1>
</div>
</div>Lightbox
Durch UIkit lässt sich leicht eine Lightbox sowie eine Lightbox-Galerie mit Bildern oder Videos aufbauen.
Diese funktioniert responsiv und kann sowohl durch Touch als auch durch Swipe oder Mouse-drag navigiert und genutzt werden. Verschiedene Animationen sorgen hierbei für einen interessanten Effekt.
Um Lightbox nutzen zu können, muss das Attribut uk-lightbox einem Container zugefügt werden. Hierdurch werden sämtliche Anchor innerhalb des Containers in Lightbox-Links umgewandelt.
Sollte die Lightbox über mehrere Bilder verfügen, lassen sich auch hier die Übergänge animieren.
Im Allgemeinen ist eine Lightbox nicht nur auf Bilder reduziert. Auch andere Medien, wie beispielsweise Videos, können hier dargestellt werden. Durch href wird hierbei der Typ des verlinkten Contents definiert.
Zusätzlich können Custom Attribute vergeben werden, um beispielsweise Höhe und Breite eines Videos anzupassen.
<a
class="uk-button uk-button-default uk-cover-container uk-padding-remove"
href="bilder/diner.jpg"
data-caption="Roadhouse Diner Ulm City">
<img
class="uk-object-cover"
src="bilder/diner.jpg"
width="1000"
height="1000"
alt="Roadhouse Diner"
style="aspect-ratio: 1 / 1"/>
<!-- Overlay Text: Start -->
<div class="uk-position-center uk-light">
<div class="uk-transition-slide-top-small">
<h4 class="uk-margin-remove">Roadhouse Diner</h4>
</div>
<div class="uk-transition-slide-bottom-small">
<h4 class="uk-margin-remove">Ulm City</h4>
</div>
</div>
<!-- Overlay Text: Ende -->
</a>
</div>Slider
Um ein Slider zu erstellen, muss das Container-Element mit einem uk-slider-Attribut ausgestattet werden. Mithilfe einer ungeordneten Liste <ul>, werden die Bilder in einzelnen Listenpunkten <li> angelegt. Ein Einzelbild kann anschließend mit dem Text in einem <div>-Tag mit der Klasse uk-panel gruppiert und formatiert werden. Dieser Vorgang wird je nach Bilderanzahl beliebig oft wiederholt.
<div uk-lightbox>
<div class="uk-position-relative uk-visible-toggle uk-light uk-margin-xlarge-top
uk-margin-xlarge-left uk-margin-xlarge-right" tabindex="-1" uk-slider>
<ul class="uk-slider-items uk-grid">
<li class="uk-width-2-5">
<div class="uk-panel">
<img src="bilder/ulm.png" width="1800" height="1200" alt="" />
<div class="uk-position-center uk-text-center">
<h2 uk-slider-parallax="x: 100,-100">Heading</h2>
<p uk-slider-parallax="x: 200,-200"> Lorem ipsum dolor sit amet. </p>
</div>
</div>
</li>
</ul>
</div>
</div>Außerhalb der Liste wird der eigentliche Slider in einem <a>-Element bearbeitet und bekommt die Attribute uk-slidenav-previous, uk-slider-items="previous" für den linken Pfeil und uk-slidenav-next, uk-slider-items="next" für den rechten.
<!--
<div uk-lightbox>
<div class="uk-position-relative uk-visible-toggle uk-light uk-margin-xlarge-top
uk-margin-xlarge-left uk-margin-xlarge-right" tabindex="-1" uk-slider>
<ul class="uk-slider-items uk-grid">
<li class="uk-width-2-5">
<div class="uk-panel">
<img src="bilder/ulm.png" width="1800" height="1200" alt="" />
<div class="uk-position-center uk-text-center">
<h2 uk-slider-parallax="x: 100,-100">Heading</h2>
<p uk-slider-parallax="x: 200,-200"> Lorem ipsum dolor sit amet. </p>
</div>
</div>
</li>
-->
</ul>
<a
class="uk-position-center-right uk-position-small uk-hidden-hover"
href="#"
uk-slidenav-next
uk-slider-items="next">
</a>
<!--
</div>
</div>-->Form
Formulare sind unter UIkit recht einfach zu erstellen.
Durch unterschiedliche Modifier lassen sich hierbei Dinge wie der Status des Formulars, die Größe einzelner Textboxen oder auch deren Weite einstellen.
Zusätzlich stellt UIkit einzelne Layout-Optionen und Custom Controls wie File Inputs oder Auswahlfunktionen bereit.
Auch Icons lassen sich innerhalb eines Textfeldes einfügen und können sogar klickbar gemacht werden.
<form action="javascript:void(0)">
<input
class="uk-input uk-form-width-small"
type="text"
placeholder="Email adress"
aria-label="Input"/>
<button class="uk-button uk-button-default">SIGN UP</button>
</form>Animation
Animationen können mithilfe der .uk-animation-* Klasse hinzugefügt werden. Diese Animation wird dann normalerweise sofort bei dem Laden der Seite angezeigt. Um die Animation an einer anderen Stelle bzw. einem anderen Zeitpunkt anzuzeigen, müssen diese Animationen mithilfe von JavaScript hinzugefügt werden. Alle Animationen selber sind jedoch mit CSS implementiert, also wird kein JavaScript zum Abspielen dieser benötigt.
UIkit bietet natürlich noch eine ganze Menge weiterer Möglichkeiten und Elementen an, welche individuell ganz einfach eingebunden und nach Belieben und eigenen Wünschen modifiziert werden können. Sämtliche Informationen hierfür sind auf der offiziellen Seite von UIkit unter UIkit (getuikit.com) zu finden.
