Let's face it, la conception sensible est un travail difficile. La conception de sites Web était déjà assez difficile lorsque nous n’envisagions que des plates-formes de bureau, mais le défi de la taille apparemment infinie de l’écran et de la taille des fenêtres de visualisation a vraiment ajouté à la complexité de la présentation du site Web.
Que vous soyez complètement novice dans le domaine de la conception réactive ou que vous vous considérez comme un expert du domaine, l'outil que nous allons examiner aujourd'hui vous épatera. Cela s'appelle Gridset et c'est incroyable.
Qu'est-ce que Gridset?
Gridset est un projet de Mark Boulton en version bêta qui vise à simplifier considérablement le processus de conception et de développement Web réactif.
Vous avez sans doute vu beaucoup d'outils qui font cette promesse. Le fait est que la plupart ne sont guère plus que des calculateurs de grille glorifiés. Gridset est différent. En fait, il vous fournit un ensemble d’outils robuste qui vous permet de construire et d’appliquer un certain nombre de grilles différentes optimisées pour un nombre quelconque de périphériques.
Il est difficile de décrire comment et pourquoi Gridset est si génial, alors pourquoi ne pas vous montrer un exemple de projet?
Créer un nouveau jeu de grille
Lorsque vous vous connectez pour la première fois à l'application, une liste des ensembles de grilles que vous avez créés dans le passé s'affiche (vous ne construisez pas une seule grille mais plusieurs). Vous pouvez choisir d’en éditer un ou d’en créer un nouveau. Je vais en créer un à partir de rien. Pour ce faire, appuyez sur le? Nouveau jeu? bouton et appliquez un nom de votre choix.
Après cela, il est temps d’intervenir et de commencer à construire votre première grille. L'écran ci-dessous vous donne la possibilité de choisir entre quelques modèles de grille prédéfinis pratiques et de créer vos propres. Nous allons commencer à construire notre propre dans la prochaine étape.
Mettre en place quatre grilles
En utilisant les commandes de base à gauche de l’écran, nous séparons quatre grilles différentes: Bureau A, Bureau B, Table et Mobile. Gardez à l'esprit que ce sont des sélections vraiment arbitraires pour ce tutoriel, n'hésitez pas à suivre votre propre chemin sur les décisions que nous prenons tout au long de l'article. Vous devriez toujours être capable de suivre très bien.
Cela créera quatre grilles d'ardoises vierges différentes dans la section centrale principale, que nous voudrons chacune adapter et personnaliser à nos fins.
Personnalisez votre première grille
Maintenant il est temps de vraiment creuser et de voir comment cela fonctionne. Par défaut, vous devriez voir quelque chose comme l'exemple de la capture d'écran ci-dessous comme état par défaut d'une grille donnée:
Ce n'est pas encore vraiment une grille, mais une simple colonne. Pour personnaliser la grille, nous utilisons la série de contrôles en haut. Disons que je voulais une grille à trois colonnes avec des gouttières de 30 pixels qui s'active à 990 pixels de large et plus. Tout ce que j'ai à faire est de taper ces valeurs dans les champs.
Quel est le préfixe?
Il y a un petit champ ici qui demande un "préfixe de classe". tout ça c'est à propos de quoi? La réponse est que, une fois que vous avez configuré vos différentes grilles à l’aide de Gridset, leur application est aussi simple que de gifler quelques noms de classe dans votre code HTML.
«Une fois que vous avez configuré vos différentes grilles à l’aide de Gridset, leur application est aussi simple que de gifler quelques noms de classe dans votre code HTML.Gridset vous permet de choisir exactement à quoi ressembleront ces classes, bien qu'elles vous limitent à trois caractères. La sémantique risque donc d'être un peu sacrifiée ici. L'exemple typique est d'utiliser? D? pour le bureau,? t? pour tablette, et? m? pour mobile. Je vais construire deux grilles de bureau, donc je vais utiliser? Da? et? db? pour les garder séparés.
Ratio et rafraîchir
Maintenant, ce n’est pas parce que j’ai utilisé trois colonnes que je veux les séparer de manière égale. Heureusement, Gridset vous permet d'ajuster le ratio avec un petit menu déroulant. Incidemment, je veux que le mien soit scindé en tiers, nous allons donc utiliser cette option.
Une fois que vous avez fini de peaufiner tous les paramètres, cliquez simplement sur le bouton Actualiser pour voir votre mise à jour de la grille.
Comme vous pouvez le constater, l'aperçu présente à présent une grille de trois colonnes reflétant les paramètres choisis. Il y a beaucoup de flexibilité supplémentaire ici si vous en avez besoin. Essayez de cliquer sur une colonne pour voir et ajuster ses paramètres individuellement ou cliquez et faites glisser pour réorganiser les colonnes.
Configurez vos autres grilles
Maintenant que nous avons vu comment configurer une grille, passons en revue les trois autres. Pour illustrer à quel point Gridset peut être flexible, configurons une autre grille de bureau, "db". Celui-ci sera pratiquement le même, seulement divisé en quatre colonnes au cas où nous voudrions diviser le contenu de la page en moitiés ou en quartes. Nous n’établissons pas une nouvelle largeur à comptabiliser, mais une autre grille dans la même plage.
Pour finir, nous allons configurer une grille de tablette de 768 pixels de large avec des gouttières de 20 pixels et quatre colonnes, puis une grille mobile de 320 pixels de large avec des gouttières de 10 pixels et deux colonnes.
Encore une fois, faites attention aux préfixes car ils seront bientôt importants. Nous avons pris l'itinéraire standard et utilisé? T? pour tablette et? m? pour mobile.
Notez également que chaque colonne est étiquetée dans toutes les grilles: da1, db3, t2, etc. Elles représentent des emplacements spécifiques que nous pourrons utiliser dans notre code.
Utiliser les grilles
Jusqu’à présent, Gridset s’est approché de façon «soignée». mais pas indispensable. C'est bien d'avoir quelques représentations visuelles de nos grilles, mais à quoi sert-il sans une aide à la mise en œuvre?
C’est là que Gridset souffle vraiment la concurrence. Pour voir pourquoi, cliquez sur le bouton? Utiliser? bouton en haut de la barre d’outils de gauche.
De là, assurez-vous que vous avez? Intégrer? sélectionné et vous verrez un simple lien de feuille de style que vous pouvez insérer directement dans votre code. Dans mon cas c'était le suivant:
Cela signifie que Gridset a pris le travail que j'ai effectué sur les grilles, généré le fichier CSS nécessaire et l'héberge afin que je puisse exécuter des tests. Ce fichier sera automatiquement mis à jour si nécessaire. Par conséquent, si je modifie la grille, je ne dois pas toucher une seule ligne de code. À quel point cela est cool?
Autres goodies
Il y a trois autres onglets dans? Use? section aussi bien. ?Télécharger? vous permet de télécharger le CSS généré afin que vous ne dépendiez pas du site pour héberger votre fichier une fois la phase de test terminée. ?Tricher? vous montre toutes les mesures des grilles que vous avez construites afin que vous puissiez coder facilement votre propre mise en page en utilisant les mêmes numéros. La mise en forme ici est vraiment sympa et ils vous encouragent à imprimer un PDF de référence.
?Accès? vous permet de saisir l'adresse e-mail d'un autre utilisateur pour lequel vous souhaitez également pouvoir utiliser la grille. C'est parfait pour travailler avec une équipe.
Coder un exemple
Maintenant que toutes nos grilles sont configurées, il est temps d'insérer ce lien de feuille de style dans un fichier HTML et de tester la mise en page. La mise en œuvre ici est extrêmement facile, utilisez simplement les classes de grille que nous avons précédemment configurées.
Disons, par exemple, que nous avions deux divs, chacun contenant un titre et un paragraphe. Ainsi:
Maintenant, imaginons que nous voulions les séparer de manière à ce qu’ils se trouvent dans la même rangée, mais la première div occupait 2/3 de la largeur de la page, laissant 1/3 pour la seconde. Utilisation de notre? Desktop A? grille, nous prendrions le? da? préfixe.
Notre première division s'étendrait à la fois sur le? Da1? et? da2? colonne, donc la classe que nous voulons appliquer est "da1-da2". Nous voulons seulement que la deuxième division occupe la troisième colonne, nous allons donc simplement taper «da3».
Ajouter les autres grilles
Facile non? Alors, comment pouvons-nous rendre cette ventouse sensible? C'est ce dont il s'agit, alors allons-y! Tout ce que nous avons à faire est d’ajouter des classes aux autres grilles que nous avons mises en place.
Commencez par le réseau mobile, puis progressez. Je souhaite que le contenu soit divisé de manière égale sur les versions mobile et tablette. Je mets donc div div à "m1". et? t1-t2? et div deux à? m2? et? t3-t4 ?.
Cela signifie que chaque div occupera une colonne dans la vue mobile, puis sautera de deux colonnes dans la vue de la tablette, puis remontera à nouveau dans une division 2: 1 dans la vue du bureau. C'est une mise en page voodoo élégante avec très peu de travail!
Faisons cela
Bon, alors maintenant que nous avons l'essentiel de la façon dont cela fonctionne, codons une page d'exemple complète avec sept div différents.