Share
Denne opplæringen er rettet mot å komme i gang med Neat; et semantisk gridramme bygget for Sass og Bourbon.
Bourbon Neat holder oppslaget ditt rent, slik at du ikke mudder det med rutenett, kolonne og radklasser. I stedet bruker den mixins, og ved å bruke sine forskjellige mixins til din eksisterende markup, kan du opprette fleksible, responsive layouter. La oss utforske de mest essensielle mixins:
Merk: For å installere og komme i gang med Bourbon Neat, ta en titt på den tidligere opplæringen Bourbon Neat: Semantic, Unopinionated, Responsive Grids.
Denne blandingen er for å bestemme oppsettets beholder eller innpakning. Bruk dette til et element, og Neat vil automatisk sentrere det i visningsporten (ved å legge til margin-left: auto / margin-høyre: auto), fjern flyter og bruk det angitte $ Max bredde. Det er en valgfri mixin (anbefalt skjønt), og du kan ha flere ytre beholderelementer på en enkelt side. Den eneste tingen du ikke kan gjøre er å neste dem.
Den ytre beholderen holder rutenettet. Innenfor det kan nettverket ditt spenne så mange kolonner som angitt i din rutenett-innstillinger fil via $ grid-kolonner variabel (som standard til 12 kolonner). Alle elementene på rad må legge opp til totalt antall kolonner som er spesifisert i denne variabelen.
I dummyeksempelet nedenfor ser du at container element wraps et par side og artikkel tags. De spenner over henholdsvis 3 og 9 kolonner og legger opp til 12 kolonner som angitt i innstillingene mine. Hvis jeg skulle gå over det antall kolonner ville layoutet sikkert bryte. Tenk på ytre beholder- mixin som den mest sannsynlige forutsetningen for å legge til konsistente gridoppsett innenfor containerelementer.
Haml:
"html .container% side side Til side: 3 kolonner% artikkel Artikkel: 9 kolonner
% til side Til side: 3 kolonner% artikkel Artikkel: 9 kolonner
% til side Til side: 3 kolonner% artikkel Artikkel: 9 kolonner "
Sass:
"css body background-color: white
.container + ytre beholder bakgrunnsfarge: # f5f5f5
til side, artikkelpostering: 10px margin-bunn: 20px høyde: 100px
bortsett fra + span-kolonner (3) bakgrunnsfarge: # 81d4fa
artikkel + span-kolonner (9) + omega bakgrunnsfarge: # e64a19 "
Bakgrunnsfargene i dette eksemplet gjør det lettere å se hvordan brikkene passer sammen. Og ikke bekymre deg selv med omega mixin på dette punktet; alt vil bli avslørt med tiden.
I din _grid-innstillinger Sass delvis kan du også spesifisere a $ Max bredde Sass-variabel som definerer maksimal bredde som innholdet på siden din skal strekke seg over. For eksempel kommer Neat med en lett foranderlig $ Max bredde Innstilling av 1088px (konvertert til em) ut av boksen.
Det er også muligheten til å gi denne mixin et argument for a $ Lokal-max-width hvis du vil ha et bestemt beholderelement for å ha en annen max bredde enn den som settes globalt inn rutenett-innstillinger. Her kan du gi pixel, em eller prosentdel argumenter. Kolonnene i rutenettet i den beholderen justerer bredden deres automatisk, men antall kolonner forblir de samme.
Sass:
css .container + ytre beholder (800px) bakgrunnsfarge: # f5f5f5 eller
css .container + ytre beholder (80%) bakgrunnsfarge: # f5f5f5
Hvis du er ny for å designe med nett, bør du kanskje se på den utmerkede bestillingsforstyrrelsen: Grid Principles for Web Design av Khoi Vinh. Jeg anbefaler det. Et konsept som du trenger å forstå med en gang er at du bygger opp rutenettdesignene dine gjennom en rekke kolonner som strekker seg over siden.
Den grunnleggende bruken av dette er helt grei med Neat. Du velger et element, og forteller det hvor mange kolonner det skal spenne innenfor totalt antall $ grid-kolonner. La meg vise det grunnleggende.
Haml:
"html .container% aside.first Først: 2 kolonner% artikkel.sekund Andre: 10 kolonner
% aside.third Tredje: 4 kolonner% artikkel.fjerde Fjerde: 8 kolonner
% aside.fifth Fifth: 6 columns% article.sixth Sjette: 6 kolonner
% sideide.sevende syvende: 8 kolonner% artikkel.eighth åttende: 4 kolonner
% aside.ninth Ninth: 10 columns% article.tenth Tiende: 2 kolonner "
Sass:
"css kroppsfarge: hvit bakgrunnsfarge: hvit
.container + ytre beholder bakgrunnsfarge: # f5f5f5
til side, artikkelpostering: 10px margin-bunn: 20px høyde: 100px
artikkel bakgrunnsfarge: # e64a19
bortsett fra bakgrunnsfarge: # 81d4fa
.første + span-kolonner (2). tredje + span-kolonner (4). femte + span-kolonner (6) .sevende + span-kolonner (8) .nende + span-kolonner (10)
.andre + span-kolonner (10) .fourth + span-kolonner (8) .sixth + span-kolonner (6) .ighth + span-kolonner (4). tiende + span-kolonner (2)
.andre. fjerde, .sixte,. åttende + omega "
Som du ser, består hver rad av en blå side til venstre og en rød artikkel element til høyre. Oppsettet bryter ikke, fordi i det ytre beholderelementet deres totalt antall kolonner og deres bredde legger opp til 12 (som definert i $ grid-kolonner) jevnt.
Den kuleste delen er at det ikke er behov for å legge til noen stylingsinformasjon i ditt oppslag - siden dette er relatert til presentasjonslaget, definerer du bare hvordan nettverket ditt er sammensatt i dine Sass-filer. Rent separerte bekymringer. Hver sanne designer som berører arbeidet ditt etter at du vil elske deg for at du ikke forurenser innholdet med stylinginformasjon.
En ekstra bonus er at du kan navngi klasser i oppslaget uansett hvor du vil eller trenger. Ingen gjør disse avgjørelsene for deg, noe som er en velsignelse uten forkledning.
Fra tid til annen kan det være nyttig å raskt neste rutenettelementer i en annen.
Sass:
css .some-parent-element + span-kolonner (10) .some-nested-element + span-kolonner (5 av 10)
Si at du har et bredt element som strekker seg over 10 kolonner og bør inkludere to mindre elementer som spenner over 5 kolonner hver. I så fall gi de nestede elementene størrelsen på foreldrekolonnen som et argument til span-kolonner mixin. La oss se på et mer konkret eksempel.
Haml:
html .container% aside.first Først: 2 kolonner% artikkel.seksjon% artikkel.nde tredje: 5 nestede kolonner% artikkel.firdre Fjerde: 5 nestede kolonner
Sass:
"css kroppsfarge: hvit bakgrunnsfarge: hvit
.container + ytre beholder bakgrunnsfarge: # f5f5f5 polstring: topp: 15px bunn: 15px
til side, artikkelpostering: 10px margin-bunn: 20px høyde: 100px
artikkel bakgrunnsfarge: # e64a19
bortsett fra bakgrunnsfarge: # 81d4fa
.første, .sekund høyde: 250px
.andre + span-kolonner (10)
.tredje, .fourth + span-kolonner (5 av 10) bakgrunnsfarge: mørkere (# e64a19, 6) margin-topp: 25px
.første + span-kolonner (2) polstring-topp: 25px "
Et annet viktig konsept for nybegynnere som leker med rister er renden. Dette marginen til høyre, mellom gridelementer, og blir automatisk opprettet for hvert gridelement i en beholder, bortsett fra det siste! Gutters skala også responsivt hvis du endrer størrelsen på nettleservinduet. Eksemplet under viser denne plassen mellom gridelementene. Gutten er betegnet av den gråfarvede bakgrunnen som kommer gjennom den ytre beholderen.
Haml:
html .container. første 1 kol. sekund 2 kol. tredje 3. kol.fjerte 3 kol. femte 2 kol.sixth 1 kol
Sass:
"css kroppsfarge: hvit bakgrunnsfarge: hvit
.container + ytre beholder bakgrunnsfarge: # f5f5f5
.første, .sekund ,. tredje ,. fjerde. femte.sixte bakgrunnsfarge: # 81d4fa polstring: 10px høyde: 200px
.første + span-kolonner (1)
.andre + span-kolonner (2)
.tredje + span-kolonner (3)
.fjerde + span-kolonner (3)
.femte + span-kolonner (2)
.sjette + span-kolonner (1) "
Lett peasy riktig? Men gjett hva som skjer hvis vi dobler kolonnene ved å duplisere rækken rett under den?
Åh kjære. Så hva skjedde her? Som sjette elementet i første rad er ikke lenger det siste elementet, det blir også en riktig rennemargin (margin) som standard. La meg være veldig tydelig på dette: For å oppnå en rent justert oppsett, har det siste elementet i en beholder sin renner fjernet som standard. På grunn av den ekstra ruten på det sjette elementet overskrider bredden på alle elementene i første rad nå total-bredde ditt antall total-kolonner Kan spanne per rad og rutenettet bryter.
Ingenting er for tragisk skjønt, og løsningen er lett. Bare finn elementet som trenger den renden til høyre fjernet og bruk omega mixin der. Ferdig!
Haml:
"html .container. første 1 kol. sekund 2 kol. tredje 3. kol.fjerte 3 kol. femte 2 kol.sixth 1 kol
.første 1 kol.sekund 2 kol. tredje 3 kol.fjerte 3 kol.fifth 2 kol.sixth 1 col "
Sass:
"css kroppsfarge: hvit bakgrunnsfarge: hvit
.container + ytre beholder bakgrunnsfarge: # f5f5f5
.første, .sekund ,. tredje ,. fjerde. femte.sixte bakgrunnsfarge: # 81d4fa polstring: 10px høyde: 200px
.første + span-kolonner (1)
.andre + span-kolonner (2)
.tredje + span-kolonner (3)
.fjerde + span-kolonner (3)
.femte + span-kolonner (2)
.sjette + span-kolonner (1) + omega "
Nå, hvert element faller på plass pent, og ingen av radene overstiger deres total-bredde.
La oss ta dette lille skrittet videre. Si at du har et par rader som skal vise bilder av samme størrelse jevnt uten å bryte rutenettet. Alt vi trenger er et par elementer som spenner over samme bredde, her span-kolonner (2), og plasser dem i et par rader. Den magien skjer med argumentet du leverer omega med:
css img + omega (6n) Her, hver sjette img Elementet vil ha sin høyre renner fjernet og passer derfor jevnt til seks 2-kolonne elementer inn i de 12 kolonnene i den ytre beholderen. Ryddig!
Haml:
"html .container% img% img% img% img% img% img
% img% img% img% img% img% img
% img% img% img% img% img% img
"
Sass:
"css kroppsfarge: hvit bakgrunnsfarge: hvit
.container + ytre beholder bakgrunnsfarge: # f5f5f5
img + span-kolonner (2) + omega (6n) høyde: 200px margin-bunn: 5px bakgrunnsfarge: # 81d4fa "
Du vil bare ha fire elementer per rad? Ikke noe problem! Reduser argumentet for omega til 4n. Denne teknikken vil komme til nytte i neste veiledning når vi kommer til lydhør, og hvordan du kan endre oppsettet ditt gjennom medieforespørsler.
Sass:
css img + omega (4n)
Jeg oppfordrer deg til å leke med dette eksemplet via de angitte pennene og få en følelse for det. Det er ingen magi her, men vær ikke overrasket hvis du trenger litt mer tid til å vikle hodet rundt detaljene. Kryss litt med omega-argumentene, og jeg har ingen tvil om at det blir krystallklart for deg på kort tid.
Siste visdomsord: I noen tilfeller ser det ut til å ha betydning i hvilken rekkefølge du leverer span-kolonner og omega mixins til elementene. Mitt råd er å alltid gjelde span-kolonner først for å unngå uventet oppførsel.
Denne blandingen skal være rask. Hvis du vil justere et element ved å flytte det horisontalt til venstre eller høyre, kan du søke på skifte mixin, og gi den med antall kolonner den skal flytte. Du kan bruke heltall eller flytende punktnumre.
Sass:
css .some-element-that-needs-adjusting + shift (n)
Gi et positivt tall (enhetsløst) med kolonner for å flytte elementet til høyre og omvendt. Bak kulissene øker eller senker Neat prosentverdiene for margin-left på elementet.
Merk: hvis du bruker skifte uten et argument, vil det standard til skift (1).
Denne mixin har samme ide som skifte (det bruker skiftinntegn-sammenheng under hetten), men er laget for rutenettelementer som er nestet. Jeg har spilt rundt med det litt i et dummy eksempel med nestede grids, men i all ærlighet oppnådde jeg de samme resultatene ved å bruke skifte.
Jeg tror ikke jeg må gå inn i noen spesifikasjoner av hvordan dette fungerer. Det er litt hjelpemiddel for å rydde opp stilarkene dine og gi deg standard ryggbredden hvis du gir mixin med misligholde som et argument. Ingenting for fancy, men jeg trodde jeg skulle nevne det for å fullføre alternativene dine for å justere avstanden til nettene dine.
Sass:
css .some-element-that-needs-padding + pad (10px 20px 30px standard)
Det er alt du trenger å vite for å komme i gang med å spille med Neat grids. Disse eksemplene burde ha gitt deg et solid grunnlag som gjør at du kan bygge ethvert nett du trenger - men komplisert du liker.
Neste opplæring vil dekke en annen runde med Neat mixins, og også forklare hvordan du kan bruke medieforespørsler og brytepunkter for å justere nettene dine for å endre visningsstørrelser. Ser deg der!
Accentsconagua