Sommaire

Une grille avec la seule taille d’écran large

1. La mise en page

Nous l’avons évoqué précédemment, la grille de mise en page de Foundation est Mobile First. Cela veut dire que si vous ne précisez pas une taille d’écran, l’alignement des blocs va se faire selon la taille d’écran indiquée et, pour les tailles supérieures, les blocs vont s’aligner sur toute la largeur disponible.

Voici le code HTML de cet exemple :

<div class="row"> 
  <div class="small-2 large-4 columns"> 
     <p>Cum sociis natoque penatibus...</p> 
  </div> 
  <div class="small-4 large-4 columns"> 
     <p>Cras justo odio...</p> 
  </div> 
  <div class="small-6 large-4 columns"> 
     <p>Sed posuere consectetur est...</p> 
  </div> 
</div> 
<div class="row"> 
  <div class="large-3 columns"> 
     <p>Vivamus sagittis lacus vel...</p> 
  </div> 
  <div class="large-6 columns"> 
     <p>Donec sed odio dui...</p> 
  </div> 
  <div class="large-3 columns"> 
     <p>Etiam porta sem malesuada...</p> 
  </div> 
</div>

Le fichier de cet exemple à télécharger ...