0t1 steckt noch in den Kinderschuhen.

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:

Eine 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>

  • eingebetteter, bereits responsiver Content; <audio>, <video>, <img>, <svg> und <video>

  • Paragraphen; <p>

  • Überschriften; <h1> bis <h6>

  • Listen; <ul>, <ol>, <dl> und <li>

  • horizontale Linien; <hr>

  • Blockquote; <blockquote>

  • vorformatierter Text; <pre> und <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 Iframes hinzuzufügen, kann diesen das Attribut uk-responsive gegeben werden.

Object Fit and Position

Object Fit and Positionsklassen 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 essentiell, 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 diesen Klasse .uk-drag diesen 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>

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">

Die Off-Canvas-Komponente kann durch jedes beliebige Element um- sowie durch <a> oder <button> abgeschalten 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 oben im Ansichtsfenster bleiben.

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">

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 von Seiten 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">

Overlay

Durch das Vergeben von .uk-overlay an ein Element, welches einem Bild oder, wie in unserem Beispiel, Video folgt, wird ein einfaches Overlay erstellt. Für den Positionskontext wird .uk-inline der Utility Komponenten an einen Container um Bild und 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 Filter Komponente 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 das hierbei Attribut filter: * genutzt.

<li class="uk-active" uk-filter-control>
    <a href="#">
        All
    </a>
</li>

Einzelne Items können mehrere Filter zugewiesen werden.

<li
    data-category="restaurant"
    data-size="20km"
    class="uk-padding-remove uk-margin-remove uk-transition-toggle">

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">

Auch hier lassen sich die Filteroptionen wieder durch die Animation-Option animieren und individuell anpassen. Zusätzlich kann der Filter resettet 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>

Die Lücken zwischen den Elemente wird durch uk-grid-medium.

<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
          >

Jeder einzelne Container bekommt schließlich noch die Klasse uk-panel.

<div class="uk-panel">

Icons

Für Icons stellt UIkit eine eigene große Icon-Bibliothek aus einem eigenen Vektor Icon System zur Verfügung. Dieser Komponent versorgt die Seite mit qualitativen SVG-Icons, welche durch CSS in Größe und Farbe editiert werden können.

Um sich die Icons zu Nutze 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> zurodnen. 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 IFrames über den gesamten Container zu ziehen und den eigenen Content 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 weiteren Content über dem Covering 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 Lightboxgalerie mit Bilder oder Videos aufbauen.

Dieser 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 Attribute 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 Bidleranzahl 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>

Erst nach Schließen der Liste wird der eigentliche Slider in einem <a> Element bearbeitet und bekommen 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.

<a
    class="uk-position-center-right uk-position-small uk-hidden-hover"
    href="#"
    uk-slidenav-next
    uk-slider-item="next">
</a>

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 Layoutoptionen 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 dan 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 an 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.


© 0t1

Cookies

0t1 mag keine Kekse (und kein Tracking). Wir verwenden lediglich notwendige Cookies für essentielle Funktionen.

Wir verwenden Schriftarten von Adobe Fonts. Dafür stellt dein Browser eine Verbindung zu den Servern von Adobe in den USA her. Wenn du unsere Seite nutzen möchtest, musst du dich damit einverstanden erklären.

Weitere Informationen in unserer Datenschutzerklärung.