Dans le passé, nous avons beaucoup parlé de Twitter Bootstrap. Bien plus que son concurrent le plus digne: la Fondation Zurb. Foundation, qui en est maintenant à sa troisième itération, est un framework frontal robuste et réactif utilisé par des centaines de développeurs chaque jour.
Au fil de plusieurs articles, nous allons aborder ces différents aspects du point de vue du débutant complet. Le sujet d'aujourd'hui est ma partie préférée: la grille. Suivez le long pour voir comment cela fonctionne!
Grid Crazy
Si vous êtes un lecteur assidu de Design Shack, vous savez probablement déjà que je suis un peu fou. La mise en page est l'aspect du CSS qui me passionne le plus. J'aime simplement explorer et jouer avec les différents systèmes de grille créés par les gens. Non, ils ne sont pas toujours parfaitement sémantiques (bien que certains le soient), mais ils peuvent être un moyen extrêmement utile de supprimer des mises en page très complexes avec très peu d'effort.
La grille intégrée à Foundation n'échappe pas à cette règle. Il est remarquablement facile à utiliser, dispose de toutes les fonctionnalités souhaitées et s’adapte très bien à différentes fenêtres. Nous allons jeter un coup d'oeil.
La grille de fondation
Comme d'innombrables autres grilles, la fondation Grid est construite sur un système à douze colonnes. Par défaut, la largeur de la grille est de 940 pixels lorsqu'elle est à sa largeur maximale. Toutefois, la grille étant fluide, votre grille s’adapte à mesure que votre fenêtre d’affichage devient plus étroite que 940 pixels.
Cela signifie naturellement que chaque colonne de la grille n'a pas de largeur statique, mais est affectée à l'aide de pourcentages. Si nous ouvrons le code CSS, nous pouvons voir que c'est bien le cas:
Sensible
La nature fluide de la grille de la Fondation lui permet de s’adapter au fur et à mesure que la fenêtre s’affiche, mais une fois que vous atteignez environ 767 pixels, une requête multimédia est lancée et simplifie votre mise en page complexe en une seule colonne. De toute évidence, une solution aussi simple ne sera peut-être pas toujours souhaitable. Il existe donc des moyens de redistribuer intentionnellement votre mise en page dans un réseau mobile à quatre colonnes. Nous verrons comment faire cela plus tard.
Commencer
Si vous êtes un peu habitué aux systèmes de grille, Foundation devrait être très facile à prendre en main. Si vous êtes complètement novice dans les grilles, ne vous inquiétez pas, je vais vous l'expliquer et vous comprendrez en un rien de temps.
Fondamentalement, Foundation a effectué la majeure partie du travail de mise en page CSS lourd pour vous. Le centre de 940 pixels de la page est divisé en douze colonnes et diverses combinaisons de colonnes possibles sont attribuées aux classes. Cela signifie que, pour effectuer une mise en page de base, vous n'avez pas besoin d'écrire un seul caractère de CSS. Tout ce que vous avez à faire est d'utiliser les bonnes classes dans votre code HTML.
Créer une ligne
La toute première chose à faire lors de l'ajout de contenu à la page est de créer une ligne. C'est exactement ce que cela ressemble, une partie du contenu qui sera affichée sur le même plan horizontal. Tous les flottements, les marges, les marges et les différentes complexités de mise en page ont été pris en charge afin que vous puissiez vous concentrer sur votre contenu.
Pour commencer une ligne, créez simplement une div avec une classe de "row".
Comment était-ce facile? Voyons maintenant comment ajouter des colonnes.
Ajout de colonnes
Pour ajouter des colonnes de contenu, vous créez une nouvelle div et affectez deux classes. La première classe est un nombre qui correspond au nombre de colonnes que vous souhaitez que ce contenu couvre. Ainsi, si vous souhaitez que votre contenu occupe trois des douze colonnes disponibles, vous en affectez trois. en tant que classe.
La deuxième classe que vous appliquez est? Colonnes? (ou? colonne?). Ceci est appliqué uniformément à tous vos divs pour lesquels vous voulez avoir le traitement standard de la colonne Foundation. Combinez ces deux classes et vous devriez avoir quelque chose comme ceci:
Ici, j'ai un joli petit conteneur qui va automatiquement définir des limites sur le contenu afin qu'il ne prenne pas plus de huit colonnes. Maintenant, en règle générale (mais pas toujours), vous aurez envie de consommer les douze colonnes complètes d'une rangée donnée. Nous avons déjà utilisé huit colonnes dans notre première division, donc si nous en voulons une de plus, nous écrirons quatre colonnes? dans la classe (8 + 4 = 12).
Après avoir écrit seulement ce code dans le corps d'un document HTML, si nous regardons notre page dans un navigateur, nous verrons ceci:
Comme vous pouvez le constater, nous avons effectivement créé deux morceaux de texte avec un rapport de largeur de 2: 1. Cela a du sens car nous avons utilisé les cours huit et quatre, qui ont également un ratio de 2: 1. Lorsque cela clique vraiment dans votre cerveau, il devient un concept puissant, car vous pouvez tout à coup retirer presque toute mise en page de votre choix en utilisant seulement quelques noms de classes simples.
Notez que vous n'avez pas à remplir les douze colonnes. Utilisez le? End? Si vous voulez qu'une div soit la dernière d'une ligne qui ne comporte pas douze colonnes.
Aller plus loin
En utilisant les principes que nous venons d'apprendre, nous pouvons réaliser toutes sortes de configurations différentes. Disons que nous voulions une ligne divisée en quatre sections égales. Tout ce que nous avons à faire est d’utiliser le? Trois? classe.
À présent, vous devriez savoir comment cela fonctionne. Si vous avez la capacité mathématique de diviser les choses en douze, vous pouvez utiliser ce cadre. Pour que nous puissions voir comment cela fonctionne à plus grande échelle, passons à une mise en page complexe.
Ne laissez pas ce gros morceau de code vous intimider, il utilise exactement les mêmes principes que ceux que nous avons utilisés dans les exemples plus petits.
Cela va créer un div qui s'étend sur six colonnes et le centrer sur la page. Si nous jetions une règle horizontale ici, nous aurions une belle petite ligne de division centrée sur six colonnes.
En plus des centres de centrage, vous pouvez également les décaler et les réorganiser. Pour compenser une div, utilisez "offset-by". Alors? Compensé par un? le compensera d'un créneau et "compensé par deux", eh bien, vous obtenez le point.
Ici, vous pouvez voir que les numéros de classe n’ajoutent que dix, ce qui laisse deux places. Je compte pour cela avec un décalage de deux colonnes. Voici le résultat.
Pour réorganiser les divs différemment dans la sortie par rapport à ceux qui apparaissent dans l'ordre source, vous utilisez des classes push et pull, comme dans l'ancien système de grille 960.
Maintenant, consultez le résultat. Même si le? Trois? la colonne vient avant le? neuf? colonne de la source, l’aperçu en direct montre l’inverse.
La logique derrière ceci est généralement liée au référencement. Supposons que vous vouliez que le nom de votre entreprise soit un en-tête au milieu de la page, entre deux autres colonnes. Il serait peut-être préférable de faire du référencement si le nom de l'entreprise est plus élevé dans la hiérarchie source.
Utilisation de la grille mobile à quatre colonnes
Par défaut, Foundation est réactif, mais le comportement de cet aspect du framework est extrêmement simple. Revenons à notre grande démo live dans le cadre de? Aller de l'avant? section ci-dessus, lorsque la fenêtre devient trop étroite, tout est simplement placé dans une grille à une seule colonne:
Cela fonctionne, mais ce n'est pas très joli ou robuste. Heureusement, vous avez accès à une deuxième grille qui s'active avec la requête multimédia mobile. Cette grille est composée de quatre colonnes et utilise les classes suivantes:
- un mobile
- deux mobiles
- mobile-trois
- mobile-quatre
Ces classes sont implémentées exactement comme celles de la grille de taille complète. Application? Mobile-three? obligera un élément à s'étendre sur trois des quatre colonnes disponibles du réseau mobile. Dans cet esprit, retravaillons la mise en page précédente: