Utilisez Gridpak pour créer votre propre grille réactive

J'aime trouver des outils gratuits capables de faciliter un peu mon travail (et le vôtre). La communauté des développeurs Web regorge de personnes talentueuses, plus disposées à partager leurs créations avec le monde entier sans rien demander en retour.

Aujourd'hui, nous allons examiner l'un de ces outils Erskine Design appelé Gridpak. Grâce à elle, nous pouvons rapidement et facilement générer notre propre grille réactive pour créer des pages Web qui fonctionnent bien sur de nombreuses tailles d'écran. Il est toutefois un peu difficile à mettre en œuvre. Nous vous aiderons donc à configurer vos styles une fois le téléchargement téléchargé.

Cet article fait partie de notre série intitulée "Au-delà de la conception de bureau", qui vous est proposée en partenariat avec Heart Internet VPS.

Rencontrez Gridpak

Comme vous le savez sûrement, la création d’une grille simple et non réactive peut s’avérer très compliquée, et cela devient beaucoup plus complexe lorsque vous commencez à modifier cette grille à différents points de rupture. Si vous êtes un designer qui évite les mathématiques chaque fois que cela est possible, aborder un tel projet peut être une tâche plutôt intimidante.

Gridpak est une application Web gratuite qui vous évitera de créer votre propre système de grille réactif. Vous ne devez pas non plus vous conformer à la structure rigide d'une grille construite par quelqu'un d'autre ni travailler trop dur pour créer la vôtre. En quelques clics et en faisant glisser les actions, vous aurez un modèle de grille réactif génial qui est construit selon vos spécifications.

Bien que Gridpak soit facile à utiliser, cela peut être un peu déroutant au début si vous ne savez pas ce que vous faites. Lorsque j'ai découvert le site pour la première fois, j'ai cliqué un bon moment avant de me sentir vraiment à l'aise avec le processus. Je vais vous expliquer comment tout cela fonctionne pour que vous puissiez utiliser cet outil pratique rapidement et efficacement dans votre flux de travail.

Les contrôles

Lorsque vous chargez pour la première fois la page Gridpak, vous verrez une image d'une grille à six colonnes. À droite de la grille se trouve une série de contrôles. Bien que cela semble être une quantité modeste de paramètres, le niveau de personnalisation disponible ici est assez complet.

Comme vous pouvez le constater, vous pouvez définir rapidement et facilement le nombre de colonnes, ainsi que le remplissage et la gouttière, en pourcentage ou en pixels. Le petit bouton rond avec les flèches représente essentiellement votre fenêtre. Faites-le glisser vers la gauche et la droite pour voir comment la grille réagirait à la modification de la taille des fenêtres. Il y a aussi un bouton pour ajouter un point d'arrêt, que nous verrons ensuite.

Indicateur de point d'arrêt

Au bas de l'interface utilisateur se trouvent une règle de pixel ainsi qu'une petite icône indiquant que la grille par défaut actuelle sera appliquée tout au long du continuum des tailles de fenêtre d'affichage, de zéro à l'infini. En gros, cela signifie simplement qu'aucun point d'arrêt n'a encore été ajouté. La même grille s'applique à toutes les tailles.

Ajout de notre premier point d'arrêt

Maintenant, l’essentiel ici est que vous souhaitiez que la structure sous-jacente de base de votre site change et évolue vers différentes tailles de fenêtres d’affichage. La clé de cette utilisation est de ne pas oublier de penser à votre réseau en termes de gammes, pas seulement des points d'arrêt. Un bloc de paramètres donné aura une gamme de tailles de fenêtres d'affichage possibles où cette grille sera active.

Le cas typique d'utilisation consiste à configurer une grille pour chaque taille de mobile, de tablette et de bureau. Il est facile de configurer ceci, faites simplement glisser le curseur sur la largeur de votre cible, ajoutez un point d'arrêt, passez à la taille cible suivante, ajoutez un autre point d'arrêt, etc.

Ici, j'ai placé le curseur à 320 pixels et ajouté un point d'arrêt, puis à 480px et ajouté un autre point d'arrêt. Lorsque vous faites glisser le curseur, la grille se mettra à jour en fonction des paramètres que vous avez appliqués. Les plages que vous avez configurées apparaissent en bas, la plage actuelle étant surlignée en rouge.

Le flux de travail ici est un peu waché. L'astuce consiste à s'assurer que vous avez sélectionné la bonne plage. Ainsi, lorsque je souhaite ajuster mes paramètres pour 0-319px, j'ajoute un point d'arrêt à 420px, puis déplace mon curseur légèrement vers la gauche pour m'assurer que cette plage est active.

En route

Une fois que vous avez déterminé votre grille pour la première plage de largeurs, ajoutez un autre point d'arrêt, puis déplacez votre curseur un peu en arrière et définissez la grille pour cette section.

Ici, vous pouvez voir que j'ai défini une grille de trois colonnes qui s'activera entre 320 et 479 pixels. Une fois que cela est défini, si je déplace mon curseur d'avant en arrière, je peux voir la mise à jour de la grille en direct avec les différents paramètres de la fenêtre d'affichage.

Pour finir, je vais ajouter une autre grille occupant la plage 480-959 et une dernière répondant à 960 pixels ou plus.

Le téléchargement

Une fois vos grilles élaborées, il est temps de télécharger les fichiers et de vous mettre au travail. Le téléchargement est l'un des aspects les plus impressionnants de l'application entière. Il est très complet et propose non seulement un fichier CSS, mais également des fichiers LESS et SCSS ainsi que des fichiers PNG de grille pour Photoshop et un fichier JavaScript permettant de superposer la grille sur votre document live.

