Dans le passé, nous avons examiné plusieurs systèmes de grille CSS. Nous avons également expliqué comment LESS.js peut ajouter beaucoup de flexibilité à la manière dont vous stylisez les pages Web. Aujourd'hui, nous allons combiner ces deux idées et créer un système de grille utilisant LESS.
Continuez à lire pour voir pourquoi sur Terre nous ferions une telle chose Si vous comprenez le concept, vous pouvez également ignorer le tutoriel et aller directement au téléchargement. Commençons.
Démo et téléchargement
N'hésitez pas à télécharger les fichiers et à les modifier / utiliser comme vous le souhaitez. Rappelez-vous simplement de compiler votre fichier LESS dans un fichier CSS avant d’utiliser réellement la structure sur un site actif.
Voir l'exemple
Télécharger MOINS CSS Grid
Pourquoi MOINS?
Beaucoup d'entre vous se demandent sans doute pourquoi quelqu'un associerait un framework CSS à LESS. Ici, nous avons deux outils distincts et tout aussi déroutants que la moitié des développeurs détestent ou ne comprennent pas et je décide de les combiner pour créer un gâchis déroutant!? Cela éclairera sûrement une émeute.
Cependant, malgré le fait que beaucoup de développeurs n'utilisent jamais un tel outil, un système de grille piloté par LESS est tout à fait sensé. Actuellement, les systèmes de grille sont assez rigides. Vous avez généralement le choix entre deux téléchargements ou utilisez un générateur de grille en ligne pour modifier vos options. Cependant, une fois que vous avez téléchargé, il peut être très difficile d’améliorer le fonctionnement de la grille.
Comme LESS vous permet d’insérer des variables dans votre CSS, nous pouvons l’utiliser pour créer un cadre facilement personnalisable au cours de la phase de développement. L'objectif sera de créer quelque chose qui permette des largeurs de grille personnalisées avec très peu d'effort.
Le système de grille que nous allons construire aujourd'hui se concentrera sur deux variables observées dans tous les autres systèmes: la largeur de colonne et la largeur de gouttière. Conjointement, ces deux éléments constituent la base de l’apparence générale de la grille et constituent en fait une source principale de nombreux arguments. Si les développeurs ne peuvent pas décider de la largeur des colonnes et des gouttières, laissez-le libre à chaque développeur de décider en fonction de chaque projet.
Sur le plan pratique, cela signifie que vous pouvez utiliser le même système de grille pour 10 projets différents et obtenir 10 résultats très différents. Cela contribue grandement à alléger la structure rigide imposée à vos conceptions par un système de grille donné.
En fin de compte, nous devrions avoir un système qui permette au développeur de choisir une largeur de colonne et une largeur de gouttière personnalisées qui modifieront l'ensemble du flux de la présentation en ne modifiant que deux nombres dans notre code CSS.
Suis-je la première personne à tenter cela?
En toute honnêteté, je ne suis probablement pas la première personne à combiner LESS et un framework CSS. Toutefois, cela reste une excellente expérience d’apprentissage qui vous permettra de mieux comprendre le fonctionnement de ces deux outils.
Mise en route: la grille de 1 Ko
Plutôt que de construire le projet entier à partir de rien, j'ai décidé de rechercher un système de grille existant et de le modifier pour qu'il fonctionne avec LESS. Cela fonctionnera avec n’importe quel système, mais pour des raisons de simplicité, dans ce tutoriel, j’ai choisi la grille CSS de 1 Ko.
La raison pour laquelle j'ai choisi ce système est évidente: sa taille. 960 GS et Blueprint CSS sont très utiles, mais ils sont plutôt difficiles à manier et il faudrait beaucoup plus de temps pour intégrer MOINS dans. Avec la grille de 1Ko, nous pouvons facilement visualiser tous les CSS en un seul coup et comprendre pleinement les changements sans explication trop ardue.
En fait, voici l'intégralité du CSS de la grille de 1 Ko à une largeur de 960px avec 12 colonnes et une largeur de gouttière de 20px (10px de chaque côté).
C'est tout ce qu'on peut en dire! J'adore la simplicité des systèmes de grille plus petits sans tous les effets de framework supplémentaires tels que les réinitialisations CSS, les styles de texte, etc. Ceci fournit le point de départ idéal pour notre expérience MOINS.
Travailler avec MOINS
Si vous avez besoin d’une mise à jour LESS.js, consultez notre didacticiel récent. Vous devez avoir une compréhension de base de LESS et de la façon de travailler avec cela, mais pour ceux d'entre vous qui l'ont déjà vu au moins, je vais expliquer brièvement ce que vous devez savoir.
Utilisez .LESS not. CSS
Le fichier CSS que vous créez doit avoir une extension .LESS au lieu du fichier .CSS typique. N'oubliez pas de lier correctement ce fichier dans la partie principale de votre code HTML.
De plus, vous devrez insérer un lien vers le fichier JavaScript LESS. Pour simplifier les choses, copiez et collez les deux lignes ci-dessous:
Lorsque vous avez terminé, vous aurez envie de compiler votre fichier .LESS dans un fichier .CSS. Cela semble compliqué, mais c’est en fait un processus complètement automatisé utilisant Less.app.
Déclaration de variables
Dans LESS, les variables sont déclarées à l'aide de? @? symbole. Comme en JavaScript, vous pouvez effectuer des opérations mathématiques sur vos variables de plusieurs manières.
Vous pouvez ensuite insérer des variables n'importe où vous placeriez normalement la valeur qu'il contient.
Les maths
Avant de commencer à modifier la grille de 1 Ko, nous devons comprendre son fonctionnement. Dans notre version actuelle, il y a 12 colonnes, chacune avec une largeur de 60px et une gouttière de 10px sur les côtés gauche et droit.
C'est un peu déroutant, mais d'une manière ou d'une autre, tout cela doit atteindre un total de 960 pixels de large. Heureusement, il existe un outil en ligne génial et gratuit qui peut nous aider à comprendre tous les détails mathématiques: Instacalc.
Rencontrez Instacalc
Instacalc est une excellente calculatrice en ligne qui convient parfaitement aux programmeurs, non seulement en raison des résultats de mise à jour instantanée, mais également parce qu'elle vous permet d'utiliser des variables et de voir facilement si vos calculs fonctionnent comme vous le souhaitez.
Ci-dessous, j'ai utilisé Instacalc pour tracer les variables dont nous avons besoin dans notre fichier LESS en commençant par les nombres standard de 1 Ko. N'oubliez pas que nous souhaitons que l'ensemble du système repose sur deux valeurs, de sorte que la personnalisation ne prend qu'une seconde.
Même sous cette forme, le calcul peut être un peu déroutant, mais c'est en fait assez simple. Tout d'abord, nous réglons la largeur de nos colonnes sur 60 et la largeur de notre gouttière sur 10. Ensuite, nous additionnons simplement la largeur des douze colonnes plus la largeur de la gouttière (nous doublons la largeur de la gouttière car elle apparaît de chaque côté de chaque colonne). Comme vous pouvez le constater, nous arrivons finalement à 9 h 60, ce qui indique que tout a été bien fait.
Comme vous pouvez le voir dans l'image ci-dessous, nous pouvons maintenant changer les deux premières valeurs en tout ce que nous voulons, et le reste se met à jour automatiquement. Notre système à largeur variable est opérationnel!
Déclarer les variables
Maintenant que nous avons les variables et les calculs élaborés à un endroit où nous pouvons les voir fonctionner, il est temps de les brancher à notre CSS MOINS. Insérez l'extrait suivant en haut de votre fichier LESS.
Comme vous pouvez le constater, c’est exactement ce que nous avons fait avec Instacalc. Notre largeur de colonne a été définie sur 60px, notre gouttière est de 10px (ce qui donne une gouttière de 20px) et notre largeur totale est égale à la largeur des gouttières plus la largeur des colonnes.
Tout ce que nous aurons à faire chaque fois que nous voudrons changer de structure, est de taper de nouvelles valeurs pour les deux premières variables. Le reste du cadre sera mis à jour automatiquement en fonction de ce que nous ferons ensuite.
Création des classes de grille
L'étape suivante consiste à insérer les variables que nous venons de créer dans les classes constituant la grille de 1 Ko. Voici le code original:
Pour modifier cela, nous allons commencer simplement. La largeur de la classe grid_1 est simplement définie sur la variable columnWidth. La classe grid_2 est deux fois plus large et contient maintenant un espace supplémentaire pour la gouttière pour la nouvelle colonne. Ces quantités augmentent simplement à mesure que vous avancez: le multiplicateur de largeur de colonne augmente d'une unité à chaque fois et le multiplicateur de largeur de gouttière augmente de deux à chaque fois.
Maintenant, cela fonctionne tel quel, mais si vous voulez simplifier davantage les choses, vous pouvez utiliser un Mixin pour gérer tout ce code compliqué. Ceci est beaucoup plus propre à mon avis:
Finaliser le CSS
Pour terminer le CSS, nous devons insérer la variable de gouttière dans la section largeur et largeur de colonne et la variable totalWidth dans la classe row. N'oubliez pas que le but de l'exercice est de remplacer ces nombres statiques par des variables qui seront automatiquement mises à jour chaque fois que nous modifierons la largeur de la colonne et de la gouttière.
C'est tout! Nous avons complètement fini de décrire notre cadre.
Mettre tous ensemble
Maintenant que nous avons expliqué toutes les étapes, voici le fichier LESS terminé, tout en un:
Nous pouvons intégrer ce droit dans l'exemple de document HTML fourni avec la grille de 1 Ko pour voir si tout fonctionne correctement.
Aperçu
Si vous prévisualisez cela dans le navigateur, cela devrait fonctionner parfaitement.
Maintenant, essayez d'ajuster ces deux premières variables du code à tout ce que vous voulez et vérifiez le résultat. Par exemple, nous pouvons modifier la largeur de la colonne à 80 et la gouttière à 50 pour obtenir une zone de contenu plus large avec moins d’espace.
Conclusion
Et voilà, un système de grille flexible qui peut être modifié pour n’importe quelle largeur et taille de gouttière en ne remplaçant que deux valeurs. Cela ne fait qu'effleurer la surface du potentiel. Vous pouvez appliquer ces mêmes principes à tous vos frameworks préférés.
Laissez un commentaire ci-dessous et dites-nous comment vous souhaitez changer et améliorer la grille LESS CSS. Veillez également à nous faire savoir si vous développez le concept et faites quelque chose de cool avec lui!