Comment choisir la bonne grille de fondation

Dans la vidéo d'aujourd'hui, nous allons parler des trois systèmes de grille que l'on trouve actuellement dans le framework Foundation de ZURB. Plus précisément, nous examinerons celle que nous devrions utiliser dans diverses situations. Sautons dans!

Nous avons élaboré un guide complet pour vous aider à apprendre Foundation, que vous soyez débutant ou que vous souhaitiez explorer des sujets plus avancés Fondation Apprendre.

Choisir une grille de fondation

1. La grille flottante

La première et la plus longue des grilles de la Fondation est la grille flottante. Comme son nom l'indique, il utilise des colonnes flottantes pour créer des mises en page..

Le balisage vous sera probablement familier; il utilise les mêmes structures de lignes et de colonnes que sur d'autres systèmes:

 
2
 
dix
 
 
 
3
 
9
 

2. La grille flexible

Le deuxième exemple a été introduit dans la Fondation 6 et porte le nom de «grille flexible». Il est alimenté par la flexbox CSS et présente des caractéristiques uniques, telles que l'alignement vertical et horizontal, et le dimensionnement automatique, même s'il se comporte de manière très similaire à la grille plate..

Le balisage est exactement le même que la grille de flottement; vous définissez des lignes et des colonnes, et à l'aide de classes spéciales, vous pouvez déterminer la taille de ces colonnes. Cependant, cette grille étant basée sur la flexbox, nous avons accès à des fonctionnalités plus avancées. Le dimensionnement automatique est l'une de ces caractéristiques; si nous omettons une classe de dimensionnement sur une colonne, elle sera étendue pour remplir l'espace disponible:

 
2
 
pas de dimensionnement
 
 
 
3
 
pas de dimensionnement
 

Alternativement, en utilisant un rétrécir class réduira la colonne à la taille minimale dont son contenu a besoin:

 
2
 
rétrécir
 
 
 
3
 
rétrécir
 

Pour plus d'exemples, consultez le screencast ci-dessus.

3. La grille XY

Notre troisième exemple est la grille la plus récente (et à mon avis la plus géniale); la grille XY, introduite dans Foundation 6.4. Bien qu’il soit également alimenté par la flexbox, il présente certaines similitudes avec la grille flexible, mais il existe également de grandes différences..

La première différence significative est que la grille XY peut rendre les éléments horizontalement et verticalement.

La deuxième différence est le balisage. Ici, nous définissons un élément conteneur (soit avec une classe de grille-x ou grille-y) et ensuite le remplir avec cellule éléments:

 
4
 
2
 
6
 

Par défaut, il n'y a pas de gouttière, donc toutes les cellules resteront alignées avec celles qui les entourent. Au lieu de cela, nous définissons la gouttière sur le grille-x élément: grille-marge-x ou grille-rembourrage-x (remplaçant le X pour un y si nous avons affaire à une grille verticale). Les valeurs que ceux-ci portent peuvent être définies en utilisant les variables Sass $ gouttières-marges et $ gouttières respectivement. 

Quelle grille de fondation devriez-vous choisir?

Lors du choix de la grille à utiliser, la décision doit être prise en fonction de quelques facteurs.

1. Le support du navigateur est le plus important, car flexbox n’a pas de support universel (IE étant le navigateur discutable dans ce cas). La grille flottante n'est pas affectée par la prise en charge de flexbox par les navigateurs.
2. Deuxièmement, avez-vous besoin d'une disposition de grille verticale? Si c'est le cas, vous devrez choisir la grille XY.
3. Enfin, quelle importance accordez-vous à la rapidité d’écriture du code et à sa maintenance? La grille XY utilise une syntaxe beaucoup plus simple que ses prédécesseurs, il sera donc beaucoup plus facile de travailler avec.

Pour plus de détails, consultez le screencast ci-dessus ou consultez mes cours les plus récents.!

• Apprendre à connaître la Fondation XY Grid Tuts + Course
• Advanced Foundation: Utilisation du cours ZURB Stack Tuts +
• Débuter avec Foundation Building Blocks Tuts + Course