La page À propos de Gridpak vous en dit plus sur chaque élément inclus dans le téléchargement. Par conséquent, je vais ignorer la redondance et vous permettre de le vérifier. Le plus important est de savoir comment implémenter la grille dans votre propre travail, et le faire n'est probablement pas aussi facile que vous l'espériez. Nous allons plonger et voir pourquoi.

Complications de la grille

Maintenant, l’interface Web facilite la configuration d’une bonne partie du code personnalisé qui utilise les requêtes multimédia. Si nous examinons nos CSS, LESS ou SCSS, nous pouvons clairement voir que les requêtes de média ont bien été générées.

Bien qu'une grande partie du travail CSS soit faite pour vous, vous n'êtes certainement pas fini. Certes, il est assez difficile de mettre en œuvre la grille de manière utile.La raison en est bien sûr que la conception réactive peut être assez compliquée, les systèmes de grille peuvent être compliqués, et lorsque vous combinez les deux, vous obtenez beaucoup de complexité. Si vous maîtrisez vraiment bien les CSS, vous devriez pouvoir le comprendre, mais si vous êtes relativement nouveau, vous risquez de vous faire mal à la tête. Par conséquent, je recommande que cette ne devrait pas soyez votre première incursion dans la conception réactive.

Comment ça marche

Comme cela peut être assez compliqué et qu'il n'y a pas beaucoup de documentation disponible, je vais essayer de vous l'expliquer. Comme avec tout système de grille CSS, Gridpak vous donnera quelques classes prédéfinies à appliquer à votre contenu. Cependant, le développeur vous recommande d'utiliser vos propres classes sémantiques et d'utiliser simplement les classes pré-construites comme guide.

Alors disons que vous avez une div contenant trois paragraphes de texte. Quelle classe devriez-vous mettre dessus? C'est délicat parce que vous voudrez peut-être que ce soit span_one et un point et span_three à un autre point. Heureusement, nous avons déjà décidé d'utiliser nos propres noms de classe afin que cela devienne un peu plus facile.

Si nous voulons appeler notre section de "caractéristiques", nous ajoutons ce nom de classe à chacun des paragraphes de notre code HTML, puis nous passons au CSS. Ici, nous examinons d’abord le conteneur CSS générique et nous nous assurons d’ajouter notre nouvelle classe pour s’assurer qu’elle prend bien ces styles:

Ensuite, vous allez dans la requête multimédia spécifique et définissez les styles pour votre classe d'entités dans cette plage. Une fois encore, vous devrez ajouter la classe aux classes génériques préexistantes:

Ensuite, vous entrez et ajoutez la classe à côté de la plage spécifique que vous essayez de faire correspondre. Avec cette taille de fenêtre, je veux que les trois paragraphes apparaissent sur une seule ligne. J'ajoute donc la classe d'entités à côté de la classe span_2 (c'est une grille de six colonnes ici, donc deux deux équivaut à six).

Cela fera en sorte que les trois paragraphes apparaissent dans une seule ligne. Mais que se passe-t-il lorsque nous entrons dans une autre fenêtre? Par exemple, à la plus petite taille, nous souhaitons peut-être que les paragraphes soient empilés les uns sur les autres à 100% de la largeur. Une fois encore, nous entrons et trouvons l'étendue qui correspond à la largeur que nous cherchons, ainsi que span_2 par la suite, et ajoutons notre classe .features (n'oubliez pas de l'ajouter également aux classes génériques).

Vous rencontrerez sans doute aussi des problèmes de marge en procédant de la sorte (je l’ai certainement fait). En effet, les marges ne sont réinitialisées qu’après chaque? Rangée? div, mais lorsque chaque paragraphe occupe 100% de la largeur, nous devons supprimer toutes les marges. En fin de compte, attendez-vous à ce que de nombreux ajustements soient nécessaires.

Gardez également à l'esprit que span_2 ne sera pas toujours le choix approprié pour cet exemple. Par exemple, si notre grille comporte jusqu'à 12 colonnes de taille normale, nous voudrons probablement ajouter la classe d'entités à côté de la classe span_4, ce qui garantira que, une fois encore, les trois paragraphes occuperont toute la largeur.

Est-ce utile?

Lorsque j'ai récupéré mon premier téléchargement, je m'attendais à une mise en œuvre relativement simple. Cependant, il m'a fallu un certain temps pour comprendre ce qui se passait. Je complique peut-être trop les choses, mais il me semble qu'une personne suffisamment compétente pour implémenter Gridpak est probablement assez compétente pour le sauter complètement, tandis que quelqu'un qui a besoin d'aide pour la conception réactive peut trouver le CSS trop compliqué à la fin.

En toute honnêteté, j'aimerais voir Gridpak reconstruit en tant que générateur personnalisé pour le Skeleton Boilerplate, dont la grille réactive est à la fois plus polyvalente et facile à mettre en œuvre.

Cependant, cela étant dit, je me suis beaucoup amusé à jouer avec Gridpak et je le considère vraiment comme un moyen solide de démarrer un projet réactif si vous savez ce que vous faites. Comme je l'ai déjà dit, je ne suis pas le plus grand partisan de la configuration de requêtes multimédia spécifiquement basées sur les tailles d'écran courantes, mais c'est un argument pour un autre jour.

J'aimerais entendre vos pensées. Avez-vous déjà utilisé Gridpak pour créer une page Web? Qu'en as-tu pensé? Avez-vous un flux de travail différent et / ou meilleur que le mien ci-dessus? J'adorerais l'entendre!