🕸 Premiers pas avec Foundation 6

juin

2019

🕸 Premiers pas avec Foundation 6

Continuons notre découverte de Foundation 6, cet article s’appuie sur les billets sur l'installation de Foundation 6 et celui sur les premiers pas en HTML.

ඏ

Pour simplifier, nous ne nous attarderons pas à l’intégration de Foundation 6 avec des CMS ou autre langage dans un premier temps.

Comme expliqué dans le billet sur Foundation 6, créez un fichier texte nommé xyz.html où xyz est un texte de votre choix, de préférence sans espace et sans caractère spécial (ni accents, ni apostrophe…).

Le contenu de vos fichiers HTML doivent contenir la structure suivante :

<!doctype html>
<html class="no-js" lang="fr" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>__VOTRE_TITRE__</title>
    <link rel="stylesheet" href="css/foundation.css">
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>

    __VOTRE_CODE_HTML__

    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

ඏ

Intégration d’images dans la page.

Pour commencer, nous allons utiliser le module Orbit de Foundation 6. J’ai choisi volontairement ce module qui peut sembler assez compliqué au premier abord, mais finalement il se détaille plutôt facilement et est très simple à personnaliser.

Voici donc ce que nous allons tester en premier lieu.

Code HTML

<div class="orbit" role="region" aria-label="Sélection d'image" data-orbit>

  <div class="orbit-wrapper">

    <div class="orbit-controls">
      <button class="orbit-previous"><span class="show-for-sr">Image précédente</span>&#9664;&#xFE0E;</button>
      <button class="orbit-next"><span class="show-for-sr">Image suivante</span>&#9654;&#xFE0E;</button>
    </div>

    <ul class="orbit-container">
      <li class="is-active orbit-slide">
        <figure class="orbit-figure">
          <img class="orbit-image" src="https://placehold.it/1200x600/999?text=Image-1" alt="Description image 1">
          <figcaption class="orbit-caption">Image numéro 1</figcaption>
        </figure>
      </li>
      <li class="orbit-slide">
        <figure class="orbit-figure">
          <img class="orbit-image" src="https://placehold.it/1200x600/888?text=Image-2" alt="Description image 2">
          <figcaption class="orbit-caption">Image numéro 2</figcaption>
        </figure>
      </li>
      <li class="orbit-slide">
        <figure class="orbit-figure">
          <img class="orbit-image" src="https://placehold.it/1200x600/777?text=Image-3" alt="Description image 3">
          <figcaption class="orbit-caption">Image numéro 3</figcaption>
        </figure>
      </li>
    </ul>

  </div>

  <nav class="orbit-bullets">
    <button class="is-active" data-slide="0"><span class="show-for-sr">Première image</span></button>
    <button data-slide="1"><span class="show-for-sr">Seconde image</span></button>
    <button data-slide="2"><span class="show-for-sr">Troisième image</span></button>
  </nav>

</div>

Rendu

Image numéro 1
Image numéro 2
Image numéro 3

Allez on se lance dans l’analyse de ce code — mais si cela va bien se passer…

<div class="orbit" role="region" aria-label="DESCRIPTION" data-orbit>
…
</div>

La première balise div est défini avec la classe (attribut class) orbit. Les attributs role=region et aria-label (avec une description libre) est nécessaire pour les lecteurs d’écrans utilisés par certaines personnes handicapées. Enfin il y a un attribut vide data-orbit qui sera utilisé par le code JavaScript inclus dans Foundation 6 pour stocker de l’information.

Cette balise div englobe l’ensemble des éléments liés à l’animation des images.

Personnaliser cette partie revient à définir une description pour l’ensemble des images.

<div class="orbit-wrapper">
…
</div>

Un second bloc div défini avec la classe orbit-wrapper, servant à regrouper le bloc de contrôle et le bloc de décrivant les images.

<div class="orbit-controls">
  <button class="orbit-previous"><span class="show-for-sr">Image précédente</span>&#9664;&#xFE0E;</button>
  <button class="orbit-next"><span class="show-for-sr">Image suivante</span>&#9654;&#xFE0E;</button>
</div>

