Détestez-vous les frameworks de grille CSS, mais aimez les avantages rapides de mise en page qu'ils procurent? Avez-vous des difficultés avec les calculs et le code nécessaires pour créer vos propres présentations flexibles multi-colonnes à la volée?
Aujourd'hui, nous allons vous guider dans la création de votre propre système de base réutilisable pour créer plusieurs colonnes que vous pouvez implémenter n'importe où et à tout moment avec seulement quelques lignes de code. Aucun code gonflé ou noms de classe non-sématiques requis!
Grid Frameworks: Avantages et inconvénients
Je suis un très grand fan des frameworks de grille CSS. J'aime les télécharger, les ouvrir et voir comment ils fonctionnent. J'ai écrit sur presque tous les bons ouvrages que je peux trouver ici sur Design Shack et je continuerai probablement de le faire à l'avenir.
L'avantage des structures de grille est évident: elles permettent une mise en page rapide ridicule. Si vous avez à l'esprit une mise en page assez simple pour votre site, vous pouvez l'effacer sans effort et passer plus de temps à enrichir votre conception que de vous débattre avec la façon de faire fonctionner vos colonnes.
Cependant, les frameworks de grille CSS présentent également des inconvénients assez sérieux. Pour commencer, beaucoup d'entre eux sont assez volumineux et vont bien au-delà des simples classes de mise en forme tout en cherchant à dénommer de manière extensive chaque élément HTML par défaut que le monde n'a jamais vu, aussi obscur soit-il. Ce problème de taille peut certainement tendre à rendre les cadres difficiles à comprendre.
Les cadres de grille sont également assez fixes. Vous devez jouer selon leurs règles ou vous finissez par casser le tout. Personnaliser le code à votre convenance peut s'avérer un processus long et pénible, ce qui va à l'encontre de l'idée de gagner du temps.
Enfin, de nombreux codeurs sont de vrais opposants du code sémantique et la mise en place de classes génériques, aux noms obscurs, pour la mise en page les frustre vraiment!
Construit le tien
Comme nous venons de le décrire clairement, certaines personnes aiment les frameworks CSS, beaucoup les détestent absolument. Cet article vise les codeurs situés quelque part entre les deux. Vous aimez les avantages que vous obtenez, tels que la mise en forme rapide de plusieurs colonnes, mais vous n'êtes pas convaincu que cela vaut vraiment la peine.
Cela est particulièrement vrai pour ceux qui construisent une page Web assez simple. Bien sûr, il serait bien d’avoir de l’aide pour la mise en page, mais importer un cadre complet pour une seule page revient à apporter une pelle rétrocaveuse pour planter un jeune arbre.
Pour ces types de projets, il peut être préférable d’abandonner complètement les cadres de réseau. Cependant, il peut encore nous incomber de mettre en place un système permettant de supprimer plusieurs colonnes à la volée.
L'objectif ici est de mettre en place un système réutilisable que vous pouvez implémenter pour réaliser des présentations complexes à plusieurs colonnes. Le système doit être concis et ne pas souffrir de code saturé. Il ne devrait pas nécessiter une longue liste de classes non sémantiques, dont beaucoup ne seront peut-être jamais utilisées. Il devrait également être flexible et plier à votre volonté avec chaque projet plutôt que de vous soutenir dans un coin. Si vous changez d'avis et que vous modifiez soudainement toute la largeur du site, notre grille devrait se rediffuser sans problème. Enfin, la mise en œuvre devrait être rapide et sans douleur.
Créer des colonnes en CSS
Si vous débutez dans la mise en page CSS, la construction d'une mise en page à plusieurs colonnes peut paraître un peu intimidante. Évidemment, sans effort, nous n'aurions pas autant de cadres qui cherchent à simplifier le processus!
Supposons que vous souhaitiez définir quatre colonnes. Vous devez d'abord prendre en compte votre largeur. Disons que vous avez un conteneur large de 900px. Si vous divisez 900px par quatre colonnes, vous obtenez 225px par colonne. Assez simple! Cependant, ces colonnes vont toutes se briser les unes contre les autres, nous avons besoin de marges. Malheureusement, les marges briseront notre mise en page et élargiront nos colonnes au-delà de la largeur du parent.
Nous devons ensuite déterminer la quantité totale de marge nécessaire pour les marges. Disons que nous voulons que les première, deuxième et troisième colonnes aient chacune un marge droite de trois pixels. Trois pixels fois trois colonnes équivaut à neuf pixels pour les marges. Maintenant, nous prenons simplement neuf de notre largeur (900 - 9 = 891), puis nous divisons par quatre colonnes pour obtenir 222.75 pixels pour chacune des quatre colonnes.
Hein?
Cela impliquait évidemment un peu de calcul de notre part. Ce n’est pas exactement un travail de niveau universitaire, mais ce n’est pas amusant de faire cela à chaque fois que nous avons besoin de quelques colonnes (les calculs sont aussi très laids). De plus, dès que nous modifions la largeur totale de notre conteneur, tout cela se brise et nous devons recommencer!
Alors, comment pouvons-nous faire en sorte que lorsque le parent change, les enfants suivent?
Utilisez des pourcentages à la place
Les valeurs de pixel sont spécifiques à la casse et trop précises pour être utilisées sur quelque chose que nous voulons être recyclable. Si nous substituons des pourcentages, nos calculs deviennent plus faciles et notre grille sera suffisamment intelligente pour s'adapter à un conteneur parent changeant. Essentiellement, nous allons construire une grille de fluide.
Créer une calculatrice de grille
Si nous voulons une mise en œuvre rapide, nous ne pouvons pas penser à tous ces calculs compliqués à chaque fois! Au lieu de lire tous ces chiffres dans nos têtes, mettons en place un outil pour effectuer tout le travail à notre place. C'est assez simple avec un outil appelé Instacalc.
Instacalc est à peu près une calculatrice sophistiquée avec quelques fonctionnalités mineures de tableur. Ce que nous obtenons ici est la possibilité de configurer des formules réutilisables pour comprendre notre système de colonnes. Vous ne devez le faire qu'une fois l'esprit occupé, une fois que nous l'avons configuré pour la première fois, vous pouvez enregistrer la calculatrice et revenir chaque fois que vous en avez besoin!
Voici la configuration que j'ai utilisée. Le premier champ nécessite de saisir le nombre de colonnes et le second demande une valeur de marge (celle-ci sera exprimée en pourcentage). Le reste est automatisé pour vous donner les résultats dont vous avez besoin.Le troisième champ indique votre marge totale et le quatrième vous indique la largeur de colonne dont vous avez besoin.
Si vous ne voulez pas mettre cela en place, ne vous inquiétez pas! Utilise juste le mien. Avec cela en place, nous pouvons facilement calculer les largeurs nécessaires pour la disposition à quatre colonnes que nous avons essayée ci-dessus.
Maintenant, si nous voulons passer à une disposition en trois colonnes, il suffit de taper? 3? dans le premier champ de notre calculatrice. Le reste est pris en charge pour nous. Cela supprime tout le travail de définition des dispositions multi-colonnes. Il vous suffit de saisir un nombre pour vos colonnes et un nombre pour votre marge et vous obtenez tout ce dont vous avez besoin. Il arrive parfois que vous obteniez des chiffres peu précis, mais honnêtement, j’ai constaté qu’il n’y avait aucun problème à régler la largeur de vos colonnes à 30,667%.
Construit le!
Assez de théorie, construisons cette ventouse. Tout ce qui précède ressemble à une tonne de travail, mais honnêtement, c’est beaucoup plus de travail pour l’expliquer que pour le construire!
Disons que nous voulons quatre colonnes de texte expliquant quatre fonctionnalités sur notre site Web. Le code HTML pour cela est assez facile, il suffit de créer un wrapper pour la section dans son ensemble et un div pour chaque colonne. J'ai aussi lancé un? Dernier? classe sur la dernière colonne pour nous aider à effacer la marge.
Maintenant pour le CSS. Tout d'abord, nous définissons une largeur sur l'emballage et définissons la débordement à caché. Ensuite, nous appelons simplement la classe de fonctions avec les calculs que notre calculatrice a crachés. Il est important de noter une fois de plus que, puisque cette calculatrice est déjà configurée, nous n’avons pas à exécuter un seul calcul dans notre tête. Il suffit de taper les valeurs et de saisir ce que la calculatrice nous donne.
Vous voyez comme c'est peu de code? À la place d'un cadre gigantesque, nous avons quelques déclarations simples que tout le monde peut lire. Le résultat est une belle mise en page à quatre colonnes qui s’adapte parfaitement à tous les scénarios.
À partir de là, nous pouvons modifier notre largeur en tout ce que nous voulons et la grille se corrigera d'elle-même. Voulez-vous passer à 960px large? Changez simplement la largeur de l'emballage.
Si vous voulez une belle grille de fluide, changez la largeur de l'emballage en pourcentage. Maintenant que vous ajustez la taille du navigateur, vos colonnes s’ajusteront automatiquement.
Combinaison de colonnes
Les plus malins d'entre vous disent déjà "pas si vite". Le problème que nous avons rencontré ici est que nos colonnes doivent toutes avoir la même largeur. Par exemple, si nous voulons combiner les deux dernières colonnes de notre présentation en une colonne large?
Tout ce que nous avons à faire pour cela est d’établir une formule dans Instacalc qui combine deux colonnes et enlève la marge de l’une d’elles. Comme le reste, c’est une chose que vous pouvez utiliser encore et encore. Ici, j'ai fait une formule pour combiner deux colonnes et une pour en combiner trois.
Le code
Le code HTML utilisé est identique à celui de la dernière fois. Nous avons seulement trois colonnes au lieu de quatre.
Une fois encore, nous introduisons simplement les chiffres de notre calculatrice et nous obtenons une belle partie concise de CSS qui permet de réaliser exactement ce dont nous avons besoin.
Voici la disposition résultante avec la dernière colonne deux fois plus large que les deux premières. En utilisant cette méthode, vous pouvez découper une combinaison infinie de largeurs différentes que vous pouvez appliquer à toutes les sections de votre site.
Joue avec
Je vous encourage définitivement à entrer dans ce code et à vous salir les mains. JSFiddle a créé une aire de jeu pour que vous puissiez voir ces exemples en direct et les éditer à votre guise.
Cliquez ici pour lancer la démo
Conclusion
Nous avions plusieurs objectifs lorsque nous avons démarré ce projet. Nous avons entrepris de construire un système de grille de base suffisamment souple pour être implémenté dans un conteneur de n'importe quelle largeur, même si ce conteneur change de taille. Le code CSS devait être extrêmement bref et permettre la dénomination des classes sémantiques. Enfin, la mise en œuvre devait être rapide.
Bien que ce soit un peu compliqué à comprendre, notre système remplit tous ces objectifs. Vous direz peut-être qu'il y a trop de calculs pour dire que c'est facile, mais en vérité, je vous ai donné les formules et la calculatrice sauvegardée dont vous avez besoin. Le seul travail nécessaire de votre part est de saisir deux nombres à chaque fois que vous souhaitez créer une nouvelle mise en page!
Cet article n'est en aucun cas une recommandation selon laquelle vous devez toujours utiliser ce système pour créer des présentations multi-colonnes. C'est simplement une tentative pour vous montrer que vous ne devez pas dépendre du cadre compliqué et gonflé de quelqu'un d'autre. Avec un peu de configuration et d’ingéniosité, il est possible d’obtenir une mise en page multi-colonnes à la demande, avec très peu d’effort!