samedi, 31 décembre 2022 00:00

Intégration de UIKit à la main dans un template (ici protostar)

Écrit par
Évaluer cet élément
(0 Votes)

Aujourd'hui j'ai eu besoin de m'installer sur Joomla, la petite bibliothèque UIKit. Cette petite bibliothèque codée en javascript vous permet d'intégrer de manière simple des petites animations, effet graphique, badge, fil d'Ariane, boutons, fenêtre modale pour ne citer que ces quelques éléments, facilement sur un site web. Je vous renvoie sur la documentation du site internet www.getuikit.com pour avoir une vue d'ensemble de l'ensemble des fonctionnalités que vous pouvez récupérer avec cette bibliothèque. L'éléments, les fonctionnalités principales de cette bibliothèque est l'interface graphique que vous pouvez facilement "coder" en quelques lignes de codes, en adaptant des classes ou des types ou des styles à des balises HTML.

Pour installer la dernière version de cette bibliothèque sur un serveur hébergeant notre CMS, voilà la procédure que j'ai utilisé et qui a parfaitement fonctionné. Cette procédure a le gros avantage de pouvoir installer la toute dernière version de cette bibliothèque que vous aurez préalablement téléchargé pour uploadé sur votre site web.

  1. Dans un premier temps télécharger la toute dernière version de la bibliothèque sur le serveur dont je vous ai mentionné l'URL ci-dessus.
  2. Dezipper sur votre poste local le téléchargement de ce fichier zip, et copiez le contenu du dossier dans votre template dans le sous répertoire JS (un répertoire que vous aurez éventuellement préalablement créé et éventuellement nommé uikit)
    Notez qu'il peut-être très intéressant de garder les versions sucessives de UIKIT dans le nom du répertoire afin de pouvoir éventuellement installer plusieurs versions successives de cette bibliothèque sur votre site.
  3. Dans votre template, et rajouter y accès à la bibliothèque en évitant, par exemple pour la template protostar, le fichier index.php placé dans le sous répertoire joomla/templates/protostar/index.php. il suffit d'éditer ce fichier afin de saisir et de rajouter une deux lignes suivantes :
  • JHTML::_('script','uikit/js/uikit.min.js','array('version' => 'auto', 'relative' => true));
  • JHTML::_('script','uikit/js/uikit-icons.min.js','array('version' => 'auto', 'relative' => true));

Ajoutez désormais l'accès au fichier CSS de UI Kit dans le même fichier en rajoutant la ligne suivante dans votre fichier user.css  de protostar (à adapter selon votre template)

  • JHTML::_('stylesheet','uikit.min.css','array('version' => 'auto', 'relative' => true));

Comme les fichiers CSS sont cherchés par défaut au même endroit que ceux de protostar, j'ai placé tous les fichiers de la bibliothèque UIKit dans le même dossier que les CSS de protostar.

Il ne vous reste plus qu'à tester la bonne installation de cet outil. Afin de s'assurer que cette installation fonctionne j'ai effectué un test basé sur un exemple dans un module Joomla. En m'appuyant sur un exemple fourni par l'éditeur de la bibliothèque, j'ai regardé du côté de uk-alert-close :

<div uk-alert>
    <a class="uk-alert-close" uk-close></a>
</div>

Une fois ce code intégré dans un article, je suis allé sur ce dit article dans la partie publique de Joomla, et le code créé fonctionnait parfaitement. J'en ai déduit que l'installation de la bibliothèque était désormais fonctionnelle

Lu 282 fois