Sommaire

Les points de rupture de Foundation

Bien sûr, Foundation nous propose une mise en page Responsive Web Design. Il est même dit Mobile First. Cela signifie que la conception des sites web avec sa grille faite au départ pour les petits écrans. C’est à nous de déterminer la conception pour les écrans de taille moyenne (tablette) et pour les écrans larges (ordinateur).

Dans la mise en place des blocs sur les colonnes de la grille, nous pouvons utiliser des mots-clés pour indiquer les points de rupture :

  • small pour les écrans plus larges que 0 pixel,

  • medium pour les écrans plus larges que 640 pixels,

  • large pour les écrans plus larges que 1024 pixels,

  • xlarge pour les écrans plus larges que 1200 pixels,

  • xxlarge pour les écrans plus larges que 1440 pixels.

Attention, il faut bien comprendre que si vous ne définissez une mise en page que pour les petits écrans, avec l’utilisation de small, cette mise en page va aussi s’appliquer à tous les écrans plus grands, donc pour les écrans moyens et larges. De même, si vous ne définissez la grille que pour les écrans larges, avec l’utilisation de large, les blocs vont s’aligner sur toute la largeur de la grille, pour les écrans plus petits (medium et small).