Ontdek de UiKit

Op maandagavond 21 september 2015 gaf Etienne Martens een presentatie over de UiKit van YOOtheme.

UIkit is een framework met daarin classes voor labels, buttons, tabellen en andere gebruikersinterface-elementen. UIkit biedt meer dan 30 modulair uitbreidbare componenten, die kunnen worden gecombineerd met elkaar. De UIkit is gemaakt door de developers van YOOtheme.

Als webmaster en frequent gebruiker van YOOtheme templates heb ik dagelijks te maken met de veelzijdigheid van de UIkit. 
“Van proberen kan je leren…” Dus in dat opzicht leek het mij een goed idee om het een en ander te gaan ontdekken en de opgedane kennis te delen bij een JUG.

"Tijdens de drukbezochte JUG-010 bijeenkomst heb ik slechts 2 onderwerpen gedeeltelijk behandeld. Het behandelen van de onderwerpen “grid” en “buttons” gaf voldoende inzicht om de potentie van de UIkit te laten zien. Alleen de eenvoudige basis uitleggen en enkele voorbeelden geven leek mij genoeg. Voldoende althans om de nieuwsgierigheid op te wekken en de aandacht van de zaal vast te houden."


Grid & Buttons

UIkit
Example UIKit Grid Width Bluepoint ECommerce
Example 2 UIKit Grid Width Bluepoint ECommerce
Example UIKit Grid Responsive Width Bluepoint ECommerce
Example UIKit Buttons Bluepoint ECommerce
Example 2 UIKit Buttons Bluepoint ECommerce

Om een volledig beeld te krijgen van alle mogelijkheden die het combineren van de 30 classes kan je het beste de website Get UIkit bezoeken.


2 Kolommen

Om de werking van een grid te laten zien heb ik 3 voorbeelden van een pagina laten zien waarbij een tekst is opgemaakt in 2 kolommen.

Er werden veel vragen gesteld. Vragen die betrekking hadden op de bovenstaande onderwerpen heb ik direct, soms aan de hand van voorbeelden, uitgelegd.

  1. In het eerste voorbeeld heb ik laten zien hoe je de tekst in twee kolommen kan zetten met de "uk-grid" en de "uk-width-1-2" classes. Hierbij staan de kolommen wel netjes naast elkaar, maar komen ze in de verdrukking als het beeldscherm te smal is.
  2. In het tweede voorbeeld heb ik laten zien hoe je de twee kolommen automatisch onder elkaar kan tonen als het beeldscherm smaller wordt.
  3. Het derde voorbeeld liet zien hoe je een nette tussenruimte kan creëren als de twee kolommen onder elkaar komen te staan.

Example 1 UIKit Grid Width 2 Kolommen Bluepoint ECommerce
Example 2 UIKit Grid Width 2 Kolommen Bluepoint ECommerce
Example 3 UIKit Grid Width 2 Kolommen Bluepoint ECommerce


Meer informatie over Etienne Martens kunt u vinden op zijn website webmastervoordezaak.nl

UI kit

  • Aangemaakt op .
  • Hits: 1295