Bloc de contrôle, défini à l’aide de la classe orbit-controls, qui contient 2 boutons. Ici on peut encore personnaliser le texte destiné aux lecteurs d’écran (contenu de la balise span avec la classe show-for-sr. On peut également modifier le rendu du bouton en modifiant les séquences ◀︎ (rendu : ◀︎) et ▶︎ (rendu : ▶︎).

Ce bloc est facultatif

<ul class="orbit-container">
…
</ul>

En HTML la séquence <ul><li>Entrée 1</li><li>Entrée 2</li> … <li>Entrée n</li></ul> permet de définir des listes. On déclare donc une liste ul avec la classe orbit-container, les éléments li permettront de définir autant d’images que nécessaire.

Documentation sur les listes.

<li class="is-active orbit-slide">
  <figure class="orbit-figure">
    <img class="orbit-image" src="URL_IMAGE_1" alt="Description image 1">
    <figcaption class="orbit-caption">Image numéro 1</figcaption>
  </figure>
</li>

<li class="orbit-slide">
  <figure class="orbit-figure">
    <img class="orbit-image" src="URL_IMAGE_n" alt="Description image n">
    <figcaption class="orbit-caption">Image numéro n</figcaption>
  </figure>
</li>

...

La balise li décrivant les images doit être définie avec la classe orbit-slide et la première des images doit avoir également appartenir à la classe is-active.

Le système prévoit l’affichage de l’image ainsi que d’une légende. Il y a donc 2 valeurs à définir dans chaque élément. C’est pour cela qu’on retrouve une balise figure (de classe orbit-figure) qui permettra de définir d’une part l’image à travers la balise img et la légende à travers la balise figcaption.

En HTML, une image est définie par son adresse (src="URL") et une description pour les lecteurs d'écran (alt="LaDescription").

Pour chaque image, il faut définir l’URL de l’image, une description et une légende.

Vous pouvez définir autant d’images que vous le souhaitez.

<nav class="orbit-bullets">
  <button class="is-active" data-slide="0"><span class="show-for-sr">Première image</span></button>
  <button data-slide="1"><span class="show-for-sr">Seconde image</span></button>
  <button data-slide="2"><span class="show-for-sr">Troisième image</span></button>
</nav>

Bloc de contrôle d’accès direct. Cette fois c'est une balise nav qui va permettre de regrouper les boutons de navigation, permettant un accès direct à chaque image.

On notera que le premier bouton doit appartenir à la classe is-active et que tous les boutons doivent avoir un attribut data-slide avec comme valeur le numéro de l’image (Attention, comme souvent en informatique la numérotation commence à partir de 0).

La balise span avec l’attribut class="show-for-sr" sera utilisé par les lecteurs d’écran.

Ce bloc est facultatif

ඏ

Mise en page à l’aide de XY Grid.

La mise en page d’un document HTML c’est souvent galère, surtout lorsqu’on souhaite s’adapter à l’écran du visiteur (« responsive » en anglais).

Foundation 6 arrive avec une solution élégante et simple d’utilisation, l’objet XY Grid.

La version pré-configurée de Foundation 6 que vous avez téléchargé, propose une mise en page basée sur 12 colonnes. Cela veut dire que la zone dans laquelle sera défini la balise div de classe grid-x, sera virtuellement découpé en 12 colonnes.

Voici quelques exemples:

<div class="grid-x">
  <div class="cell">1ʳᵉ cellule pleine largeur</div>
  <div class="cell">2ᵈ cellule pleine largeur</div>
</div>

1ʳᵉ cellule pleine largeur

2ᵈ cellule pleine largeur

Par défaut, une cellule fait 12 colonnes (soit la totalité de la largeur de la zone). Ici, on a 2 cellules pleines largeur, on obtient donc 2 lignes.

<div class="grid-x">
  <div class="cell small-6">1ʳᵉ cellule de 6 colonnes</div>
  <div class="cell small-6">2ᵈ cellule de 6 colonnes</div>
</div>

1ʳᵉ cellule de 6 colonnes

2ᵈ cellule de 6 colonnes

Ici on définit la taille des cellules à 6 colonnes (à l’aide de la classe small-6). Les 2 cellules peuvent donc tenir sur 1 seule ligne.

Les valeurs possibles pour small sont : small-x où x peut prendre une valeur de 1 à 12. Lorsque qu’aucune valeur small-x n’est définie, la cellule à par défaut la largeur maximum, soit : small-12 – voir le 1er exemple où la valeur n’est pas définie.

<div class="grid-x">
  <div class="cell medium-6 large-4">1ʳᵉ cellule de 12/6/4 colonnes</div>
  <div class="cell medium-6 large-8">2ᵈ cellule de 12/6/8 colonnes</div>
</div>

1ʳᵉ cellule de 12/6/4 colonnes

2ᵈ cellule de 12/6/8 colonnes

Bon, ici cela se cela se complique. On voit apparaître medium-x et large-x. Dans la mesure où il n’y a pas de small-x de défini, il faut considérer que c’est small-12 qui est sélectionné.

Du coup, le dernier exemple revient à (ici la classe small-12 est inutile, je mets le code juste pour clarifier l’explication) :

<div class="grid-x">
  <div class="cell small-12 medium-6 large-4">1ʳᵉ cellule de 12/6/4 colonnes</div>
  <div class="cell small-12 medium-6 large-8">2ᵈ cellule de 12/6/8 colonnes</div>
</div>

small-x: Définis le nombre de colonne pour les petits écrans (typiquement un téléphone en vertical).
medium-x: Définis le nombre de colonne pour les écrans de taille moyenne (typiquement une tablette).
large-x: Définis le nombre de colonne pour les grands écrans (typiquement un ordinateur plein page).

Si aucune valeur medium-x, pour les écrans de taille moyenne, ce sera la valeur définie par small-x qui sera utilisée.
De même si aucune valeur large-x, pour les grands écrans c’est la valeur sélectionnée pour les écrans de taille moyenne qui sera utilisée.

ඏ

Références et compléments

Documentation officielle de Foundation
w3schools.com est un gros tutoriel pour apprendre le HTML mais c’est également un site de référence pour ce langage — Site en anglais.
Service de validation de code HTML du W3C — Site en anglais.

ᦿ

Vos commentaires

Pas encore de commentaire - ajouter le votre.
Ajouter votre commentaire

cClaude.rocks ☕ Le blog

Intégration d’images dans la page.

Code HTML

Rendu

Mise en page à l’aide de XY Grid.

Références et compléments