Share
Maintenant que vous avez les bases à votre portée, dans ce deuxième tutoriel sur les mixins Neat, je vais aller un peu plus loin, en explorant d'autres mixins et en introduisant une fonction..
Nous allons regarder ce qui suit:
Au cours des deux dernières années, l'importance des conceptions flexibles qui répondent au paysage en constante évolution des tailles et des périphériques d'écran a été clairement mise en évidence. En ce sens, Bourbon Neat vous soutient, vous offrant une approche élégante pour gérer les requêtes multimédia de vos grilles. Grâce à l’utilisation de requêtes de médias intelligentes et ciblées, votre mise en page peut être adaptée à un large éventail de périphériques sans gâchis. Le design réactif est là pour rester et une utilisation responsable et durable des requêtes des médias est roi.
Quelque chose à éviter est ce que vous pourriez appeler interroger les spaghettis-un désordre enchevêtré de requêtes de médias qui devient rapidement difficile à entretenir. Garder les requêtes des médias gérables est d’une importance cruciale. Ce mélange n’est pas un antidote parfait, mais il encourage définitivement une approche DRY pour traiter les requêtes des médias de manière saine, en particulier lorsque jumelé à la nouveau point d'arrêt une fonction. Comment je vous entends demander?
Vous pouvez écrire des blocs de requête multimédia pouvant prendre des contextes de grille. Supposons que vous ayez deux éléments qui totalisent 12 colonnes, comme défini dans $ total-colonnes dans votre _grid-settings fichier. Ces éléments s'étendent sur 3 et 9 colonnes respectivement sur des écrans de la taille d'un bureau, ce qui permet des contenants extérieurs de 1088px de large. Pour les appareils plus petits ou les tailles de fenêtres, autorisez la médias [query] mixin sait à quelle taille le contexte de 12 colonnes doit être remplacé par un autre nombre et ajuste la taille des éléments sensibles dans ce nouveau contexte en conséquence. Boom!
Haml:
html .container% de côté 3 col / 1 col% article 9 col / 2 col
Toupet:
"css couleur de la carrosserie: blanc couleur de fond: blanc
.couleur de fond du conteneur + du conteneur externe: # f5f5f5
côté, rembourrage de l'article: 10px margin-bottom: 20px hauteur: 100px
côté + span-colonnes (3) couleur de fond: # 81d4fa + support (largeur max. 700px, 4) + span-colonnes (1)
article + span-columns (9) background-color: # e64a19 + support (largeur max. 700px, 4) + span-columns (2) "
Ici, j'ai fourni le médias mixin avec une fonctionnalité multimédia via largeur maximale 700px et un nouveau contexte de grille de 4 colonnes pour la $ total-colonnes largeur maximale de l'élément. Après avoir établi un nouveau contexte de grille pour les deux de côté et article éléments pour la taille de la fenêtre d'affichage 700px max, je devais seulement indiquer aux éléments le nombre de colonnes qu’ils pouvaient maintenant occuper dans le nouveau total de 4 colonnes. Personnellement, je pense que c'est sacrément lisible et facile à organiser. Il fait encore plus froid une fois que vous réutilisez contextes médiatiques (contexte de la requête multimédia / grille) via le nouveau point d'arrêt fonction et les enregistrer dans une variable Sass.
Remarque: Si vous fournissez ce mixin avec seulement une valeur en pixels, sans aucune fonctionnalité de média spécifique:
Toupet:
css .some-responsive-element + span-colonnes (8) + média (700px) + span-colonnes (4)
alors Neat utilisera $ default-feature lequel est largeur min. De plus, fournir un contexte de grille est optionnel et correspond par défaut à tout ce qui est défini via $ total-colonnes dans ton _grid-settings partiel.
Vous vous demandez probablement ce qui se passe avec l'approche DRY que j'ai mentionnée quelques paragraphes plus tôt, n'est-ce pas? C'est l'idée!
Cette fonction Sass personnalisée et pratique est le Robin de votre médias Batman, vous empêchant de vous répéter encore et encore. Si vous souhaitez améliorer la lisibilité et la réutilisation de vos requêtes multimédia, je ne vois pas pourquoi ce ne serait pas une raison pour laquelle vous n'utiliseriez pas cet acolyte pour combattre les crimes liés aux requêtes des médias..
Assez de l'analogie Batman. En termes simples, cette fonction ne fait que sauvegarder les contextes multimédia (contexte de requête / grille) via des variables et vous donner la possibilité de les réutiliser dans tous vos fichiers. médias mixins. C'est une sacrée extraction utile! Nous allons jeter un coup d'oeil.
Toupet:
"css $ tablet: nouveau-point d'arrêt (min-width 768px max-width 1024px 4)
.some-responsive-element + span-colonnes (3) + média ($ tablette) + span-colonnes (1)
.un-autre-élément-réactif + span-colonnes (9) + média ($ tablette) + span-colonnes (2) "
Super lisible! Pour être encore plus sûrs, nous sommes sur la même page: ici, vous fournissez toutes les fonctionnalités multimédias dont vous avez besoin (mais pas de virgules ni de points)., ou, et) plus le nombre de colonnes pour le nouveau contexte de grille, puis enregistrez-le dans une variable Sass. Il ne reste plus qu'à nourrir votre médias mixins avec la variable appropriée, et DRY ils sont.
J'espère que vous apprécierez la propreté de cette lecture et la facilité avec laquelle vous pouvez modifier vos dispositions pour différents points d'arrêt, le tout dans un emplacement central. Il est révolu le temps où la gestion de tonnes de requêtes médiatiques liées à la mise en page pouvait rapidement vous amener à une bagarre fantastique au poing avec votre ancien soi.
J'aimerais prendre un peu plus de temps pour explorer celui-ci. Si vous n'utilisez pas très souvent les tableaux dans vos conceptions (comme vous ne devriez probablement pas le faire depuis que nous avons embrassé l'époque de l'utilisation des tableaux à des fins de mise en page), celui-ci peut être difficile à sauter immédiatement..
Vous avez deux options principales pour utiliser ce mixin: avec l'argument table ou sans pour autant aucun argument.
Toupet:
css .some-row-element + row
Lors de l'utilisation rangée sans le table argument, un clearfix est ajouté et $ display reste paramétré par défaut, ce qui est bloc. Effectivement, cela signifie que tout ce qui vient après l'élément désigné utilisant rangée doit commencer sa propre chose sur une «rangée» séparée.
Toupet:
css .some-table-row-element + row (table)
D'autre part, en utilisant rangée (table), vous l'avez deviné, fait de cette ligne une partie d'un tableau. Ce qui se passe sous le capot, entre autres choses, c’est que ce mixin affichage: table et disposition de la table: fixe.
Il existe une option supplémentaire que vous pouvez fournir à ce mixin. Vous pouvez passer un argument ($ direction avec LTR ou RTL) qui change la direction de votre mise en page pour cette ligne particulière.
Toupet:
css .some-row-element + row ($ direction: RTL)
Mais commençons par le début. L'exemple factice suivant a 16 .rangée conteneur qui utilise le rangée mixin. Voyons ce qui se passe si vous quittez le table argument.
Haml:
"conteneur HTML
.rangée% img% img% img% img
% img% img% img% img
% img% img% img% img
% img% img% img% img "
Toupet:
"css .container + background-color-container: # f5f5f5
.rangée + rangée
img + span-columns (1) height: 60px margin-bottom: 5px background-color: # e64a19 "
Comme vous pouvez le constater, le navigateur traite les quatre premiers .rangée les conteneurs ne sont pas liés à une rangée particulière et flottent simplement vers le bas tant qu'ils ont de la place.
Deux .rangée les conteneurs donnent le même tour, empilés les uns sur les autres.
Haml:
"conteneur HTML
.rangée% img% img% img% img
.rangée% img% img% img% img
% img% img% img% img
% img% img% img% img "
Pas trop compliqué je suppose. Bien que je ne sois pas sûr de l’utilité de cela, car, instinctivement, je préférerais utiliser le oméga mixin pour une telle occasion. Ce qui semble assez inutile, cependant, utilise rangée (table) ici. Vous auriez juste une très longue colonne qui empile les 16 éléments les uns sur les autres. Je vous épargne la capture d'écran méchant, mais consultez l'exemple de codepen si vous êtes curieux.
Jusqu'ici, je vous ai montré les mécanismes de base de ce mixin, surtout si vous êtes novice dans le jeu. Nous approchons maintenant du territoire utile. Jouons avec une table réelle.
Si vous n'avez pas encore berné les tables, je vous recommande d'activer Google avant de poursuivre. Vous trouverez ci-dessous un petit guide de survie pour ceux qui ont besoin de rafraîchir quelques termes..
Ici nous avons un table élément. Il comprend un la tête balise, qui a une ligne pour afficher les différents en-têtes de colonne via le th Mots clés. En dessous, vous trouverez le tbody qui contient les données réelles pour chaque ligne du tableau (tr) via le td Mots clés.
Haml:
"conteneur HTML
%table
% thead% tr% e nom d'utilisateur% e utilisateur_ID% e Pizza préférée% e animal% e nom d'animal% e jeu préféré% tbody% tr% td Joe% td 112233% td Pepperoni% td Cat% td Gordon% td Splinter Cell% tr % td Jane% td 223311% td Champignons% td Chien% td Fluffy% td Engins en métal Solide V% tr% td Bob% td 331122% td Poisson% td Sharky% td Peu Big Planet 2 "
Toupet:
"css couleur de la carrosserie: blanc couleur de fond: blanc
.couleur de fond du conteneur + conteneur externe: assombrir (# f5f5f5, 50%)
tr + row () text-align: center
ème rembourrage: en haut: 10px en bas: 20px
td height: 50px background: # 81d4fa padding-top: 2px "Il en résulte un blob de table inégal et désagréable, qui ne couvre que le contenu de ces cellules de données de table. Évidemment, ce n'est pas très utile et cela peut être pénible si vous souhaitez le faire manuellement résoudre ce problème en utilisant un tas de règles CSS pour ranger les choses.
Il devrait y avoir une solution simple à ce droit? Ajouter table comme argument et affichage: table et disposition de la table: fixe viens à la rescousse! Sans oublier un peu de garniture de parent de remplissage sous la capuche.
Toupet:
css tr + ligne (table) text-align: center
Remarque: Une telle disposition de table fixe présente l'avantage non seulement de disposer la table plus rapidement, mais que la largeur des colonnes ne dépend pas du contenu des cellules du tableau. Vous obtiendrez des rangées uniformément réparties sur la largeur du conteneur de la table. Supprimer une cellule de données de table (td) et vous verrez les autres éléments diviser l’espace de cette rangée de manière égale:
Fermons avec un exemple qui montre le comportement par défaut des tables sans pour autant en utilisant le rangée mixin du tout.
Toupet:
"css couleur de la carrosserie: blanc couleur de fond: blanc
.couleur de fond du conteneur + conteneur externe: assombrir (# f5f5f5, 50%)
tr text-align: center
ème rembourrage: en haut: 10px en bas: 20px
td height: 50px fond: # 81d4fa padding-top: 2px "
Comme vous pouvez le constater, les cellules sont espacées de manière égale, mais n’utilisez pas tout l’espace approprié qui leur est disponible. Ils s'orientent vers le contenu le plus long par colonne et ajustent leurs cellules pour s'aligner sur ces lignes..
Toutes mes excuses pour avoir été trop bavard à propos de rangée mais j'espère que cette section a rendu les maux de tête que vous pourriez avoir avec des tables et des rangées un peu moins indolores.
Neat propose désormais une solution simple si vous souhaitez qu'un élément remplisse rapidement son parent en couvrant le même nombre de colonnes. Vous n'avez pas à fournir d'arguments. Ce mixin n'a rien d'extraordinaire, mais peut s'avérer utile lorsque vous traitez avec des requêtes multimédia ou des tables..
Remarque: En utilisant colonnes span (12) au lieu de parent de remplissage enjamber toute la largeur d'un conteneur extérieur ne serait pas la bonne approche - cela ajouterait simplement des bagages inutiles.
Haml:
html .container% apart A part 3 colonnes | fill-parent% article Article 5 colonnes | parent de remplissage
Toupet:
"css couleur de la carrosserie: blanc couleur de fond: blanc
.conteneur + externe-conteneur margin-top: 10px background-color: # f5f5f5
côté, article en bas de la page: 5px hauteur: 200px
aparté + span-colonnes (3) + fill-parent background-color: # 81d4fa
article + span-columns (5) + fill-parent background-color: # e64a19 "
Gardez à l’esprit que les éléments utilisant parent de remplissage ignorer les autres éléments de la même ligne et viser à couvrir toute la largeur de leur parent sans tenir compte de leurs voisins. Je suppose que celui-ci est assez simple, passons à autre chose!
Chaque élément de votre grille Neat a un $ default-layout-direction qui est mis à LTR (de gauche à droite) dans paramètres / _grid.scss. Cela signifie que dans les coulisses Neat utilise toujours un direction-contexte avec de gauche à droite.
Sous le capot, ce mixage ne fait rien d’autre que changer le sens du flottement de l’élément appliqué. Quoi est Neat est que dans un contexte directionnel, disons de gauche à droite, vous pouvez rassembler un tas d’éléments de la grille et changer leur direction pour de droite à gauche-tout à la fois, sous un bloc de code. Encore une fois, cette solution rend les choses plus compactes et lisibles pour vous-même, ainsi que plus faciles à comprendre pour quelqu'un qui n'est pas si familier avec un certain projet..
Haml:
html .container% de côté 3 colonnes% article 9 colonnes
Toupet:
"css couleur de la carrosserie: blanc couleur de fond: blanc
.conteneur + externe-conteneur margin-top: 10px background-color: # f5f5f5
côté, article en bas de la page: 5px hauteur: 200px
+direction-contexte (de droite à gauche) apart + span-colonnes (3) background-color: # 81d4fa
article + span-columns (9) background-color: # e64a19 "
Voici cette même démo sans pour autant direction-contexte:
Voici un autre exemple. Rien de nouveau pour le moment, c’est juste que les colonnes sont de taille égale et découlent également de de droite à gauche.
Haml:
html .container% de côté 3 colonnes% article 3 colonnes
Toupet:
"css couleur de la carrosserie: blanc couleur de fond: blanc
.conteneur + externe-conteneur margin-top: 10px background-color: # f5f5f5
côté, article en bas de la page: 5px hauteur: 200px
+direction-contexte (de droite à gauche) apart + span-colonnes (3) background-color: # 81d4fa
article + span-columns (3) background-color: # e64a19 "
Le petit tweak suivant a juste un de ces trois éléments de colonne utiliser le mixin, et donc ils flottent aux côtés opposés du conteneur. Rien de trop magique, mais cela pourrait être pratique d'avoir dans votre sac à malice.
Toupet:
"css couleur de la carrosserie: blanc couleur de fond: blanc
.conteneur + externe-conteneur margin-top: 10px background-color: # f5f5f5
côté, article en bas de la page: 5px hauteur: 200px
côté + span-colonnes (3) background-color: # 81d4fa
+direction-contexte (de droite à gauche) article + span-colonnes (3) background-color: # e64a19 "
Cette dernière section du didacticiel couvre quelques mixines que je voulais mentionner par souci d’exhaustivité, mais que j’essaie personnellement d’éviter, car elles ne m’ont pas toujours donné les résultats escomptés. Si vous avez une meilleure expérience de leur utilisation, s'il vous plaît faites le moi savoir. En plus de cela, trois d'entre eux seront bientôt obsolètes:
Accentsconagua
réinitialiser l'affichagereset-layout-directioneffacer toutIl n'y a pas grand chose à dire sur celui-ci. Imaginez que vous changiez l’orientation de la mise en page pour une raison quelconque et que vous souhaitiez revenir au $ default-layout-direction (de gauche à droite)? Voilà, le contexte par défaut est restauré! Aucun argument nécessaire.
Toupet:
"css .row + row ($ direction: RTL)
.ligne reset-layout-direction "
Quand cela pourrait-il être utile? Bonne question! La documentation indique surtout lorsque vous devez changer de direction sur une seule ligne. Personnellement, je ne me dérangerais pas trop. Tout d’abord, il est censé être déconseillé en faveur d’un direction mixin, et ça m’a donné un mal de tête surprenant quand je voulais le faire fonctionner avec des requêtes de médias.
Pour créer un bloc de code qui modifie les propriétés d'affichage utilisées par mixins en lui-même, vous avez deux options que vous pouvez transmettre à ce mixin: bloc et table. Le premier est évident et table ajoute affichage: cellule de table pour vous. cellule de table oblige un élément à se comporter comme un td élément.
Toupet:
css + display-context (table) .some-cell + span-columns (2)
Disons que vous avez changé l'affichage actif en table comme dans l'exemple ci-dessus, réinitialiser l'affichage vous aide à revenir facilement à bloc. Cela ne prend aucun argument non plus. La documentation indique que c'est plus utile si elle est appliquée à des lignes uniques qui ont changé leurs valeurs d'affichage.
Toupet:
"css .row + row (table)
.row + reset-display "
Si vous voulez combiner réinitialiser l'affichage et reset-layout-direction en une fois, c'est ce que vous obtiendrez effacer tout-aucun argument requis. Disons que sur une ligne vous avez changé l'affichage pour table et le $ default-layout-direction à RTL et que vous voulez revenir.
Toupet:
"css .row + row (table, RTL)
.row + reset-all "
Eh bien, c'était long. Merci d’avoir réussi et j’espère que vous avez trouvé le voyage intéressant sur le territoire de Neat mixin. Il reste encore une chose à discuter. à savoir toutes les variables que vous avez à votre disposition pour peaufiner le cadre à vos besoins. Le prochain tutoriel est plus court, mais termine notre couverture de Neat. On se voit là-bas!
