Share
Deze zelfstudie is bedoeld om u op weg te helpen met Neat; een semantisch rasterwerk gebouwd voor Sass en Bourbon.
Bourbon Neat houdt je markup schoon en voorkomt dat je het opdringt met raster-, kolom- en rijklassen. In plaats daarvan maakt het gebruik van mixins en door de verschillende mixins toe te passen op uw bestaande markup, kunt u flexibele, responsieve lay-outs maken. Laten we de meest essentiële mixins verkennen:
Notitie: Om te installeren en aan de slag te gaan met Bourbon Neat, bekijk de vorige tutorial Bourbon Neat: Semantic, Unopinionated, Responsive Grids.
Deze mixin is voor het bepalen van de container of wrapper van uw lay-out. Pas dit toe op een element en Neat zal het automatisch centreren in de viewport (door toe te voegen marge links: auto / marge-rechts: automatisch), verwijder de drijvers en pas de gespecificeerde toe $ Max-width. Het is een optionele mixin (hoewel aanbevolen) en u kunt meerdere buitenste containerelementen op één pagina plaatsen. Het enige wat je niet kunt doen is ze te nestelen.
De buitenste container houdt je raster vast. Daarbinnen kan uw raster zoveel kolommen overspannen als aangegeven in uw raster-settings bestand via de $ Rooster-kolommen variabele (die standaard 12 kolommen is). Alle elementen in een rij moeten optellen tot het totale aantal kolommen dat is opgegeven in deze variabele.
In het dummy-voorbeeld hieronder ziet u dat de houder element wikkelt een paar terzijde en artikel -tags. Ze beslaan respectievelijk 3 en 9 kolommen en voegen maximaal 12 kolommen toe zoals gespecificeerd in mijn instellingen. Als ik dat aantal kolommen zou overschrijden, zou de lay-out zeker breken. Denk aan de buitenste container mixin als de meest waarschijnlijke vereiste voor het toevoegen van consistente gridlay-outs binnen containerelementen.
Haml:
"html .container% terzijde opzij: 3 kolommen% artikel Artikel: 9 kolommen
% terzijde opzij: 3 kolommen% artikel Artikel: 9 kolommen
% terzijde opzij: 3 kolommen% artikel Artikel: 9 kolommen "
Sass:
"css body achtergrondkleur: wit
.container + achtergrondkleur buitenste container: # f5f5f5
opzij, artikel opvulling: 10px marge-bodem: 20px hoogte: 100px
opzij + span-kolommen (3) achtergrondkleur: # 81d4fa
article + span-columns (9) + omega achtergrondkleur: # e64a19 "
De achtergrondkleuren in dit voorbeeld maken het gemakkelijker om te zien hoe de stukken in elkaar passen. En maak je geen zorgen over de omega mixin op dit punt; alles zal te zijner tijd bekend worden gemaakt.
In uw _grid-settings Sass gedeeltelijke kunt u ook een opgeven $ Max-width Sass-variabele die de maximale breedte definieert die de inhoud van uw pagina moet beslaan. Neat komt bijvoorbeeld met een gemakkelijk te veranderen $ Max-width instelling van 1088px (geconverteerd naar em) uit de doos.
Er is ook de mogelijkheid om deze mixin te voorzien van een argument voor een $ Local-max-width als u wilt dat een bepaald containerelement een andere heeft Maximale wijdte dan die wereldwijd is ingesteld raster-settings. Hier kun je bieden pixel, em of percentage argumenten. De kolommen van uw raster in die container passen hun breedte automatisch aan, maar het aantal kolommen blijft hetzelfde.
Sass:
css .container + outer-container (800px) achtergrondkleur: # f5f5f5 of
css .container + outer-container (80%) achtergrondkleur: # f5f5f5
Als je net begint met ontwerpen met rasters, moet je misschien kijken naar de uitstekende ordeningsstoornis: Grid Principles for Web Design van Khoi Vinh. Ik raad het ten sterkste aan. Een concept dat u meteen moet begrijpen, is dat u uw rasterontwerpen opbouwt via een reeks kolommen die over de pagina lopen.
Het basisgebruik hiervan is supereenvoudig met Neat. U kiest een element en geeft aan hoeveel kolommen het moet overspannen binnen het totale aantal $ Rooster-kolommen. Laat me de basis laten zien.
Haml:
"html .container% aside.first First: 2 columns% article.second Second: 10 columns
% aside.third Third: 4 columns% article.fourth Fourth: 8 columns
% aside.fifth 5th: 6 columns% article.sixth Sixth: 6 columns
% aside.eventevent Zevende: 8 kolommen% article.eighth Achtste: 4 kolommen
% aside.ninth Ninth: 10 columns% article.tenth Tienh: 2 columns "
Sass:
"css lichaamskleur: witte achtergrondkleur: wit
.container + achtergrondkleur buitenste container: # f5f5f5
opzij, artikel opvulling: 10px marge-bodem: 20px hoogte: 100px
artikel achtergrondkleur: # e64a19
opzij achtergrondkleur: # 81d4fa
.eerste + bereikkolommen (2) .derde + bereikkolommen (4). vijfde + bereikkolommen (6) .eventk + bereikkolommen (8) .ninth + span-kolommen (10)
.tweede + span-kolommen (10). vier + span-kolommen (8) .sixth + span-kolommen (6) .eighth + span-kolommen (4) .tenth + span-kolommen (2)
.seconde, .vier, .sixth, .eighth + omega "
Zoals u kunt zien, bestaat elke rij uit één blauw terzijde aan de linkerkant en een rood artikel element aan de rechterkant. De lay-out breekt niet, omdat binnen het buitenste containerelement hun totale aantal kolommen en hun breedte optellen tot 12 (zoals gedefinieerd in $ Rooster-kolommen) gelijkmatig.
Het coolste is dat het niet nodig is om stylinginformatie aan je opmaak toe te voegen, omdat dit gerelateerd is aan je presentatielaag, je bepaalt alleen hoe je raster is samengesteld in je Sass-bestanden. Zorgvuldig gescheiden zorgen. Elke gezonde ontwerper die je werk raakt, zal van je houden omdat je de inhoud niet met stylinginformatie vervuilt.
Een toegevoegde bonus is dat je klassen naar eigen smaak kunt benoemen zoals je wilt of nodig hebt. Niemand neemt deze beslissingen voor u, wat een zegen is zonder enige vermomming.
Van tijd tot tijd kan het handig zijn om rasterelementen snel in een andere te nestelen.
Sass:
css .some-parent-element + span-columns (10) .some-geneste element + span-kolommen (5 van 10)
Stel dat u een breed element heeft dat zich uitstrekt over 10 kolommen en twee kleinere elementen moet bevatten die elk 5 kolommen omvatten. Geef in dit geval de geneste elementen de grootte van de bovenliggende kolom als argument voor de overspanning columns mixin. Laten we naar een concreter exemplaar kijken.
Haml:
html .container% aside.first Eerste: 2 kolommen% article.seconden% article.third Derde: 5 geneste kolommen% article.fourth Vierde: 5 geneste kolommen
Sass:
"css lichaamskleur: witte achtergrondkleur: wit
.container + achtergrondkleur buitenste verpakking: # f5f5f5 opvulling: boven: 15 px onder: 15 px
opzij, artikel opvulling: 10px marge-bodem: 20px hoogte: 100px
artikel achtergrondkleur: # e64a19
opzij achtergrondkleur: # 81d4fa
.eerste, .seconde hoogte: 250 px
.tweede + span-kolommen (10)
.derde, .vier + span-kolommen (5 of 10) achtergrondkleur: donkerder (# e64a19, 6) marge: 25px
.eerste + span-kolommen (2) padding-top: 25px "
Een ander belangrijk concept voor beginners die met rasters spelen, is de goot. Dit is de marge aan de rechterkant, tussen rasterelementen en wordt automatisch gemaakt voor elk rasterelement in een container, behalve de laatste! Goten schalen ook responsief als u het formaat van het browservenster aanpast. Het onderstaande voorbeeld toont deze ruimte tussen rasterelementen. De rugmarge wordt aangegeven door de grijs gekleurde achtergrond die door de buitenste container naar buiten komt.
Haml:
html .container .eerst 1 kol.seconde 2 col.third 3 col.fourth 3 col.fifth 2 col.sixth 1 col
Sass:
"css lichaamskleur: witte achtergrondkleur: wit
.container + achtergrondkleur buitenste container: # f5f5f5
.eerste, tweede, derde, vijfde, vijfde, achtergrondkleur: # 81d4fa opvulling: 10px hoogte: 200 px
.eerste + bereikkolommen (1)
.tweede + span-kolommen (2)
.derde + span-kolommen (3)
.vierde + span-kolommen (3)
.vijfde + span-kolommen (2)
.zesde + span-kolommen (1) "
Makkelijk puur toch? Maar raad eens wat er gebeurt als we de kolommen verdubbelen door de rij eronder te dupliceren?
Oh jee. Wat is hier gebeurd? Omdat het zesde element in de eerste rij niet langer het laatste element, het krijgt ook standaard een juiste goot (marge). Laat me hier heel duidelijk over zijn: om een netjes uitgelijnde lay-out te krijgen, is het laatste element in een container standaard uit de goot verwijderd. Vanwege de toegevoegde rugmarge op het zesde element overschrijdt de breedte van alle elementen in de eerste rij nu de totale breedte uw aantal totaal-kolommen kan overspannen per rij en uw raster breekt.
Niets is echter te tragisch en de oplossing is eenvoudig. Zoek gewoon het element dat die goot nodig heeft naar rechts en gebruik de omega mixin daar. Gedaan!
Haml:
"html.container .eerst 1 kleurseconde 2 seconden drie derde 3 kleuren. 3 kleuren .afmeting 2 kleurzixen 1 kleur
.eerste 1 kol.seconde 2 kol. drie 3 col.fourth 3 col.fifth 2 col.sixth 1 col "
Sass:
"css lichaamskleur: witte achtergrondkleur: wit
.container + achtergrondkleur buitenste container: # f5f5f5
.eerste, tweede, derde, vijfde, vijfde, achtergrondkleur: # 81d4fa opvulling: 10px hoogte: 200 px
.eerste + bereikkolommen (1)
.tweede + span-kolommen (2)
.derde + span-kolommen (3)
.vierde + span-kolommen (3)
.vijfde + span-kolommen (2)
.zesde + span-kolommen (1) + omega "
Nu valt elk element mooi op zijn plaats, en geen van de rijen overschrijdt het totale breedte.
Laten we deze een kleine stap verder zetten. Stel dat u een aantal rijen hebt die afbeeldingen van dezelfde grootte gelijkmatig moeten weergeven zonder het raster te verbreken. Alles wat we nodig hebben, is een paar elementen die hier dezelfde breedte beslaan overspanning kolommen (2), en plaats ze in een paar rijen. De magie gebeurt met het argument dat je aanlevert omega met:
css img + omega (6n) Hier, elke zesde img element heeft de juiste goot verwijderd en past daarom gelijkmatig op zes 2-kolom elementen in de 12 kolommen van de buitenste container. Netjes!
Haml:
"html .container% img% img% img% img% img% img
% img% img% img% img% img% img
% img% img% img% img% img% img
"
Sass:
"css lichaamskleur: witte achtergrondkleur: wit
.container + achtergrondkleur buitenste container: # f5f5f5
img + span-kolommen (2) + omega (6n) hoogte: 200px marge-onderkant: 5px achtergrondkleur: # 81d4fa "
U wilt slechts vier elementen per rij? Geen probleem! Verklein het argument voor omega naar 4n. Deze techniek komt goed van pas in de volgende tutorial wanneer we reageren op responsieve rasters en hoe je je lay-out kunt veranderen door middel van mediaquery's.
Sass:
css img + omega (4n)
Ik moedig je aan om met dit voorbeeld te spelen met de meegeleverde pennen en een gevoel te krijgen. Hier is geen magie, maar wees niet verbaasd als je wat meer tijd nodig hebt om je hoofd rond de details te wikkelen. Knoei een beetje met de argumenten van de omega en ik twijfel er niet aan dat het je snel duidelijk zal worden.
Laatste woorden van wijsheid: in sommige gevallen lijkt het ertoe uit te maken in welke volgorde u de overspanning columns en omega mengt zich met de elementen. Mijn advies is om altijd van toepassing te zijn overspanning columns eerst om onverwacht gedrag te voorkomen.
Deze mix moet snel zijn. Als u een element wilt aanpassen door het horizontaal naar links of rechts te verplaatsen, kunt u het toepassen verschuiving mixin en geef het het aantal kolommen dat het moet verplaatsen. U kunt gehele getallen of drijvende-kommagetallen gebruiken.
Sass:
css .sommige-element dat wil aanpassen + shift (n)
Geef een positief getal (zonder eenheden) van kolommen om het element naar rechts te verplaatsen en omgekeerd. Achter de schermen verhoogt of verlaagt Neat de percentagewaarden van -Marge op het element.
Notitie: als je gebruikt verschuiving zonder een argument, zal het standaard naar shift (1).
Deze mixin heeft hetzelfde idee als verschuiving (het gebruikt shift-in-context onder de motorkap) maar is gemaakt voor rasterelementen die zijn genest. Ik heb er een beetje mee gespeeld in een dummy-voorbeeld met geneste rasters, maar in alle eerlijkheid bereikte ik dezelfde resultaten met verschuiving.
Ik denk niet dat ik moet ingaan op details over hoe dit werkt. Het is een beetje hulpje om je stylesheets op te ruimen en om je de standaard gootbreedte te geven als je de mixin geeft standaard als een argument. Niets bijzonders, maar ik dacht dat ik het zou noemen om uw opties voor het aanpassen van de spatiëring van uw roosters te voltooien.
Sass:
css .sommige-element-dat-behoeften-opvulling + pad (10px 20px 30px standaard)
Dat is alles wat je moet weten om te beginnen met spelen met Neat-rasters. Deze voorbeelden zouden u een solide basis moeten bieden die u in staat stelt een willekeurig rooster te bouwen dat u nodig hebt, hoe complex u ook vindt.
De volgende zelfstudie bespreekt een nieuwe reeks Neat-mixins en legt ook uit hoe u mediaquery's en breekpunten kunt gebruiken om uw rasters aan te passen voor het wijzigen van de viewportgroottes. Zie je daar!
Accentsconagua