Share
Ce tutoriel vise à vous familiariser avec Neat; un framework de grille sémantique construit pour Sass et Bourbon.
Bourbon Neat garde votre balisage propre, vous évitant ainsi de le brouiller avec les classes grid, column et row. Au lieu de cela, il tire parti des mixins et, en appliquant ses divers mixins à votre balise existante, vous pouvez créer des présentations souples et réactives. Explorons les mixins les plus essentiels:
Remarque: Pour installer et commencer à utiliser Bourbon Neat, jetez un coup d’œil au didacticiel précédent Bourbon Neat: Grilles sémantiques, non expliquées, réactives.
Ce mixin sert à déterminer le conteneur ou le wrapper de votre mise en page. Appliquez ceci à un élément et Neat le centrera automatiquement dans la fenêtre (en ajoutant marge gauche: auto / marge droite: auto), effacez les flotteurs et appliquez les $ max-width. Il s'agit d'un mixin facultatif (recommandé cependant) et vous pouvez avoir plusieurs éléments de conteneur externes sur une seule page. La seule chose que vous ne pouvez pas faire est de les imbriquer.
Le conteneur externe contient votre grille. En son sein, votre grille peut couvrir autant de colonnes que spécifié dans votre paramètres de la grille fichier via le $ grille-colonnes variable (dont la valeur par défaut est 12 colonnes). Tous les éléments d'une ligne doivent correspondre au nombre total de colonnes spécifiées dans cette variable..
Dans l'exemple ci-dessous, vous verrez que le récipient élément enveloppe un couple de de côté et article Mots clés. Ils s'étendent sur 3 et 9 colonnes respectivement et ajoutent jusqu'à 12 colonnes comme spécifié dans mes paramètres. Si je devais dépasser ce nombre de colonnes, la mise en page se briserait certainement. Pensez au conteneur extérieur mélanger comme condition préalable la plus probable pour l'ajout de dispositions de grille cohérentes dans les éléments de conteneur.
Haml:
"html .container% apart En marge: 3 colonnes% article Article: 9 colonnes
% aparté apartement: 3 colonnes% article article: 9 colonnes
% apart En retrait: 3 colonnes% article Article: 9 colonnes "
Toupet:
"css body 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) background-color: # 81d4fa
article + span-columns (9) + couleur de fond oméga: # e64a19 "
Les couleurs d'arrière-plan de cet exemple permettent de voir plus facilement comment les morceaux s'emboîtent. Et ne vous préoccupez pas du oméga mixin à ce stade; tout sera révélé en temps voulu.
Dans ton _grid-settings Sass partiel, vous pouvez également spécifier un $ max-width Sass variable qui définit la largeur maximale que doit couvrir le contenu de votre page. Par exemple, Neat est livré avec un $ max-width réglage de 1088px (converti en em) hors de la boîte.
Il est également possible de fournir à ce mixin un argument en faveur d’une $ local-max-width si vous voulez qu'un certain élément de conteneur ait un autre largeur maximale que celui défini globalement dans paramètres de la grille. Ici, vous pouvez fournir pixel, em ou pourcentage arguments. Les colonnes de votre grille à l'intérieur de ce conteneur ajustent automatiquement leur largeur, mais le nombre de colonnes reste le même..
Toupet:
css .container + outer-container (800px) couleur de fond: # f5f5f5 ou
Conteneur .ss + conteneur externe (80%) background-color: # f5f5f5
Si vous débutez dans la conception avec des grilles, vous devriez peut-être vous intéresser aux excellents principes de Ordering Disorder: Grid Principles for Web Design de Khoi Vinh. Je le recommande fortement. Un concept que vous devez comprendre tout de suite est que vous construisez vos conceptions de grille à travers une série de colonnes couvrant toute la page..
L'utilisation de base de ceci est très simple avec Neat. Vous choisissez un élément et lui dites le nombre de colonnes qu’il doit recouvrir dans le nombre total de $ grille-colonnes. Permettez-moi de démontrer les bases.
Haml:
"html .container% apart.first Premier: 2 colonnes% article.second Deuxième: 10 colonnes
% à part.troisième tiers: 4 colonnes% article.fourvième quatrième: 8 colonnes
% aparté. cinquième: 6 colonnes% article.sixième: six colonnes
Septième septième: 8 colonnes% article.huitième: quatre colonnes
neuvième neuvième: 10 colonnes% article. dixième: 2 colonnes "
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
article background-color: # e64a19
côté couleur de fond: # 81d4fa
.premier + span-colonnes (2). troisième + span-colonnes (4) .fifth + span-colonnes (6). seventh + span-colonnes (8). neuvième + span-colonnes (10)
.seconde + span-colonnes (10). quatrième-span-colonnes (8) .sixth + span-colonnes (6). huitième + span-colonnes (4). dixième + span-colonnes (2)
.deuxième, quatrième, sixième, huitième + oméga "
Comme vous pouvez le constater, chaque rangée consiste en un bleu de côté à gauche et un rouge article élément à droite. La mise en page ne se casse pas, car dans l'élément conteneur externe, leur nombre total de colonnes et leur largeur totalisent 12 (comme défini dans $ grille-colonnes) uniformément.
La partie la plus intéressante est qu’il n’est pas nécessaire d’ajouter d’informations de style à votre balisage. Celles-ci étant liées à votre couche de présentation, vous définissez uniquement la composition de votre grille dans vos fichiers Sass. Des préoccupations bien séparées. Chaque concepteur sensé qui touche votre travail après vous aimera pour ne pas polluer le contenu avec des informations de style.
Un bonus supplémentaire est que vous pouvez nommer les classes dans votre balisage quand vous le souhaitez. Personne ne prend ces décisions pour vous, ce qui est une bénédiction sans aucun déguisement.
De temps en temps, il peut être utile d’implémenter rapidement des éléments de grille dans un autre.
Toupet:
css .some-parent-element + span-colonnes (10) .some-nested-element + span-colonnes (5 sur 10)
Supposons que vous ayez un élément large couvrant 10 colonnes et que vous deviez incorporer deux éléments plus petits couvrant chacun 5 colonnes. Dans ce cas, indiquez aux éléments imbriqués la taille de la colonne parente comme argument de la colonnes span mixin. Regardons un exemple plus concret.
Haml:
html .container% apart.first First: 2 colonnes% article.second% article.third Troisième: 5 colonnes imbriquées% article.fourth Quatrième: 5 colonnes imbriquées
Toupet:
"css couleur de la carrosserie: blanc couleur de fond: blanc
.conteneur + outer-container background-color: # f5f5f5 remplissage: en haut: 15px en bas: 15px
côté, rembourrage de l'article: 10px margin-bottom: 20px hauteur: 100px
article background-color: # e64a19
côté couleur de fond: # 81d4fa
.premier, seconde hauteur: 250 pixels
.deuxième + span-colonnes (10)
.troisième, .fourth + span-columns (5 sur 10) background-color: darken (# e64a19, 6) margin-top: 25px
.premier + span-colonnes (2) padding-top: 25px "
Un autre concept important pour les débutants jouant avec les grilles est la gouttière. Cette marge à droite, entre les éléments de la grille, est automatiquement créée pour chaque élément de la grille d'un conteneur, à l'exception du dernier! Les gouttières évoluent également en mode réactif si vous redimensionnez la fenêtre du navigateur. L'exemple ci-dessous illustre cet espace entre les éléments de la grille. La gouttière est indiquée par le fond de couleur grise qui sort du récipient extérieur.
Haml:
html .container .premier 1 col .seconde 2 col. troisièmes 3 col. fersth. 3 col. fifth 2 col .sixth 1 col.
Toupet:
"css couleur de la carrosserie: blanc couleur de fond: blanc
.couleur de fond du conteneur + du conteneur externe: # f5f5f5
.premier, deuxième, troisième, quatrième, cinquième, sixième, couleur de fond: # 81d4fa remplissage: 10px hauteur: 200px
.premières + span-colonnes (1)
.deuxième + span-colonnes (2)
.troisième + span-colonnes (3)
.quatrième + span-colonnes (3)
.cinquième + span-colonnes (2)
.sixième + span-colonnes (1) "
Facile comme bon, non? Mais devinez ce qui se passe si nous doublons les colonnes en dupliquant la ligne juste en dessous?
Oh cher. Alors que s'est-il passé ici? Comme le sixième élément de la première ligne n’est plus le dernier élément, il obtient également une gouttière droite (marge) par défaut. Permettez-moi d'être très clair sur ce point: pour obtenir une présentation parfaitement alignée, le dernier élément d'un conteneur a sa gouttière supprimée par défaut. En raison de la gouttière ajoutée au sixième élément, la largeur de tous les éléments de la première rangée dépasse désormais largeur totale votre nombre de total-colonnes peut s'étendre par ligne et vos ruptures de grille.
Rien de trop tragique cependant, et la solution est facile. Il suffit de trouver l’élément qui a besoin de cette gouttière à droite et d’appliquer le oméga mixin il. Terminé!
Haml:
"html .container .premier 1 colonne .secondes 2 colonnes. 3e tiers 3 colonnes. quatrième. 3 colonnes. cinquièmes 2 colonnes .sixième 1 colonnes
.premier 1 col. deuxième 2 col. troisième 3 col. fèth 3 col. fifth 2 col .sixth 1 col "
Toupet:
"css couleur de la carrosserie: blanc couleur de fond: blanc
.couleur de fond du conteneur + du conteneur externe: # f5f5f5
.premier, deuxième, troisième, quatrième, cinquième, sixième, couleur de fond: # 81d4fa remplissage: 10px hauteur: 200px
.premières + span-colonnes (1)
.deuxième + span-colonnes (2)
.troisième + span-colonnes (3)
.quatrième + span-colonnes (3)
.cinquième + span-colonnes (2)
.sixième + span-colonnes (1) + oméga "
Maintenant, chaque élément se met bien en place et aucune des rangées ne dépasse leur largeur totale.
Allons un peu plus loin. Supposons que vous avez quelques lignes qui doivent afficher des images de la même taille sans casser la grille. Tout ce dont nous avons besoin est quelques éléments qui couvrent la même largeur, ici colonnes span (2), et placez-les dans quelques rangées. La magie se produit avec l’argument que vous fournissez au oméga avec:
css img + oméga (6n) Ici, chaque sixième img élément aura sa gouttière droite supprimée et s'adapte donc uniformément six 2 colonnes éléments dans les 12 colonnes du conteneur extérieur. Soigné!
Haml:
"html .container% img% img% img% img% img% img
% img% img% img% img% img% img
% img% img% img% img% img% img
"
Toupet:
"css couleur de la carrosserie: blanc couleur de fond: blanc
.couleur de fond du conteneur + du conteneur externe: # f5f5f5
img + span-columns (2) + oméga (6n) hauteur: 200px marge-bas: 5px couleur de fond: # 81d4fa "
Vous voulez seulement quatre éléments par ligne? Aucun problème! Réduire les arguments pour oméga à 4n. Cette technique vous sera utile lors du prochain tutoriel lorsque nous aborderons les grilles réactives et comment vous pouvez modifier votre mise en page à l'aide de requêtes multimédia..
Toupet:
css img + oméga (4n)
Je vous encourage à jouer avec cet exemple via les stylos fournis et à vous en faire une idée. Il n’ya pas de magie ici, mais ne soyez pas surpris si vous avez besoin d’un peu plus de temps pour vous concentrer sur les détails. Dérangez un peu avec les arguments de l'oméga et je ne doute pas que cela deviendra clair pour vous en un rien de temps.
Derniers mots de sagesse: Dans certains cas, il semble que l’ordre dans lequel vous fournissez les colonnes span et oméga mixins aux éléments. Mon conseil est de toujours appliquer colonnes span d'abord pour éviter un comportement inattendu.
Ce mixin devrait être rapide. Si vous souhaitez ajuster un élément en le déplaçant horizontalement vers la gauche ou vers la droite, vous pouvez appliquer la décalage mixin et lui indiquer le nombre de colonnes à déplacer. Vous pouvez utiliser des nombres entiers ou des nombres à virgule flottante.
Toupet:
css .quelque-élément-qui-a-besoin-d'ajuster + shift (n)
Indiquez un nombre positif (sans unité) de colonnes pour déplacer l'élément vers la droite et inversement. En coulisse, Neat augmente ou diminue les valeurs en pourcentage de marge gauche sur l'élément.
Remarque: si tu utilises décalage sans argument, il sera par défaut à décalage (1).
Ce mixin a la même idée que décalage (il utilise changement de contexte sous le capot) mais est conçu pour les éléments de grille imbriqués. J'ai joué un peu avec cela dans un exemple factice avec des grilles imbriquées, mais en toute honnêteté, j'ai obtenu les mêmes résultats en utilisant décalage.
Je ne pense pas avoir besoin d'entrer dans les détails de la façon dont cela fonctionne. C’est une petite aide pour nettoyer vos feuilles de style et vous donner la largeur de gouttière par défaut si vous fournissez le mixin avec défaut comme argument. Rien d'extraordinaire, mais je pensais le mentionner pour compléter vos options d'ajustement de l'espacement de vos grilles..
Toupet:
css .some-element-that-needs-padding + pad (valeur par défaut 10px 20px 30px)
C'est tout ce que vous devez savoir pour commencer à jouer avec les grilles Neat. Ces exemples auraient dû vous fournir une base solide vous permettant de construire la grille dont vous avez besoin, quelle que soit votre complexité..
Le prochain tutoriel couvrira une autre série de mélanges Neat, et expliquera également comment utiliser les requêtes multimédia et les points d'arrêt pour ajuster vos grilles en fonction de la taille des fenêtres. On se voit là-bas!
Accentsconagua