UIkit

Sass Strategie

UIkit Theme mit Sass erstellen

Less Strategie

UIKit mit Yarn installieren

Yarn ist ein Paketmanager. Wenn dieser installiert ist kann man es einfach hinzufügen. Hinweis: es gibt wohl auch eine npm Version. Nach Recherche scheint Yarn hinsichtlich Müllerzeugung, Sicherheit und Deinstallierbarkeit auf dem Rechner das bessere Instrument sein.

yarn add uikit

Dann wird in node_modules uikit installiert

FOLDER	DESCRIPTION
/src	Contains all Less, JavaScript and image sources.
/dist	Contains compiled CSS and JS, updated on every release.
/tests	Contains HTML test files of all components.

Manuelle Strategie

UIKit Customizer

Erzeugt ein Theme CSS Dateien

UIKit Events

Die UIKit Komponenten stellen Events zur Verfügung die man für eigene Skripte nutzen kann.

Beispiele

Slideshow Events

// Using **** JQuery ****
// Initialize slideshow
var slideshow = UIkit.slideshow('#slideshow');

// Variable with element that fire event
var $slideItem = $('#slideshow ul > li');

$slideItem.on('beforeitemshow', function(){
   UIkit.notification({ message: 'Fire Before Item Show', timeout:1000 });
});
$slideItem.on('itemshown', function(){
   UIkit.notification({ message: 'Item shown', timeout:1000 });
});

Toggle Component Events (Vanilla JS)

<div class="uk-container">
  <div class="uk-grid-expand">
    <h1>UIKit Toggle Events</h1>
    <button id="toggle" uk-toggle="target: #target">THE TRIGGER</button>
    <div id="target">THE TARGET</div>
  </div>
</div>

var ready = (callback) => {
  if (document.readyState != "loading") callback();
  else document.addEventListener("DOMContentLoaded", callback);
}
ready(() => { 
  // get element that fires the events (use the target not the trigger)
  var ele = document.getElementById('target');
  
  // catch events and do something 
  ele.addEventListener('shown',function(e){
    UIkit.notification({ message: 'shown event fired', timeout:2000 });
  });

  ele.addEventListener('hidden', function(e){
    UIkit.notification({ message: 'hidden event fired', timeout:2000 });
  });
});
// other events are: beforeshow, show, beforehide, hide
// Ref: https://getuikit.com/docs/toggle