Sommaire

Changer la mise en page selon la taille d’écran

Foundation nous permet de changer la mise en page des blocs dans une ligne en fonction de la taille d’écran de diffusion.

Imaginons la mise en page suivante : dans une ligne, nous avons un premier bloc déclaré aligné sur huit colonnes et un deuxième bloc aligné sur quatre colonnes.

Dans le cas d’un affichage sur un écran large, nous souhaitons d’abord afficher le deuxième bloc déclaré, suivi ensuite par le premier bloc déclaré.

Dans le cas d’un affichage sur un petit écran, nous souhaitons afficher le premier bloc déclaré en premier et sur toute la largeur disponible. Ensuite, en dessous, le deuxième bloc déclaré, lui aussi affiché sur toute la largeur disponible.

Pour changer la mise en page des blocs, nous pouvons utiliser les classes [size]-push-[n] et [size]-pull-[n]. Le préfixe [size] indique la largeur de l’écran ciblé (small, medium et large) et le suffixe [n] indique l’alignement sur les colonnes. Le libellé push permet de décaler le bloc vers la droite dans la ligne et le libellé pull permet de décaler le bloc vers la gauche dans la ligne.

Voici le code HTML de cet exemple :

<div class="row"> 
  <div class="large-8 large-push-4 columns bleu"> 
     <p>Praesent commodo...</p> 
  </div> 
  <div class="large-4 ...