Share
Acest tutorial vizează să vă începeți cu Neat; un cadru de rețea semantic construit pentru Sass și Bourbon.
Bourbon Neat păstrează marcajul dvs. curat, împiedicându-vă să-l înfundați cu clase de grilă, coloană și rând. În schimb, acesta utilizează mixuri, iar prin aplicarea diferitelor sale mixuri la marcarea dvs. existentă puteți crea planuri flexibile și receptive. Să explorăm cele mai importante amestecuri:
Notă: Pentru a instala și a începe cu Bourbon Neat, aruncați o privire la tutorialul anterior Bourbon Neat: Rețelele Semantice, Neopilionate și Respondabile.
Acest amestec este pentru a determina containerul dvs. de aspect, sau wrapper. Aplicați acest lucru unui element și Neat îl va centraliza automat în portul de vizualizare (prin adăugarea margin-left: auto / margin-dreapta: auto), ștergeți flotoarele și aplicați specificațiile $ Max-width. Este un mixin opțional (recomandat, totuși) și puteți avea mai multe elemente de containere exterioare pe o singură pagină. Singurul lucru pe care nu-l puteți face este să-i cuibărați.
Containerul exterior ține grila. În interiorul acestuia, grilă dvs. poate include cât mai multe coloane, după cum este specificat în textul dvs. grid-settings fișier prin intermediul $ grid-coloane variabilă (care implică 12 coloane). Toate elementele dintr-un rând trebuie să adauge la numărul total de coloane specificate în această variabilă.
În exemplul de mai jos, veți vedea că recipient elementul împachetează un cuplu de deoparte și articol Etichete. Acestea cuprind 3 și respectiv 9 coloane și adaugă până la 12 coloane așa cum este specificat în setările mele. Dacă ar fi trebuit să trec peste acel număr de coloane, aspectul cu siguranță ar fi rupt. Gândiți-vă la exterior container mixin ca cea mai probabilă condiție prealabilă pentru adăugarea de machete consistente în cadrul elementelor containerului.
Haml:
"html .container% deoparte În afară: 3 coloane% articolul articol: 9 coloane
% la o parte În afară: 3 coloane% articolul articol: 9 coloane
% la o parte În afară: 3 coloane% articolul articol: 9 coloane "
Sass:
"css corpul fundal-culoare: alb
.container + recipient-exterior-culoare: # f5f5f5
deoparte, umplutura articolului: 10px margin-bottom: înălțime 20px: 100px
deoparte + span-coloane (3) fundal-culoare: # 81d4fa
articol + span-coloane (9) + culoarea omega de fundal: # e64a19 "
Culorile de fundal din acest exemplu fac mai ușor să vedem cum se potrivesc piesele împreună. Și nu vă îngrijorați omega mixin în acest moment; totul va fi dezvăluit în timp util.
În tine _grid-settings Sass parțial puteți specifica și a $ Max-width Variabila Sass care definește lățimea maximă pe care ar trebui să o acopere conținutul paginii dvs. De exemplu, Neat vine cu un ușor de schimbat $ Max-width setarea de 1088 pixeli (convertită în em) din cutie.
Există, de asemenea, opțiunea de a oferi acestui mixin un argument pentru o $-Max-lățime locală dacă doriți ca un anumit element al containerului să aibă un alt element lățimea maximă decât cea stabilită la nivel global în grid-settings. Aici puteți să oferiți pixel, em sau procent argumente. Coloanele grilajului din interiorul containerului își ajustează automat lățimea, dar numărul de coloane rămâne același.
Sass:
css .container + container-exterior (800px) background-color: # f5f5f5 sau
css .container + container-exterior (80%) fundal-culoare: # f5f5f5
Dacă sunteți nou la proiectarea cu grile, ar trebui să te uiți în excelenta Comandă tulburare: Grid Principii pentru Web Design de Khoi Vinh. Îmi recomand foarte mult. Un concept pe care trebuie să-l înțelegeți imediat este că vă construiți schemele de rețea printr-o serie de coloane care se întind pe pagină.
Utilizarea de bază a acestui lucru este super-simplă cu Neat. Alegeți un element și spuneți câte coloane ar trebui să se întindă în numărul total $ grid-coloane. Permiteți-mi să demonstrez elementele de bază.
Haml:
"html .container% aside.first Prima: 2 coloane% articol.secundă secundă: 10 coloane
% a treia: a treia: 4 coloane% articol. patru A patra: 8 coloane
% aside.fifth Cincea: 6 coloane% article.sixth A șasea: 6 coloane
% al șaptelea al șaptelea: 8 coloane% article.eighth Al optulea: 4 coloane
% anide.ninth Al nouălea: 10 coloane% article.tenth Al zecelea: 2 coloane "
Sass:
"Culoarea caroseriei css: fundal alb-culoare: alb
.container + recipient-exterior-culoare: # f5f5f5
deoparte, umplutura articolului: 10px margin-bottom: înălțime 20px: 100px
articol de fundal-culoare: # e64a19
în afară de culoarea de fundal: # 81d4fa
.primul + span-coloane (2) .third + span-coloane (4) .fifth + span-coloane (6) .sevenh + span-coloane (8)
.(8) .sixth + span-coloane (6) .eighth + span-coloane (4) .tenth + span-coloane (2)
.al doilea, al patrulea, al șaselea, al doilea,
După cum puteți vedea, fiecare rând este alcătuit dintr-un albastru deoparte pe stânga și pe una roșie articol element în dreapta. Schema nu se rupe, deoarece în interiorul elementului exterior al containerului numărul total de coloane și lățimea lor se adaugă până la 12 (așa cum este definit în $ grid-coloane) în mod egal.
Partea cea mai tare este că nu este nevoie să adăugați nicio informație de stil la marcajul dvs. - deoarece acest lucru este legat de stratul de prezentare, definiți doar modul în care grilă dvs. este compusă în fișierele dvs. Sass. Preocupări separate. Fiecare designer sănătos care vă atinge lucrarea după ce vă va plăcea să nu poluați conținutul cu informații despre stil.
Un bonus suplimentar este că puteți numi clasele în marcarea dvs. oricum doriți sau aveți nevoie. Nimeni nu face aceste decizii pentru tine, ceea ce este o binecuvântare fără nici un fel de deghizare.
Din când în când, s-ar putea să fie la îndemână să cuibuiți rapid elementele rețelei într-un altul.
Sass:
css. un element-părinte-element + span-coloane (10) .some-nested-element + span-coloane (5 din 10)
Spuneți că aveți un element larg care se întinde pe 10 coloane și ar trebui să includă două elemente mai mici, care acoperă câte 5 coloane fiecare. În acest caz, furnizați elementele imbricate cu dimensiunea coloanei părinte ca argument al lui deschideri-coloane mixin. Să examinăm un exemplu mai concret.
Haml:
html .container% aside.first Prima: 2 coloane% article.second% article.third A treia: 5 coloane imbricate% article.fourth În al patrulea rând: 5 coloane imbricate
Sass:
"Culoarea caroseriei css: fundal alb-culoare: alb
.container + fundal-container de fundal: # f5f5f5 padding: top: 15px fund: 15px
deoparte, umplutura articolului: 10px margin-bottom: înălțime 20px: 100px
articol de fundal-culoare: # e64a19
în afară de culoarea de fundal: # 81d4fa
.prima, înălțimea secundă: 250 px
.secunde + coloane (10)
.al treilea rând. + patru coloane (5 din 10) fundal-culoare: întunecat (# e64a19, 6) margin-top: 25px
.prima + span-coloane (2) padding-top: 25px "
Un alt concept important pentru începătorii care se joacă cu grilaje este jgheabul. Această marjă din dreapta, între elementele grilei și este creată automat pentru fiecare element de rețea dintr-un container - cu excepția ultimului! Jgheaburile ajustează, de asemenea, în mod corespunzător dacă redimensionați fereastra browserului. Exemplul de mai jos demonstrează acest spațiu între elementele rețelei. Jgheabul este semnalat de fundalul de culoare gri care vine din recipientul exterior.
Haml:
html .container.first 1 col second 2 col col. 3 col col. 3 col col. 5 col.
Sass:
"Culoarea caroseriei css: fundal alb-culoare: alb
.container + recipient-exterior-culoare: # f5f5f5
.prima, a doua, a treia, a patra, a cincea, a șasea culoare de fundal: umplutură # 81d4fa: înălțimea de 10px: 200px
.primele + coloane (1)
.secunde + coloane (2)
.a treia + coloane de span (3)
.a patra + coloane de span (3)
.a cincea + coloane de span (2)
.a șasea + coloane de span (1) "
Easy-peasy dreapta? Dar ghiciți ce se întâmplă dacă dublăm coloanele duplicând rândul chiar sub ea?
Aoleu. Deci, ce sa întâmplat aici? Deoarece al șaselea element din primul rând nu mai este ultimul element, de asemenea, obține un jgheab drept (marja) în mod implicit. Permiteți-mi să fiu foarte clar în această privință: pentru a obține un aspect aliniat în mod clar, ultimul element dintr-un container are jgheabul eliminat în mod implicit. Din cauza jgheabului adăugat al celui de al șaselea element, lățimea tuturor elementelor din primul rând depășește acum totală lățime numărul tău de totalul de coloane poate să se întindă pe fiecare rând și pauzele de rețea.
Nimic prea tragic, iar reparatia este usoara. Găsiți doar elementul care are nevoie de acel jgheab spre dreapta și apoi aplicați omega mixin acolo. Terminat!
Haml:
"html .container.first 1 col second 2 col col. 3 col col. 3 col col. 5 2 col col.
.primul 1 col seconda 2 col. al treilea 3 col. cel de-al 3-lea col. al cincilea col. sec. 1 col.
Sass:
"Culoarea caroseriei css: fundal alb-culoare: alb
.container + recipient-exterior-culoare: # f5f5f5
.prima, a doua, a treia, a patra, a cincea, a șasea culoare de fundal: umplutură # 81d4fa: înălțimea de 10px: 200px
.primele + coloane (1)
.secunde + coloane (2)
.a treia + coloane de span (3)
.a patra + coloane de span (3)
.a cincea + coloane de span (2)
.al șaselea + span-coloane (1) + omega "
Acum, fiecare element se încadrează bine, și nici unul dintre rânduri nu le depășește totală lățime.
Să facem un mic pas mai departe. Spuneți că aveți câteva rânduri care ar trebui să afișeze imaginile de aceeași dimensiune în mod egal fără a rupe grila. Tot ce avem nevoie este o pereche de elemente care se întind pe aceeași lățime, aici deschideri de coloane (2), și plasați-le în câteva rânduri. Magia se întâmplă cu argumentele pe care le furnizați omega cu:
css img + omega (6n) Aici, fiecare șase img elementul va avea jgheabul drept îndepărtat și, prin urmare, se potrivește uniform șase 2 coloane elemente în cele 12 coloane ale containerului exterior. ordinat!
Haml:
"html.container% img% img% img% img% img% img
% img% img% img% img% img% img
% img% img% img% img% img% img
"
Sass:
"Culoarea caroseriei css: fundal alb-culoare: alb
.container + recipient-exterior-culoare: # f5f5f5
img + span-coloane (2) + omega (6n) înălțime: 200px margin-bottom: 5px background-color: # 81d4fa "
Vrei doar patru elemente pe rând? Nici o problema! Reduceți argumentul pentru omega la 4n. Această tehnică va fi utilă în următorul tutorial atunci când ajungem la rețele receptive și cum vă puteți schimba aspectul prin interogări media.
Sass:
css img + omega (4n)
Vă încurajez să jucați cu acest exemplu prin intermediul pixurilor furnizate și să vă simțiți. Nu există magie aici, dar nu fi surprins dacă ai nevoie de un pic mai mult timp pentru a-ți înfășura capul în jurul detaliilor. Rămâi puțin cu argumentele omega-ului și nu am nici o îndoială că va deveni foarte clar pentru tine în cel mai scurt timp.
Ultimele cuvinte de înțelepciune: În unele cazuri pare să conteze în ce ordine oferiți deschideri-coloane și omega amestecurile cu elementele. Sfatul meu este să aplicați întotdeauna deschideri-coloane pentru a evita comportamentul neașteptat.
Acest amestec ar trebui să fie rapid. Dacă doriți să ajustați un element mutându-l orizontal spre stânga sau spre dreapta, puteți aplica schimb mixin și puneți-l cu numărul de coloane pe care ar trebui să le miște. Puteți utiliza numere întregi sau puncte în virgulă mobilă.
Sass:
css .some-element-care-are nevoie-ajustare + schimbare (n)
Furnizați un număr pozitiv (fără unitări) de coloane pentru a muta elementul spre dreapta și invers. În spatele scenei, Neat mărește sau scade valorile procentuale din -Marginea din stânga pe element.
Notă: dacă utilizați schimb fără un argument, acesta va implicit schimbare (1).
Acest amestec are aceeași idee ca și schimb (folosește shift-in-context sub capotă), dar este făcută pentru elemente de rețea care sunt imbricate. Am jucat în jur cu un pic într-un exemplu inactiv cu grinzi imbricate, dar cu toată sinceritatea am obținut aceleași rezultate utilizând schimb.
Nu cred că trebuie să intru în specificul modului în care funcționează. Este un mic ajutor pentru a vă curăța foile de stil și pentru a vă oferi lățimea implicită a jgheabului dacă furnizați amestecul cu Mod implicit ca argument. Nimic prea fantezist, dar m-am gândit să-ți spun că îți completez opțiunile pentru ajustarea distanței dintre grilele tale.
Sass:
css .some-element-that-needs-padding + pad (implicit 10px 20px 30px)
Asta e tot ce trebuie să știți pentru a începe să jucați cu rețelele Neat. Aceste exemple ar trebui să vă ofere o bază solidă care vă permite să construiți orice rețea de care aveți nevoie - oricât de complexă vă place.
Următorul tutorial va acoperi o altă rundă de amestecuri Neat și va explica și modul în care puteți utiliza interogările media și punctele de întrerupere pentru a ajusta grilele dvs. pentru a schimba dimensiunile ferestrei de vizualizare. Ne vedem acolo!
Accentsconagua