L'un des générateurs de grille réactifs les plus intéressants et les plus utiles est un outil appelé Gridpak, qui vous permet d'utiliser une interface utilisateur simple et amusante pour créer des grilles fluides, pilotées par une requête multimédia. Nous avons examiné Gridpak il y a environ un an et sommes parvenus à la conclusion que, bien qu'utile, il manquait de convivialité pour la mise en œuvre du code.
Les développeurs ont fait des progrès dans ce domaine et je pense qu'il est temps que nous examinions à nouveau. Rejoignez-nous pour découvrir comment Gridpak a amélioré son offre et sa structure de code afin de fournir une expérience meilleure et plus simple aux utilisateurs.
Rencontrez Gridpak
Gridpak a fait l’objet de nombreuses synthèses d’outil de conception Web réactives; vous l’avez donc probablement déjà rencontré une ou deux fois. Voici une capture d'écran pour rafraîchir votre mémoire:
Si vous n'avez pas lu notre dernier article, ce que vous voyez ici est une représentation visuelle de votre grille. Le graphique principal au centre montre les colonnes, le remplissage et la gouttière en fonction de votre saisie et de la plage actuellement sélectionnée. Passons brièvement en revue le fonctionnement de cet outil.
Ajout de points d'arrêt
Pour commencer, prenez le grand cercle à droite qui contient deux flèches et faites-le glisser vers la gauche ou la droite. Vous verrez la grille entière s'accroupir et se développer en même temps. En bas, vous trouverez un indicateur qui vous indique la largeur actuelle. Une fois que vous obtenez cela à un endroit où vous souhaitez insérer un nouveau point d'arrêt, cliquez sur le bouton? Ajouter un point d'arrêt? bouton.
Au fur et à mesure de la configuration des points d'arrêt, la partie inférieure de l'interface utilisateur sera divisée en différentes sections, qui serviront de plages de largeur de fenêtre. Dans la capture d'écran ci-dessous, vous pouvez voir que ma première plage va de 0 à 319 px, point auquel un point d'arrêt se crée, créant une nouvelle section qui s'étend de 320 à 479 px. Nous continuons ce processus jusqu'à ce que toutes les requêtes de médias de votre conception soient comptabilisées.
Modification de la grille
Notez dans la capture d'écran précédente que, lorsque ma largeur actuelle se situe dans une plage donnée, cette plage est mise en surbrillance en rouge dans la partie inférieure. Cela signifie que je peux entrer et définir les paramètres de grille spécifiques pour cette plage. Pour ce faire, j'utilise les outils simples à l'extrême droite de la page.
Ici, nous pouvons définir le nombre de colonnes, le remplissage et la largeur de la gouttière pour chaque section. Faites simplement glisser votre grille pour mettre en surbrillance chaque section, puis configurez-la pour la rendre aussi différente que vous le souhaitez de toutes les autres sections. Par exemple, votre grille mobile peut ne comporter qu'une ou deux colonnes, alors que votre grille de bureau en contient douze.
Le téléchargement
Une fois que vous avez terminé de configurer votre grille dans Gridpak, vous êtes prêt à télécharger vos fichiers. Cette fois-ci, vous remarquerez que nous avons encore quelques fichiers avec lesquels travailler:
Comme je l'ai mentionné ci-dessus, j'avais précédemment confronté les développeurs à une période difficile, car à ce stade, le plaisir était terminé et Gridpak était devenu tellement difficile à utiliser. On dirait qu'ils ont amélioré l'expérience en se concentrant sur trois choses principales:
- Une démo pleinement fonctionnelle: C'est absolument essentiel. La dernière fois que nous avons examiné Gridpak, aucune démonstration n’était incluse, ce qui nous permettait de tout régler nous-mêmes. Avoir cela en main signifie que nous pouvons creuser dans un exemple correctement configuré et apprendre comment les choses fonctionnent. Je pense que c’est comme cela que la plupart des développeurs ont tendance à apprendre, ce qui offre une bien meilleure expérience aux utilisateurs novices de Gridpak.
- Un meilleur? LISEZMOI? fichier: Le? LISEZMOI? Le fichier semble aussi s’être amélioré beaucoup mieux. Il vous guide à travers chaque partie du téléchargement et vous oriente en fait sur la bonne manière de travailler avec les classes prédéfinies de votre fichier CSS.
- Commentaires détaillés: Outre les instructions du fichier "README" et peut-être encore plus utiles, les commentaires que vous trouverez sont éparpillés dans les différents fichiers de code. Les développeurs ont pris soin d'expliquer chaque pièce du puzzle au fur et à mesure, de sorte que peu importe où vous vous trouvez dans un fichier, il existe une belle description de ce qui se passe pour vous aider à utiliser ce que vous avez donné.
En général, les responsables de Gridpak n'ont pas vraiment changé son fonctionnement, mais les améliorations apportées en matière de diffusion d'informations et d'instructions utiles à l'utilisateur rendent l'outil complet beaucoup plus accessible et convivial.
Utiliser le code
La dernière fois, je n’ai abordé que brièvement le fonctionnement du système Gridpak. Avec plus de soutien en matière d’information que jamais, je voudrais approfondir un peu la question pour que vous puissiez avoir la certitude que vous savez exactement comment tout cela fonctionne et que vous pouvez l’utiliser assez rapidement dans un projet.
Les morceaux
Une série de fichiers CSS (CSS, LESS et SCSS), ainsi qu’une poignée d’images et un fichier JavaScript sont inclus dans le téléchargement. La démo a également un fichier HTML pour référence.
Les images et le fichier JavaScript servent uniquement à créer une superposition de grille afin que vous puissiez voir le fonctionnement de vos colonnes. Chaque système de grille en possède un et, franchement, je ne les utilise jamais. Je vais donc les jeter et me concentrer sur les éléments que vous utiliserez pour votre flux de travail de développement.
Le HTML
La première chose à faire est de créer votre propre fichier HTML. Codez votre tête comme d’habitude, puis lancez le balisage comme suit:
Tout ce que vous créez sera jeté à l'intérieur de cette? Page? div, qui sert essentiellement de wrapper qui centre le contenu de la page.
Ensuite, vous diviserez tout votre contenu en lignes. Pour ce faire, chaque élément de la page sera jeté dans une div avec une classe de "rangée". Vous en aurez plusieurs:
À l'intérieur de la rangée, vous pouvez placer votre contenu normal, comme toujours. Assurez-vous d'utiliser le? Col? classe sur chaque bloc de contenu, ce qui applique essentiellement les styles de colonne globaux.
Noms de classe sémantique
Après application du? Col? classe, vous êtes libre d'appliquer un nom de classe sémantique. Il n’est pas nécessaire d’utiliser des noms de classe amusants comme? 1-3-6? ou? m1 ?, utilisez quelque chose de descriptif qui communique exactement ce que cette section est et fait. Voici un exemple avec un en-tête:
Si nous développons un peu cela pour inclure quelques sections différentes, voici à quoi notre code ressemblerait. Notez les noms de classe clairs et descriptifs et l'inclusion de? Col? sur chaque div.
SCSS
La dernière fois que nous avons examiné Gridpak, nous avons plongé dans la CSS simple. Pour changer les choses, regardons le fichier SCSS cette fois-ci, car Sass est génial et vous devriez probablement simplement céder et l'utiliser déjà.
Trois mixins
Pour bien comprendre ce qui se passe dans le fichier SCSS, vous devez vous concentrer sur trois mixins inclus: col, span et span_first.
col
Le premier mix que nous rencontrons est "col", que nous utiliserons pour définir ces "col". classes que nous avons vu dans le HTML ci-dessus.
Je l'ai divisé en trois sections afin que vous puissiez facilement voir ce qui se passe. La première partie fait flotter les colonnes et ajoute une bordure transparente à chacune. Ensuite, nous définissons la taille de la boîte et l’arrière-plan. Ceux-ci aident à manipuler le modèle de boîte en quelque chose d'un peu plus convivial en maths.
Ce mixin est implémenté assez facilement, il est simplement lancé dans le? Col? classe. Vous placerez également ici les styles de colonne supplémentaires que vous souhaitez appliquer.
envergure
La prochaine étape est le? Span? mixin. C'est là que toutes les mathématiques sophistiquées sont effectuées pour déterminer les différentes largeurs possibles.
Ce morceau de code peut être très déroutant à cause des variables, jetons donc un coup d'œil à chacun d'eux et voyons ce qu'il fait.
- $ num: Lorsque nous implémenterons cela plus tard, cela indiquera au mixin dans quelle colonne nous nous trouvons. Si nous configurons la première des trois colonnes, la valeur est 1.
- $ gutter_pc: La gouttière, exprimée en pourcentage.
- $ gutter_px: La gouttière, exprimée en valeur de pixel.
- $ rembourrage: Le remplissage, exprimé sous forme de valeur en pixel ou de pourcentage.
- $ max_columns: Le nombre de colonnes de notre ensemble de grille actuellement actif. Il peut être défini sur 1 pour le réseau mobile et sur 12 pour le bureau.
- $ one_col: La largeur d'une seule colonne, calculée automatiquement.
Cela peut sembler une lourde charge de travail, définir ces variables chaque fois que vous créez une nouvelle requête multimédia, mais souvenez-vous que cette tâche est déjà terminée. Les paramètres que nous avons entrés dans l'interface utilisateur dans les premières étapes ci-dessus définiront les paramètres de ces variables à chaque point d'arrêt ou plage.
span_first
Ceci est appliqué à la première étendue de chaque plage. Il efface la marge de gauche sur la première colonne.
Utiliser vos grilles
Tout droit sorti de Gridpak, vous trouverez une section de votre CSS ou SCSS dédiée à chacune des gammes que vous avez établies. Chaque section est très bien commentée pour vous permettre de savoir ce qui se passe. Voici l'une de mes gammes, sans code supplémentaire ajouté par moi:
Comme vous pouvez le constater, la section est complétée par un commentaire nous indiquant la plage que nous examinons (0-319 pixels), ainsi que les étendues que nous trouverons dans cette plage. On dirait que c'est notre gamme mobile, nous allons donc trouver deux plages, l'une à 48% et l'autre à 100%. La plage de 48% couvre une colonne et la plage de 100% couvre toutes les colonnes.
Les marges et le rembourrage appropriés sont appliqués à notre? Col? classe, puis les variables pour notre span mixin sont définies. Encore une fois, ces valeurs sont insérées automatiquement en fonction de ce que vous avez fait dans l'application Web. Ici nous pouvons voir le résultat de ce processus:
Ensuite, la première colonne reçoit notre? Span_first? mélanger pour enlever cette marge gauche.
Enfin, chacune des largeurs de portée est définie à l'aide de la commande? Span? mixin avec les variables ci-dessus comme entrée.
C’est la partie pour laquelle nous avons en fait une entrée manuelle à faire. Afin de définir les largeurs pour les différentes pièces de notre code HTML, nous ajoutons simplement les noms de classe avec l'étendue appropriée.
Par exemple, si nous souhaitons que notre contenu principal et le contenu décrit prennent chacun une colonne d'environ la moitié de la page, nous ajoutons les noms de leurs classes avec "span_1". Nous voudrons que notre en-tête soit étendu sur toute la page, nous allons donc l'ajouter avec "span_2", qui s'étend sur toute la longueur de la page.
C'est vraiment tout ce qu'il y a à faire! Tout ce que vous avez à faire est de répéter ce processus rapide d’ajout de classes pour chacune des plages que nous avons configurées dans l’application Web.
Par exemple, supposons que nous passions à la section desktop qui contient douze plages possibles. Ici, nous voulons que l'en-tête occupe 100% de la largeur, le contenu présenté, le tiers de la largeur et le contenu principal, les 2/3 de la largeur. Nous ajouterons l'en-tête? classe à? span_12 ?, le? contenu principal? classe à? span_9? et le? en vedette? classe à? span_3 ?.
Voici un aperçu des largeurs que ce code appliquerait à chacune de ces sections. Avec très peu d'effort, nous avons une belle petite grille de contenu:
Continuez simplement à configurer chaque plage, puis redimensionnez votre fenêtre et vous verrez votre contenu s’adapter automatiquement. Si vous souhaitez le voir en action, consultez la page de démonstration fournie avec chaque téléchargement Gridpak.
Conclusion
Ayant passé quelque temps avec Gridpak depuis ma première évaluation, j’ai pensé qu’il était nécessaire de revenir sur cet outil et de lui dire que j’estime qu’il est en fait très utile comme point de départ pour une conception réactive. La documentation et les commentaires actuels devraient vous expliquer tout ce que vous devez savoir, réduisant considérablement la courbe d'apprentissage.
Si vous utilisez la version SCSS comme précédemment, vous disposerez d'un cadre assez concis et flexible et vous aurez besoin de très peu d'efforts pour que votre contenu adhère aux différents points d'arrêt. Leur configuration avec l'interface Web est certainement plus facile que de les coder à la main.
J'ai toujours un problème avec l'idée de commencer par les requêtes multimédia et l'insertion de contenu plutôt que de créer des requêtes multimédia lorsque le contenu avance, mais tant que vous commencez avec la bonne structure HTML, vous pouvez toujours travailler de cette manière tout en utilisant Gridpak. .
Laissez un commentaire ci-dessous et laissez-moi savoir ce que vous pensez de Gridpak. Envisageriez-vous de l'utiliser comme point de départ pour votre prochain projet de conception adaptative? Quels autres outils RWD utiles avez-vous rencontrés récemment?