UIKit

UIKit

 

Sommaire

  1. Principe
  2. Installation et première main sur UIKit
    1. Installation
    2. Première main sur UIKit
  3. Pour aller plus loin

Principe

Utiliser un framework CSS aujourd’hui permet de diminuer le temps de développement côté interface utilisateur, avec notamment la construction d’un design responsive et allégé.

Il faut tout d’abord noter qu’UIKit est très facile à utiliser, mais aussi léger, puisqu’il ne pèse que 335ko dans un fichier compressé.

Le framework reste mis à jour souvent, on peut tout à fait consulter le développement directement sur Github (voir le lien ci-après : https://github.com/uikit/uikit/issues). Les développeurs sont très actifs et corrigent dès qu’ils peuvent les bugs retournés par les utilisateurs.

La version 3 étant en béta, nous pouvons directement nous y intéresser, car elle reste tout de même fonctionnelle.

Installation et première main sur UIKit

      Installation

Dans un premier temps, nous allons donc installer UIKit. Pour cela, il suffit d’aller sur le site des développeurs :

https://getuikit.com/

En collant l’adresse ci-dessus, vous devriez avoir l’aperçu, ci-dessous.

Il suffit simplement de cliquer sur Download en haut à droite, pour télécharger le dossier UIKit en compressé.

Pour le moment, le dossier compressé téléchargé aura pour nom :

Uikit-3.0.0-beta.35

Cependant, il se peut que lorsque vous utiliserez UIKit, la version en beta pourrait encore être mise à jour.
Créer un nouveau dossier qui accueillera notre page web ainsi que le framework css UIKit.

Pour ma part, tout le long de ce tutoriel, mon projet aura cette arborescence :

On y ajoutera des fichiers html ou autres, si nécessaire.

Donc avant, créez un dossier CSS et JS, ainsi qu’un fichier vierge nommé index.html, ou comme vous le souhaitez, pour que l’on puisse avoir le même projet.

Décompressez le dossier téléchargé, en y ajoutant les fichiers au bon endroit, tel que ci-dessous.


  Première main sur UIKit

Maintenant que l’on a notre arborescence, nous pouvons commencer à manipuler les composants d’UIKit.

Pour cela, nous allons créer une petite page d’accueil, avec des articles en dur, ainsi que le design d’une page de contact.

Vous pouvez aussi ajouter en plus, un fichier de style app.css, que nous utiliserons pour surcharger certaines classes d’UIKit pour modifier le design de notre site web.

Toutefois, il est primordial de noter en premier lieu que, le framework UIKit met à disposition un CSS customisé. Cependant, celui-ci utilise le système des propriétés pour jouer sur l’apparence des composants.

Tout d’abord, nous allons générer une page HTML toute simple, en important les différents fichiers CSS et Javascript que nous avons créé et téléchargé précédemment. Personnellement, j’utilise Visual Studio Code, de ce fait, un plugin à installer et un snippet, et je peux directement générer un squelette d’un fichier HTML5.

Ce qui me donne :

J’ai bien sûr ajouté le lien CSS, vers celui que j’ai créé pour mettre mon propre style, que j’ai placé dans le dossier CSS : app.css

Comme nous avons généré de l’HTML5, nous allons suivre les bonnes pratiques.

Par conséquent, on va commencer par intégrer une balise <header>, tel que ci-dessous

Dans cette balise, nous allons rajouter une barre de navigation, à l’aide de la balise <nav>.

Vous remarquerez d’après cette impression écran, que j’ai rajouté des classes spéciales, commençant par le préfixe : uk.

Effectivement, c’est là le moyen pour uikit d’intervenir dans nos composants graphiques. A l’intérieur de cette même balise <nav>, on retrouve un attribut uk-navbar, qui nous permet de créer une barre de navigation avec le style direct d’UIKit.

Si on décortique un peu plus le code, on s’aperçoit que l’on a une div, composée d’une liste avec les différents onglets, qui apparaitront dans le menu.

Dans la balise <ul>, il faut ajouter la classe css uk-navbar-nav, permettant d’avoir directement un style graphique pour la barre de navigation.

On peut tout aussi bien, comme le montre l’exemple ci-dessus, avoir un menu déroulant.

Pour cela, il suffira d’insérer dans une balise <li>, un lien href, qui affichera le nom de l’onglet voulu, et toujours dans notre balise <li>, une div avec une classe css uk-navbar-dropdown, qui correspond à notre menu déroulant. A l’intérieur, il faut ensuite ajouter une balise div, contenant nos éléments.

Il est possible aussi, d’ajouter une classe css dans un des liens, montrant un élément actif, simplement nommée uk-active.

Ici, nous avons donc, un onglet permettant de revenir à notre page principale, un menu déroulant pour démonstration et un onglet pointant sur une page de contact.

Le résultat que vous devriez avoir est celui-ci-dessous.

 

Mettons-y un peu de couleur.

Pour cela, nous allons simplement surcharger une classe css d’uikit dans notre fichier CSS, tel que :

.uk-navbar-container:not(.uk-navbar-transparent) {
background: #532D6E !important;
}

 

Nous aurons du violet, mais vous pouvez évidemment choisir la couleur qui vous plait.

Un aperçu de ce que cela donne :

Avant de passer sur le contenu de l’accueil, nous allons nous attarder sur la page de contact.

Elle devrait ressembler à cela :

 

Elle reste assez basique, mais nous verrons quelques composants graphiques sympas.

Créons maintenant, une nouvelle page html, nommée contact.html

Pensez à y ajouter le header créé pour la page index, car nous n’avons pas fait de layout pour gérer cela.

Maintenant, il faut ajouter une balise <main> pour avoir la balise principale de notre page et afficher le contenu.

Il faut ensuite ajouter une balise <form>.

Voici une copie d’écran pour voir ce que cela donne, ne vous inquiétez pas, nous allons décortiquer le code, qui reste assez simple.

Dans notre exemple, nous allons donc voir, un formulaire (évidemment), avec des champs de type texte, des radio button, une liste déroulante et d’autres…

Pour commencer, il faut initialiser le formulaire, pour cela, il suffit simplement de rajouter dans notre balise <form> la classe .uk-form, qui permettra à UIKit de reconnaître un formulaire.

Ensuite, nous allons rajouter un fieldset et une legend, initialisés respectivement par .uk-fieldset et .uk-legend.

Dans un formulaire, chaque élément est placé côte à côte, cependant, pour pallier à ce problème, nous allons mettre tous nos composants dans des div différentes, ce qui les placeront ligne par ligne.

Maintenant, placez chaque élément que vous voulez dans des divs tel qu’il est montré sur la copie d’écran.

Les uk-margin permettre d’ajouter des margin de chaque côté de 20px. Vous pouvez les ajouter aux divs dont vous avez la nécessité. Car je vous montre un formulaire tel que je le ferai moi, mais vous pouvez tout aussi bien, faire un modèle avec vos propres modifications.

Cependant, il est possible de modifier la valeur par défaut de uk-margin (ou de uk-padding)

  • Soit directement dans le code CSS de UIKit que vous utilisez dans votre page HTML, mais attention, ceci s’appliquera à toutes vos utilisations.
  • Soit surcharger directement la classe CSS voulue, pour passer au-dessus d’UIKit
  • Ou directement de surcharger dans votre feuille de style la classe d’UIKit utilisée.

Nous allons nous attarder un peu plus sur deux éléments de notre formulaire, à savoir, la liste déroulante et le mini formulaire d’upload de fichier.
 

La liste déroulante


Vous pouvez remarquer que dans la div contenant notre liste déroulante, j’ai ajouté une propriété uk-form-custom, c’est tout simplement une propriété d’UIKit permettant de remplacer la sélection d’un formulaire (ou autre contenu html) par notre propre code HTML.

Par exemple, dans notre cas de liste déroulante, si on décortique ce que fait la propriété :

Elle va chercher dans les éléments enfants de notre div, les composants de type span, prendre le premier élément du même type, et y coller le code HTML sélectionné.

C’est-à-dire, qu’il va regarder les valeurs des options de sélection, et le coller dans <span></span>.

Pour personnaliser un peu plus la chose, j’ai modifié implicitement ma liste déroulante pour qu’elle soit un bouton.

 

Upload de fichier


Dans le cas de notre système de fichier (juste le visuel), on ajoute l’attribut uk-form-custom avec l’option target, permettant de sélectionner l’emplacement d’affichage de la valeur.

Ici, nous mettons la target à true pour afficher la valeur dans l’élément adjacent, c’est-à-dire dans l’input avec l’attribut disabled.

Pour rechercher un fichier, j’ai choisi d’afficher un bouton avec une apparence par défaut. Mais vous pouvez retrouver ci-dessous, les différents boutons existants. J’ai sélectionné les plus intéressants pour ma part.


Le code pour les utiliser :


Faites donc de même pour le bouton d’envoi, en choisissant le type de bouton qu’il vous sied.

 

Enfin, pour initialiser un composant en Javascript, il suffit simplement de créer un fichier javascript dans notre dossier JS. Pour ma part, j’ai créé un fichier nommé app.js, où je mets tout mon code javascript pour mes composants.

Pour l’initialisation du formulaire, veuillez coller ce bout de code :


Ceci activera le formulaire par exemple. Vous pourrez remarquer que la méthode formCustom (ou n’importe quel élément à initialiser) dispose de deux arguments : element et options.

  • Element : correspond à n’importe quelle entité, j’entends par là, un nœud du DOM, un selector ou directement un objet JQuery.
  • Options : correspond à des options supplémentaires pouvant être ajoutées, telle qu’une fonction, ou une chaîne de caractère par exemple.

Voilà pour la partie sur la page de contact. Nous n’allons pas faire la partie d’envoi de mail, car ce n’est pas l’objectif de ce tutoriel.

Passons maintenant à ce que nous avons délaissé en premier lieu, c’est-à-dire, la page d’accueil.

Notre page principale ressemblera comme ci-dessous pour le moment :


Pour ce tutoriel, nous afficherons seulement trois articles en dur, avec des fenêtres modales, permettant de voir le contenu complet de notre post.

Commençons déjà par créer une balise <main></main>, afin de respecter les best practises d’HTML5.

Dans notre balise principale, nous aurons besoin d’une balise div qui contiendra nos trois articles.

Ce container aura besoin de ces différentes classes CSS issues d’UIKit :

  • uk-grid-small : l’ajout de cette classe css appliquera un petit gutter
  • uk-child-width-expand : permet de rendre les enfants du conteneur responsive. C’est-à-dire qu’ils disposeront d’une largeur équivalente, peu importe le nombre d’enfants.
  • uk-text-center : affichera le/les textes au centre de leur parent

Et d’un attribut uk-grid, permettant d’avoir une disposition en grille de nos éléments dans la div, équivalent à créer un conteneur en grille.

Vous devriez avoir quelque chose comme cela


Maintenant, passons à l’ajout de nos articles, qui seront des card view, inspirées du material design.

Pour chaque article, nous allons les envelopper d’une div, avec la classe css uk-padding, leur ajoutant un padding de 20px de chaque côté.

Je vous montre l’exemple d’un article, et vous pourrez refaire les deux autres pour arriver au même résultat que celui que je vous ai montré.

Il suffit donc d’avoir une div avec les classes CSS :

  • uk-card : affiche une card view
  • uk-card-default : ajoute une ombre sur notre card view, sinon il y aura un blanc autour. Ceci permet donc de styliser un peu plus notre article.
  • uk-card-body : créer un padding entre la card et le contenu de celle-ci

Nous pouvons rajouter un titre dans cette div, avec par exemple une balise <h3> en ajoutant la classe uk-card-title.

Le contenu de notre article, sera dans un paragraphe.

Ensuite, nous pouvons avoir un footer, qui représentera le bouton affichant le contenu complet de notre article.

Pour cela, on ajoutera une div avec une classe css

  • uk-card-footer
  • le contenu avec un bouton, disposant des classes css :
    • uk-button
    • uk-button-primary

Votre code devrait ressembler à ceci :


Ajoutons maintenant l’action sur le bouton « Voir plus », qui contiendra le contenu complet de l’article.

Pour cela, c’est tout simple, je vous copie/colle le code et vous l’explique juste après.


J’utilise ici une fenêtre modale, que j’initialise avec l’attribut uk-modal dans le div container, en lui associant un id, dont je parlerai un peu plus tard.

  • Uk-modal-dialog : stylise la fenêtre modale en fenêtre de dialogue.
  • Uk-modal-body : ajoute et stylise avec des padding le contenu de la modale.

Un titre en <h2> reprenant le titre sur ma card view (même si le contenu est en dur…), ensuite un paragraphe un lorem ipsum représentant l’article complet, et enfin un paragraphe avec une classe plaçant les éléments à droite de la modale, ici deux boutons « Annuler » et « OK ».

  • Uk-modal-close : permet de fermer la fenêtre en cliquant sur le bouton annuler

Plus haut, je vous ai précisé que l’on associait la modale avec un id, et bien, il sera utile pour y faire appel sur l’action du bouton « Voir plus… ».

Ainsi, ajouter sur ledit bouton :

  • uk-toggle="target: #modal-example"

Ce qui nous donne au final :


Je vous laisse essayer de faire les deux autres articles… La solution sera un peu plus bas, essayez de ne pas tricher.

Voici la solution…


Nous avons donc fait un petit tour sur certaines fonctionnalités et composants de ce framework CSS. Dans le prochain chapitre, il sera question de petites améliorations…

 

Pour aller plus loin

Icônes

Avec UIKit, il est possible d’ajouter des icônes directement dans vos composants ou dans du texte, pour ajouter un côté un peu plus ergonomique et agréable pour l’utilisateur.

Vous avez pu en avoir un aperçu dans la liste déroulante de la page de contact, puisque le chevron (même si cela est passé inaperçu) est une icône.

Pour se faire et ajouter une icône, UIKit a simplifié la chose en ne devant ajouter seulement un attribut dans une balise html, tel qu’un span, attribut qui se nommera uk-icon puis d’ajouter ce que l’on veut.

Un exemple ci-contre

Etant donné qu’UIKit s’inspire de la librairie Font-Awesome pour afficher ses icônes, il est tout à fait possible pour vous de chercher votre bonheur, directement à cette adresse : http://fontawesome.io/icons/

 

Vous aurez juste à ajouter le nom de l’icône après le mot-clé icon dans l’attribut uk-icon.

Nous allons appliquer ceci à notre page de contact… Et ajouter des icônes sur nos champs textes.

Donc pour ça, rien de plus simple, encore une fois, ajoutez un span sur le champ texte désiré, avec la classe .uk-form-icon. Ne pas oublier l’attribut uk-icon écrit avec :

Uk-icon='icon: user'

 

Vous allez vous apercevoir que l’icône ne sera pas directement dans le champ texte, pour cela il faudra englober le span et la balise input avec une div contenant la classe .uk-inline.

Ce qui nous donne niveau code :


Et graphiquement :


Il est possible aussi de rendre nos icônes cliquables, donc ajouter une petite animation dessus. Pour cela, il faudra ajouter à la même racine que notre input, une balise hyperlien (<a>), avec un href à vide.

Tel que le code ci-dessous :


Sur ce code, si vous l’avez remarqué, j’ai aussi ajouté une classe .uk-form-icon-flip, qui permet de mettre de l’autre côté de l’input (par exemple) l’icône.

Ce qui nous donne graphiquement :

Fermeture modale

Sur les fenêtres modales des articles que nous avons pu réaliser, il est possible de rajouter des croix de fermeture comme sur une vraie fenêtre.

Il faut donc se diriger dans nos fenêtres modales de la page d’accueil (index.html) puis à l’intérieur de la div disposant des classes uk-modal-dialog…


Je vous remets le bout de code pour ne pas vous perdre, y ajouter en début d’élément enfant, un nouveau bouton, avec un attribut uk-close (pour initialiser un bouton de closure), de type button.

Le code (comme à notre habitude) :


Et graphiquement :


On peut donc observer l’apparition de la croix de fermeture en haut à droite.

Voilà, nous avons pu faire un premier tour d'horizon de ce framwork CSS qu'est UIKit.
Il apparaît donc comme une alternative à un Bootstrap ou autre framework, et comme vous avez pu vous apercevoir, il reste très simple d'utilisation et maléable à souhait.

Glossaire

 

Snippet : Sous un logiciel, un snippet est une fonctionnalité permettant d’avoir un raccourci. Dans notre cas, un snippet permet de générer du code plus facilement.

Layout : Dans le domaine de l’informatique, un layout est un squelette d’une partie visuelle. Par exemple, on peut créer un layout ayant une barre de navigation, que l’on pourra réutiliser sur d’autres pages pour éviter la répétition de code.

DOM : Le DOM ou Document Object Model est la structure du contenu HTML.

Selector : Un selector est ce que l’on appelle un « pattern » pour sélectionner un élément dans le DOM.

API : Bibliothèque de classes, méthodes…

Gutter : Les gutters sont des espaces entre chaque contenu, on retrouve ce terme notamment lorsque l’on parle de grid.

Sitographie

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *