AllEvents with uikit

Il y a environ deux semaines, Nicolas intégrateur de site Joomla habitant dans le sud de la France prend contact avec nous via le chat en ligne :

"Bonjour je trouve cette extension superbe, cependant je trouve que les images sont trop petite sur iphone et smartphone, pourquoi ne pas utiliser le système uikit ? Je préfère mettre une classe uikit comme ça les images ce dimensionne en fonction de la taille de l'écran. J'utilise uikit depuis quelque temps et c'est franchement génial".

Nous nous sommes donc penchés sur ce framework développé par Yootheme éditeur de thèmes pour Joomla

Définitions

Tout d'abord revenons un peu sur ces définitions : framework, thèmes, templates,...

Un framework est un ensemble d'outils vous permettant de dynamiser les affichages sur votre site. Ces outils peuvent être des feuille de style CSS, des scripts Javascript,... Le plus célébre d'entres eux est Bootstrap.

Un thème joomla (template en anglais) est un modèle de mise en forme pour les pages de votres sites joomla.

Le cas particulier de uikit

ui kit logo frontend framework

Yootheme est un éditeur de thèmes (entre autres) pour Joomla. Il a intégré dans ses thèmes son framework uikit.

Nous disposons d'un thème Joomla totalement intégré avec son framework. Vous vous êtes déjà rendu compte que certains thèmes nécessitent Bootstrap 2, d'autres du Bootstrap 3... Avec Yootheme vous n'avez pas ces souci, tout est intégré.

De plus, ils fournissent en plus leur framework sur la plateforme des projets opensource github.

Rappel qui nous semble utile : uikit n'est pas lié à joomla, c'est un framework développé par Yootheme.

Notre essai

Le premier contact a été rapide: 

  1. un n-ième framework
  2. une documentation très technique (normal me direz vous)
  3. des composants déjà existants par ailleurs : sélecteur de date, sélecteur d'heure, accordéon, menu...

Quel interet d'intégrer ce framework dans les développements AllEvents ?

Le second contact a été un peu plus poussé lorsque j'ai découvert la grille dynamique : vous définissez des liens de menu qui servent de filtre d'affichage à la grille, le tout avec des animations... Ni une ni deux, je me suis engoufré dans l'intégration de uikit dans les affichages événements.

Le résultat est stupéfiant : avec seulement une inclusion du framework et une adaptation de l'affichage, AllEvents possède depuis la version 3.4.2 (Novembre 2016) trois nouveaux affichages d'événements :

  • Grille simple
  • Grille dynamique
  • Portfolio

Les possibilités de uikit sont énormes ! Nous travaillons actuellement sur un module d'affichage de nos événement basé sur uikit.

Vous souhaitez aller plus loin avec uikit

Via le site http://getuikit.com/, vous récupérez les fichiers js/css essentiels

Via github https://github.com/uikit/uikit, vous récupérez tout le framework avec les démos comme ici : https://getuikit.com/docs/documentation_get-started.html

 

Un grand merci à Yootheme ainsi qu'à Nicolas pour cette petite pépite !