@mixin - Grille Bootstrap

Dans le cadre de cet exercice, nous allons lever le voile sur l’usage que fait Bootstrap de SCSS afin de générer sa fameuse grille ayant fait sa renommée mondiale.

Aperçu du résultat 👇

Matériel Pen de départ

Couleurs 🎨

Rose alpha	rgba(235,225,223,0.65)
Noir	#000000

Requis En CSS, faites en sorte que l'élément .container prennent toute la largeur jusqu'à un maximum de 540px et ajuster sa marge afin que celui-ci soit toujours centré horizontalement dans la page. Afin de mieux le voir, ajoutez-lui un fond rose alpha, une taille de texte de 20px et une bordure noire de 2px. Toujours en CSS, créez 3 média queries faisant en sorte qu'à partir de 768px l'élément .container aille une largeur maximale de 720px, à partir de 992px = 960px et finalement 1200px = 1140px. Utilisez le nesting SCSS afin d'ajouter les styles suivants aux éléments avec la classe .row enfants de .container. Ces éléments doivent être en flex et permettre aux éléments à l'intérieur de lui de s'afficher sur plusieurs lignes. Créez-vous une mixin SCSS dont l'utilitée sera de gérer les colonnes de notre grille. Par défaut, cette mixin devrait attribuer une largeur de 100% à son élément ainsi qu'une bordure noire de 2px. Afin de le tester, créez la classe .col-12 et appelez votre nouvelle mixin à l'intérieur de celui-ci.

Vous devriez alors voir la phrase "Petit love à tous les students qui font pas d'erreurs" s'afficher dans un encadré. Rendons la mixin plus polyvalente! Pour ce faire, elle doit accepter un argument (paramètre) correspondant au nombre de colonnes désirées comme largeur.

Par exemple, l'élément .col-12 devrait passer le chiffre 12 en argument. Donnez une valeur de 1 par défaut à l'argument au cas ou la mixin serait appelée sans qu'il soit spécifié. Plutôt que de donner une largeur de 100%, prenez le nombre de colonnes passé en argument et divisez le par 12 (nombre total de colonnes dans une grille Bootstrap). Multipliez le ensuite par 100%. Votre colonne encadrée devrait maintenant avoir une largeur de 1 douzième, car aucun argument ne lui est actuellement passé. Corriger le tout en lui passant le nombre 12. Créez une boucle allant de 1 à 12. Faites en sorte de créer les classes .col-1, .col-2, .col-3 … jusqu'à .col-12 et appelez votre mixin gérant les colonnes de votre grille avec le nombre correspondant à l'index de la boucle comme paramètre.

Vos colonnes devraient maintenant ressembler à celles de Bootstrap. Vous pouvez en profiter pour effacer votre code .col-12 se trouvant à l'extérieur de votre boucle. Créez une variable qui correspondra à l'espace désiré entre chaque colonne et donnez-lui une valeur de 30px. Dans votre mixin, faites en sorte qu'une marge intérieure horizontale correspondant à la moitié de votre variable soit ajoutée. Ainsi lorsque deux colonnes seront affichées une à côté de l'autre l'addition de leurs deux moitiés correspondra à l'espacement total désiré. Le dernier point permet au contenu des colonnes de mieux respirer. Cependant, cette marge intérieure fait en sorte que le contenu a été décalé à l'intérieur du .container. Ce subtil, mais important point, cause des enjeux de mise en page. Afin de contourner ce problème, Bootstrap est arrivé avec une solution astucieuse: mettre une marge horizontale négative à ses .row. Ajoutez donc une marge négative correspondant à une demi-largeur de votre variable à vos .row et remarquez comment votre contenu texte redevient aligné avec votre .container. Retirez la bordure noire de votre .container et voilà ✨ Vous avez recréé le coeur de la grille de Bootstrap! Notes de cours 📚 Flexbox avancé