Construire des grilles était moyennement compliqué avant la conception réactive, de nos jours ils peuvent être carrément intimidants. Lorsque vous plongez dans une mise en page complexe, il est facile de se perdre dans les calculs et les pourcentages. Bien sûr, les nerds hardcore parmi nous adorent jouer avec ce genre de choses, mais certains développeurs veulent juste se mettre au travail!
Aujourd'hui, nous allons examiner un système de grille impressionnant qui vous aidera à configurer vos grilles réactives avec très peu d'effort. Il est sémantique, conçu pour une conception réactive, complètement flexible dans votre façon de travailler et optimisé par Sass. Rencontrez les grilles zen.
Voyez-le en action
Si vous souhaitez avoir un aperçu de ce que nous construisons aujourd'hui avec Zen Grids, cliquez sur le lien ci-dessous.
Démo: Cliquez ici pour lancer.
Qu'est-ce que Zen Grids?
Je sais ce que vous pensez, "Un autre système de grille freaking!" Zen Grids est différent cependant. Oui, ils disent tous ça. Celui-ci vaut vraiment le coup d'oeil cependant.
Il y a beaucoup de raisons pour lesquelles je pense que Zen Grids est un très bon outil à découvrir, en voici quelques-unes:
Aucune des choses que tu détestes
Il y a de nombreuses raisons de détester les systèmes de grille. Des noms de classe laids et non sémantiques, un crapload de divs apparemment redondants mais d'une manière ou d'une autre nécessaires; La liste se rallonge de plus en plus. Zen Grids n'a cependant rien de tout cela. Vous configurez votre document comme bon vous semble et il s’intègre parfaitement dans votre flux de travail.
Construit sur Sass
Je sais que c'est un inconvénient pour beaucoup d'entre vous, mais c'est un avantage considérable pour moi. Sass est la raison pour laquelle les grilles zen peuvent être sémantiques. Les fichiers SCSS prennent en charge toutes les opérations mathématiques et vous permettent d’appliquer les mixins de grille quand et où vous le souhaitez.
Réactif Amical
Techniquement, je n’appellerais pas Zen Grids un système de grille réactif (bien qu’il se présente lui-même comme tel) car il n’a vraiment aucune fonction de requête multimédia intégrée à la manière de Bootstrap.
Je l'appellerais un fluide système de grille parce qu'il est construit sur des pourcentages. Cela étant dit, il est assez facile de relier Zen Grids à certaines de vos propres requêtes multimédia et de le rendre réactif.
Facile comme 1, 2, 3
Zen Grids est vraiment très facile à utiliser. 1 instruction d'importation, 2 variables et 3 mixins. C'est tout ce qu'il faut pour construire une mise en page de base. Dans mes expériences, j'ai poussé cela à quatre mixins (il en faut un supplémentaire pour l'imbrication), mais ce n'est pas mal du tout compte tenu de la complexité qui peut être obtenue.
Avant que tu commences
Je vais plonger et vous apprendre à utiliser cette ventouse, mais avant d'entrer dans cela, une petite configuration est nécessaire. Tout d'abord, vous devez vous assurer que Sass et Compass sont installés.
Obtenez Scout
Si vous êtes à l'aise avec Ruby, les terminaux et les scripts Shell, tout cela devrait être assez simple. Pour le reste d'entre nous, je recommande simplement de télécharger Scout et de l'appeler un jour. Scout est gratuit, open-source et multi-plateforme. Pointez-le sur un dossier contenant des fichiers SCSS et il sera automatiquement compilé en CSS. Codekit et LiveReload sont encore meilleurs, mais ils vont vous coûter cher.
Obtenir des grilles zen
Une fois que vous avez configuré Sass et Compass, prenez Zen Grids de GitHub. Téléchargez le fichier .zip et jetez tout sauf les? Stylesheets? dossier. C'est ici que vous trouverez les fichiers SCSS qui alimenteront votre grille.
Commencer
Pour commencer, je vous recommande d'explorer votre téléchargement et de trouver le fichier? _Grids.scss? fichier. Sortez-le et placez-le dans un nouveau dossier de projet, puis créez un nouveau fichier SCSS et importez-le.
Ça y est, nous sommes maintenant prêts à construire une grille!
Démarrer un conteneur
Pour commencer une nouvelle grille, vous aurez besoin d'une sorte de conteneur. Je ne considère pas cela comme une douleur, étant donné que je le fais généralement même sans système de réseau tiers.
Ici, j'ai créé une div avec une classe? Conteneur? mais rappelez-vous que je vous avais promis que Zen Grids se connecterait à votre flux de travail spécifique. Cela signifie que le conteneur peut être tout ce que vous voulez. Utilisez une section au lieu d'un div, changez la classe en "main"? devenir fou. Cela n'a pas vraiment d'importance!
Maintenant, passez sur votre SCSS et incluez le zen-grid-container mixin en utilisant la syntaxe Sass standard.
Ceci indique à Zen Grids que vous souhaitez que cet élément devienne un conteneur. Pendant que vous y êtes, vous pouvez aussi bien définir une largeur et centrer la div.
Définir les variables
Il est maintenant temps de définir les variables pour le nombre de colonnes et la gouttière. J'aime faire cela à l'intérieur de la classe conteneur parce que nous le changerons plus tard et qu'il est plus facile de rester tel quel.
Pour commencer, définissez zen-column-count à 3 et zen-gouttière-largeur à 10px. Évidemment, cela nous donnera une disposition en trois colonnes avec une gouttière de 10 pixels entre chaque colonne.
Créer du contenu
Ensuite, nous voudrons créer du contenu HTML. Puisque nous apprenons simplement à utiliser les grilles Zen, je vais utiliser un contenu super générique ici à titre d'exemple. Ici, j'ai créé trois divs, chacun contenant un simple paragraphe:
N'oubliez pas que ces noms de classe sont complètement arbitraires et ne sont numérotés que pour nous aider à garder une trace de tout au long des exemples. Vous avez toute liberté pour utiliser les noms de classe que vous choisissez. Le vôtre devrait refléter les pratiques sémantiques standard.
Bloc de base CSS
Encore une fois, uniquement à des fins de démonstration, je vais appliquer un style générique à chaque bloc de contenu que nous créons. Cela nous aidera à voir ce qui se passe avec chaque bloc.
Déplacez le contenu
Nous avons trois divisions avec lesquelles travailler et nous avons déjà configuré trois colonnes, assignons donc une division à chaque colonne. Faire cela nécessite la zen-grid-item mixin. Voici à quoi cela ressemblera dans notre SCSS.
Que se passe-t-il avec cette syntaxe? Voici un tableau pratique pour vous aider:
Comme vous pouvez le constater, le premier nombre détermine le nombre de colonnes que l’élément couvrira. Le deuxième numéro détermine la position de cet élément. Dans notre exemple ci-dessus, nous avons positionné les trois divs aux emplacements 1, 2 et 3 consécutivement.
Cela crée une simple grille divisée en trois tiers, chaque bloc de contenu occupant un troisième:
Soyons compliqués
Bon, maintenant que nous connaissons les bases du fonctionnement de cette chose, passons à une mise en page beaucoup plus complexe. Au lieu de trois blocs de contenu, nous allons en avoir huit. Nous allons utiliser différents conteneurs, de nouvelles lignes et même des imbrications pour pousser notre test à la limite.
HTML
Cette fois, nous allons lancer une grande quantité de HTML. Nous utilisons toujours la même configuration de base qu'avant, la seule complication réelle est que le? Imbriqué? conteneur est réellement assis à l'intérieur de notre autre conteneur.
Pour que les blocs de contenu aient une belle apparence cette fois-ci, voici le style que nous allons utiliser:
Nidification
Comme avant, nous commençons avec trois blocs de contenu. La difficulté réside toutefois dans le fait que le troisième bloc de contenu est en fait un conteneur imbriqué, qui contient deux autres blocs. C'est vraiment très facile de mettre cela en place.
Juste comme avant, utilisez zen-grid-item (1, 3) sur le? .nested? classe, mais aussi inclure conteneur zen-imbriqué () pour indiquer qu'il s'agira d'un conteneur imbriqué.
Pas de problème non? Nous ajoutons maintenant les blocs trois et quatre dans le conteneur imbriqué. Gardez à l'esprit que le conteneur imbriqué contiendra également trois colonnes, je souhaite donc que les blocs trois et quatre prennent chacun trois colonnes (ils auront toute la largeur et seront superposés).
Regardez le code du bloc quatre ici. Pour commencer, j'ai utilisé le zen-clear () mixin. Voici comment créer une nouvelle ligne. Sans cela, les blocs trois et le bloc quatre occuperaient la même place.
Voici l'effet que cela a sur notre mise en page:
Agréable! C’est exactement ce que nous visions. Notre contenu est divisé en trois blocs, le bloc de l'extrême droite étant divisé en deux sous-blocs. Tout cela sans un peu de maths!
Changer la grille
Nous terminerons ici en codant container2. Ce conteneur contient quatre blocs de contenu, et j'aimerais les mettre tous côte à côte, mais notre configuration ne comporte que trois colonnes? et maintenant?
La réponse est bien sûr que nous devons réinitialiser nos variables lorsque nous configurons le nouveau conteneur. Je ne savais pas si Sass s'en chargerait correctement la première fois, mais cela semble fonctionner parfaitement. Voici le code:
Comme vous pouvez le constater, nous sommes allés cette fois-ci avec quatre colonnes et une gouttière de 10 pixels. Nous définissons ensuite chaque bloc de contenu sur une largeur d’emplacement et nous les positionnons de manière consécutive sur les colonnes.
On y va, une mise en page décemment complexe utilisant seulement quelques mixins faciles à appliquer. Pour la flexibilité offerte par cet outil, il n’est vraiment pas plus simple que cela.
Rendez-le réactif
Avant de dire qu'il était facile de rendre notre réseau réactif. Jusqu'ici, il est fluide, il a donc été redimensionné en fonction de la taille de la veuve, mais il ne reflue jamais. Corrigeons cela avec une requête média rapide:
Ici, j'ai créé une requête multimédia pour 700 pixels et entièrement redistribué la mise en page pour l'adapter à la fenêtre d'affichage plus étroite. Voici à quoi cela ressemblera après le point d'arrêt.
C'est génial ça? Nous venons de réaliser une mise en page extrêmement complexe et réactive, sans mathématiques, tout en évitant les noms de classes restrictifs et non sémantiques. C'est un exploit assez sérieux.
Aide-mémoire
Nous avons couvert beaucoup de choses ci-dessus, alors laissez-moi vous expliquer cela dans une jolie petite fiche de triche:
- Définir le conteneur: @include zen-grid-container
- Définir le conteneur imbriqué: @include zen-nested-container ()
- Définir le nombre de colonnes: $ zen-column-count: 2
- Définir la largeur de la gouttière: $ zen-gutter-width: 10px
- Définir l'étendue et la position de l'article: @include zen-grid-item (1, 1)
- Nouvelle rangée @include zen-clear ()
Qu'est-ce que tu penses?
Voilà donc le système Zen Grids. Personnellement, je pense que c'est un petit système de grille vraiment utile qui fonctionne assez bien. Qu'est-ce que tu penses? Cela vous épargnerait-il beaucoup de temps et d’efforts dans votre flux de travail réactif ou y ajouterait-il beaucoup de complications inutiles? Laissez un commentaire et faites-le moi savoir.