Les structures de mise en forme CSS sont très utiles, mais elles peuvent être désordonnées. Vous devez toujours vous conformer au système de quelqu'un d'autre, que cela vous convienne ou non.
Aujourd’hui, nous allons abandonner cette notion et créer un cadre ultra-léger pouvant être implémenté n’importe où et de la manière que vous souhaitez réaliser des dispositions complexes à plusieurs colonnes en quelques secondes à plat. Vous construisez ce framework Frankenstein au fur et à mesure, de sorte qu'il n'y a aucune classe inutilisée et absolument aucun code gonflé Ai-je mentionné qu'il est également facile de le rendre réactif? Lisez la suite pour voir le monstre prendre vie.
MOINS pas moins
Pour éviter toute confusion, je dois dire dès le départ que nous utiliserons LESS, le langage CSS dynamique, qui n’a rien à voir avec le très mal nommé Less Framework (étaient-ils en essayant nous confondre?). Heureusement, le cadre Less a été repensé et renommé sans cadre.
À la recherche du système de présentation parfait
Comme tout lecteur fidèle de Design Shack le sait, j'aime les frameworks CSS. Je ne suis pas particulièrement fidèle à un cadre en particulier, et je n’utilise généralement aucun projet réel, j’aime simplement creuser pour voir comment ils fonctionnent. Je suis sans cesse fasciné par les moyens intelligents de manipuler le processus de mise en page basé sur CSS.
"Vous n'utilisez même pas la moitié du code dans un framework, mais vous le laissez de toute façon, juste pour être sûr de ne rien foirer."Au cours des deux ou trois dernières années, j'ai beaucoup réfléchi à ce que je voulais dans un système de présentation. Les réponses sont assez basiques, mais ce n’est pas une mince affaire. Premièrement, je veux quelque chose qui nécessite une très petite base de code. Des monticules et des monticules de classes laides non sémantiques et laides ne font pas grand chose pour moi. Une mise en page entièrement manuelle n’est souvent pas si difficile que je puisse justifier l’ajout de systèmes de mise en page gonflés que personne ne comprend.
Ensuite, je veux quelque chose qui soit facilement personnalisable au fur et à mesure de son implémentation. C'est la partie la plus délicate, car les frameworks CSS n'offrent généralement pas ce type de flexibilité. Au lieu de cela, vous obtenez un gros fichier et un ensemble de noms de classes avec lesquels vous êtes obligé de travailler. Personnaliser n’importe quelle partie peut prendre des heures de tri dans le code pour que votre modification ne casse rien. Il arrive souvent que vous n'utilisiez même pas la moitié du code dans un framework, mais que vous le laissiez de toute façon, juste pour être sûr de ne rien foirer.
Rouler vos propres grilles
Je me suis récemment rapproché du système de présentation de mes rêves dans mon article intitulé Faire rouler vos propres dispositions de grille à la volée sans cadre. Dans cet article, j'ai décrit un système super simple qui utilise un petit morceau de code:
L'utilisation de pourcentages pour la largeur et la marge nous permet de créer instantanément des présentations multi-colonnes avec zéro fluff. Il n'y a qu'un problème avec cette méthode: les maths. Pour une présentation donnée, vous devez déterminer manuellement le pourcentage de largeur de colonne et le pourcentage de marge à utiliser. Vous devez d'abord diviser la largeur du conteneur par le nombre de colonnes, puis multiplier la marge de colonne individuelle souhaitée par le nombre de colonnes moins une, soustraire ce nombre de la largeur totale, puis diviser à nouveau par le nombre total de colonnes. C'est en fait très simple en maths, mais cela ressemble à un cauchemar quand vous l'expliquez.
Dans l'article, j'ai fourni un outil simple vous permettant de calculer les valeurs dont vous avez besoin en ne tapant que deux nombres, mais j'ai toujours souhaité que cette fonction puisse être exécutée directement dans le code afin que vous puissiez simplement coller du code CSS. extrait qui calcule les calculs pour vous. Malheureusement, CSS n'est tout simplement pas si incroyable. Ou est-ce?
MOINS: CSS avec Superpowers
Une autre chose qui me fascine depuis un moment est MOINS. Cela donne vraiment à vos super-pouvoirs CSS tels que variables, mixins, opérations, etc. Avec la conversion récente en une bibliothèque JavaScript, LESS est plus facile que jamais à implémenter pendant un test (vous pouvez toujours utiliser LESS.app pour compiler le vrai CSS avant publication).
«Avec LESS Parametric Mixins, nous pouvons construire un système de présentation minuscule qui peut être modifié pour répondre à vos besoins lors de sa mise en œuvre.J'avais très envie d'insérer MOINS dans mon système de grille en libre-service, car je savais que cela me permettrait enfin de faire en sorte que CSS effectue les calculs pour nous. De plus, avec LESS Parametric Mixins, nous pouvons construire un système de disposition minuscule qui peut être modifié pour répondre à vos besoins lors de sa mise en œuvre.
Je me suis finalement assis et j'ai tout compris et je suis assez satisfait des résultats. Je vais donc vous montrer aujourd'hui comment construire votre propre schéma de mise en page simple mais extrêmement sophistiqué (et même réactif).
Avertissement: hautement expérimental
Le code avec lequel nous allons travailler est encore à l'état brut et frais. Ce n’est peut-être pas parfait à 100% et il n’a certainement pas été suffisamment testé pour pouvoir miser sur votre salaire. Cet article sert de preuve de concept pour une idée intéressante et non comme une suggestion que vous devriez soudainement commencer à utiliser ce système dans votre travail quotidien. Cela étant dit, c'est très amusant, donc vous voudrez certainement l'essayer.
Notez que la lecture de mon article précédent sur Rolling Your Own Grids aidera énormément à la compréhension de cet article. En outre, vous aurez besoin d'une compréhension fondamentale de LESS car je n'aurai pas le temps de l'enseigner ici.
Rencontrez Frankenstein
Plutôt que de construire ceci pièce par pièce, allons droit au but et examinons le produit fini, n'est-ce pas? Voici le système complet de mise en page alimenté par MOINS que j'ai conçu. On dirait un monstre mais ne craignez rien, c’est plutôt sympathique.
Que diable?
Ceux qui ne sont pas familiers avec LESS devraient être assez confus à ce stade. Ils ressemblent à des classes, mais ils contiennent du code vraiment étrange. C'est parce qu'ils ne sont pas du tout des classes, mais MOINS des mixins paramétriques.
J'ai conçu chacun de ces éléments pour qu'ils fonctionnent comme une fonction. Vous les implémentez de la même manière que vous implémenteriez une fonction JavaScript, en transmettant des valeurs personnalisées en cours de route. Je vais expliquer brièvement comment chacun fonctionne.
setColumnWidth
Comme je l'ai mentionné ci-dessus, la configuration manuelle des dispositions basées sur des colonnes est lourde en maths. Cette fonction automatise cette tâche directement dans votre CSS. C'est un morceau de code assez génial qui simplifie la création de colonnes équidistantes.
La ligne du haut contient les deux valeurs que vous pouvez transmettre définies ici avec des valeurs par défaut arbitraires: @columns, qui correspond au nombre de colonnes que vous souhaitez avoir, et @margin, qui représente l'espacement souhaité entre les colonnes. Lorsque vous implémentez cette fonction, vous ne tapez que ces deux chiffres. Il effectue automatiquement une série d’étapes mathématiques pour calculer et définir la largeur et la marge de la colonne.
L'implémentation de cette fonction ressemble à ceci:
Cela définit notre nombre de colonnes à quatre et notre marge de colonne à 4%. Est-ce facile? Si vous voulez l'utiliser à nouveau pour créer une ligne avec 3 colonnes et une marge de 5%, ajoutez ceci:
setBigColumnWidth
Il est agréable de prétendre que toutes les mises en page ont des colonnes de taille égale, mais ce n'est tout simplement pas le cas. En conséquence, nous aurons besoin d’un moyen de combiner des colonnes. Fondamentalement, cela fait la même chose que la dernière fonction, sauf que cela implique l'étape supplémentaire de déterminer la taille de colonne étendue et la marge résultante lorsque deux colonnes ou plus sont combinées.
Supposons que nous voulions une mise en page à deux colonnes, mais que l’une des colonnes ait la largeur de trois colonnes simples. Nous mettons simplement en place une disposition à quatre colonnes, puis ajoutons la valeur @combine de 3 afin que notre seule colonne puisse occuper l’espace de trois colonnes.
Mettre tous ensemble
Si tu es toujours avec moi, tant mieux. Si vous êtes perdu, cela devrait rendre les choses un peu plus claires. Configurons du HTML pour voir comment tout cela fonctionne.
Le code HTML pour une configuration à quatre colonnes
Pour mettre en œuvre ce système, vous pouvez baliser votre document comme vous le feriez normalement. J'ai mis en place une? Main? div et mettre quatre colonnes de placeholder à l'intérieur, chacune avec une classe spéciale. Comme ce système est très flexible et fonctionne comme vous le souhaitez, vous pouvez nommer vos classes et identifiants comme bon vous semble! Sémantique, non sémantique ou Ubbi Dubbi, à vous de choisir.
L’important est que chaque colonne reçoive une classe que vous puissiez cibler et que la première colonne reçoive un? Premier? classe afin que nous puissions effacer sa marge gauche. C’est un mal nécessaire, nous pourrions gérer cela sans balise en utilisant un pseudo sélecteur, mais la prise en charge du navigateur serait nulle, c’est donc probablement une meilleure solution.
Le CSS pour une configuration à quatre colonnes
Tout d'abord, nous devrons copier et coller la fonction .setColumnWidth et la fonction .setBigColumnWidth dans notre CSS. Ce sont 100% réutilisable et apparaissent seulement une fois que dans l'ensemble de notre CSS (ou plus précisément, notre moins).
Après cela, nous devons définir quelques styles de base pour notre ID principal. Puisque je veux illustrer comment ce cadre peut être réactif, je règle la largeur en pourcentage, ce qui créera des colonnes fluides (utilisez une largeur définie si vous ne voulez pas de colonnes fluides).
Maintenant vient la partie magique où nous avons mis en place une mise en page multicolonne si facilement que cela vous fera pleurer. Nous savons que notre contenu comporte quatre colonnes, je vais utiliser une marge de 4% et c'est tout le code dont nous avons besoin!
Cela nous donnera une mise en page parfaite, fluide, à quatre colonnes et cela ne prend que quelques lignes de code!
Ajout d'une autre ligne
Continuons et ajoutons une autre ligne à notre mise en page. Cette fois, nous allons insérer un pied de page avec deux colonnes, la première étant une grande colonne de la largeur de trois colonnes simples. Voici le code HTML (notez que si nous voulions utiliser des noms de classe génériques, nous pourrions recycler la classe à colonne unique créée précédemment).
Le CSS
La première chose que nous voulons faire dans notre CSS est de définir les styles génériques pour le pied de page. Ce sont les mêmes que dans la section principale afin que nous puissions simplement mettre à jour notre code comme ceci:
De même, nous pouvons simplement ajouter la classe footerColumn au code de la classe mainColumn (ou simplement utiliser un nom générique pour les deux).
Enfin, nous avons configuré notre classe pour combiner les trois premières colonnes.Nous utilisons toujours la disposition à quatre colonnes et une marge de 4%, mais nous utilisons une valeur @combine de trois pour fusionner la largeur des trois premières colonnes.
Avec cela, nous avons maintenant une deuxième ligne que nous avons pu personnaliser complètement à la volée, avec pratiquement aucun effort. Nous n'avions pas non plus à choisir parmi quarante-sept classes prédéfinies, nous avons juste créé notre propre classe!
Le rendre réactif
Comme la grille entière que nous avons configurée est fluide, elle répond déjà assez bien à différentes tailles de fenêtres. Malheureusement, le système de marge basé sur les pourcentages commence à produire des colonnes assez écrasées sur de petits écrans.
Il est très facile de résoudre ce problème avec une petite magie de requête multimédia. Vous pouvez modifier les styles à votre guise pour qu'ils s'adaptent au mieux aux différentes tailles d'écran (tous nos MOINS fonctionnent encore très bien). Voici un exemple rapide qui prend tout simplement dans une seule colonne pour une taille inférieure à 700 pixels.
Voyez-le en action
Maintenant que vous savez comment ça marche, il est temps de jeter un coup d'œil! Veuillez noter à nouveau que ceci est une idée en cours, donc si cela ne fonctionne pas dans quelque chose qui n'est pas Webkit ou Mozilla, je ne suis pas surpris.
Démo: Cliquez ici ou sur l'image ci-dessous pour lancer. Assurez-vous de redimensionner la page et de regarder la mise en page s'adapter aux changements.
Pourquoi est-ce lent?
J'ai volontairement téléchargé la version LESS afin que vous puissiez avoir un aperçu de ce qui se passe. Cependant, cette méthode est plutôt lente et ne sert qu’à des fins de test. En exécutant ceci dans LESS.app, nous obtenons une version compilée composée de CSS pur et démodé, ce qui donne une page beaucoup plus attrayante.
Démo: Cliquez ici pour voir la version CSS compilée.
Conclusion
Je ne suis probablement pas le premier à essayer d'utiliser LESS pour construire un cadre de présentation (bien que je n'en aie jamais vu un), mais j'ai néanmoins essayé de rester complètement original dans mon processus de réflexion ici et de construire quelque chose qui représente un nouveau façon de penser et d’utiliser des mises en page multi-colonnes en CSS.
Cela me semble compliqué par la longueur de ma longue explication, mais en réalité, il s’agit d’un système extrêmement simple qui ne nécessite que deux brefs mixins prédéfinis (que j’ai configurés davantage comme des fonctions) que vous pouvez copier et coller directement dans votre code. À partir de là, vous construisez votre page comme bon vous semble, en appelant un mixin chaque fois que vous en avez besoin et en insérant vos propres valeurs.
Laissez un commentaire et laissez-moi savoir ce que vous pensez de mon cadre Frankenstein. Pensez-vous que cela simplifie avec succès le processus de mise en page? Comment le changeriez-vous?