Share
960gs a fost grozav! Atunci când majoritatea vizitatorilor site-ului dvs. au folosit desktop-uri cu monitoare cel puțin la fel de largi ca 1024 pixeli, 960gs a făcut ca proiectarea site-ului în cod să devină mai ușoară. Cu toate acestea, odată cu apariția proliferării dispozitivelor și a prevalenței interogărilor media, site-urile cu lățime fixă sunt cu siguranță mai puțin eficiente decât layout-urile receptive.
În acest document voi descrie cum să luați site-ul cu lățime fixă 960gs și să-l mutați în cadrul Fundației ZURB. Fără a se abate prea mult, vreau să fiu corect la 960gs și să menționez adapt.js, răspunsul cadrului la un design web receptiv. Acum, acest articol va acoperi elementele de bază ale rețelei Fundației, cum se compară cu rețeaua de 960gs și câteva opțiuni suplimentare cu Fundația Sass. Pentru acest tutorial, presupun că deja sunteți familiarizați cu 960gs și căutați Fundația ca o modalitate de a realiza un design receptiv.
Pentru a începe, va trebui să înțelegeți conceptele de bază ale rândurilor și coloanelor din cadrul Fundației. Convenția 960gs era să folosească un container mega și să se bazeze pe fiecare combinație de DIV-uri pentru a face un rând. Ca astfel:
S-ar putea să aveți a aruncate între DIV-urile de rețea care adaugă până la 12, dar acest lucru este opțional. Acest aspect ar produce, în fapt, două rânduri cu două coloane care au divizat în mod egal lățimea disponibilă. Dacă adăugați alfa și omega clase, aceasta va stripa, de asemenea, în plus -Marginea din stânga și margin-dreapta.
În clasele HTML predefinite ale Fundației, același aspect ar fi realizat de următorul fragment:
Nu există un container mega pentru Fundație, în schimb există rânduri și rânduri care să conțină coloane, iar coloanele trebuie să totalizeze 12. Fiecare coloană este definită prin adăugarea coloane clasa însoțită de cel puțin o clasă pentru a dicta lățimea coloanei respective.
Pentru a merge pe o tangentă scurtă, pentru ceea ce merită, grila Fundației este similară cu rândurile și spanurile lui Twitter Bootstrap, cu excepția faptului că Fundația vă oferă puterea de a defini lățimea coloanelor la mai multe puncte de întrerupere.
Veți observa notația mediu 6. Asta inseamna ca la punctul de intrerupere mediu (cu toate acestea este definit, implicit este 641px), veti vedea sase coloane in valoare de lățime sau jumătate din lățimea disponibilă. O altă clasă poate fi adăugată pentru a indica numărul de coloane în lățime div ar trebui să ia și alte puncte de întrerupere, inclusiv mic și mare. Iată cum ar arăta asta:
Fundația este pentru dispozitive mobile mai întâi. Codul pentru ecranele mici, iar dispozitivele mai mari vor moșteni acele stiluri. Personalizați pentru ecrane mai mari, dacă este necesar. sursă
În mod implicit, Fundația este concepută într-un concept mobil mobil. Ce înseamnă acest lucru pentru rețele este faptul că mic clasa poate fi folosită singură pentru a defini lățimea unei coloane la punctul de întrerupere mic și toate punctele de intersecție de mai sus vor moșteni de la aceasta atâta timp cât o mediu sau mare clasa nu este prezentă. Pe de altă parte, dacă folosiți a mediu clasa, atunci aspectul prestabilit de dimensiune redusă va transforma DIV-urile într-o singură coloană în stivă (echivalentă cu mici-12) care este implicit aplicat coloanelor în punctul de întrerupere mic.
Cu toate acestea în minte, elementele de bază ale schimbării marcajului dvs. sunt următoarele: În primul rând, div cu recipient clasa poate fi ștearsă. În continuare, în jurul tău grilă_# DIV-urile care alcătuiesc "rânduri", va trebui să creați o div cu clasa rând. DIV-urile individuale care conțin grilă clasele pot fi schimbate mediu-#.
Acest lucru vă va oferi ceva care arată foarte îngrozitor ca aspectul dvs. vechi de 960gs pentru ferestrele de vizualizare de peste 640 pixeli și sub această lățime, veți avea doar stive de rânduri cu lățime întreagă, ceea ce înseamnă că fiecare coloană div se va schimba la lățimea de 100%.
Iată câteva alte concepte de 960gs traduse în limbajul Fundației:
În 960g, cuiburile ar putea fi realizate adăugând alfa la prima coloană din rândul tău și omega la ultimul dvs., înlăturarea efectivă a marjelor orizontale. Când utilizați această abordare, rândurile dvs. imbricate trebuiau să fie o sumă a lățimii coloanei în care se aflau coloanele imbricate.
În Fundație, cuiburile se fac pentru dvs., trebuie doar să introduceți un rând în interiorul unei coloane. Nu sunt necesare clase suplimentare. Diferența principală este că fiecare rând de cuiburi presupune o nouă coloană proaspătă în spațiul de cuiburi disponibil. Deci, un rând în interiorul unui mediu 6 vă va permite să împărțiți cele șase coloane în 12.
Clasa prefixelor și sufixelor de 960gs au fost clase de utilitate excelente pentru crearea spațiului gol în aspectul dvs. și au oferit un mijloc de centrare. Fundația are aceleași capacități, cu offseturi.
Acest lucru este de fapt cam la fel în ambele cadre. Comandarea surselor vă permite să vă creați coloanele în orice ordine doriți în HTML-ul real, dar să apară într-o altă ordine de stânga-dreapta. Pentru aceasta, puteți folosi Apăsați și Trage clase.
Fundația acoperă toate capacitățile de 960gs și multe altele. Vedeți docs-ul pentru a afla ce altceva poate face.
Ei bine, acesta este principalul motiv pentru care vă mutați în ceva asemănător Fundației: reactivitatea. Știți despre mare, mediu și mic puncte de trecere, dar există, de asemenea extra larg și xxlarge. Iată ce se referă la aceste clase de breakpoint:
| breakpoint | Lățimea ferestrei de vedere |
|---|---|
| mic | < 40em (640px) |
| mediu | 40.063 (641px) < 64em (1024px) |
| mare | 64.063 (1025 pixeli) < 90em (1440px) |
| extra larg | 90.063 (1441 pixeli)> 120 de grade (1920 pixeli) |
| xxlarge | > 120.063em (1921px) |
Rețineți că numai mic, mediu și mare punctele de intersecție pot fi folosite în codul dvs. HTML. Dacă trebuie să utilizați extra larg sau xxlarge, sau doriți să personalizați aceste puncte de interferență, puteți utiliza munca cu Sass pentru a personaliza Fundația pentru a se potrivi nevoilor dumneavoastră.
Fundația este construită pentru a lucra cu Compass și Sass. Dacă Sass este ceva la care te simți confortabil, poate face mai ușoară dezvoltarea, citește mai multe despre începerea cu Sass și Fundația.
Pro cheie pentru utilizarea Sass este că, în loc să adăugați clase specifice clasei Fundației în HTML, puteți extinde atributele Fundației bazate pe marcajul existent. De exemplu, că există div cu clasa știri poate fi făcută pentru a imita a grilă-6 coloane div.
Iată un exemplu complet al modului în care ar putea să arate acest lucru, să presupunem că aveți acest cod HTML:
Pentru a realiza o împărțire de 50/50 .știri și .evenimente, Sass dvs. ar arata astfel:
.principalele @ includ grilă-rând; .news @ include grilă-coloană (6); .exe @ include grid-colmn (6);
Acesta este echivalentul modificării marcajului la acest lucru:
Dacă ați dori să includeți alte puncte de întrerupere în SCSS, ați folosi această tehnică:
.principalele @ includ grilă-rând; .news @ include grilă-coloană (8); @media # big-up grilă-coloană (6) .events @ include grid-colmn (4); @media # big-up grilă-coloană (6)
Care este același lucru cu:
Tehnica SCSS este drăguță pentru că vă păstrează cursurile în programul dvs. HTML și vă permite să deveniți mai semantic.
Există un lucru mai important pentru a înțelege această metodă. Dacă vă compilați CSS-ul într-o foaie de stil suplimentară, dar doriți să utilizați Fundația mixins, va trebui să importați ceea ce aveți nevoie, dar împiedica duplicarea stilurilor Fundației. Pentru a evita adăugarea de stiluri redundante la CSS de ieșire, trebuie să specificați includ-html-clase $ variabil ca fals, iată cum arată:
@import "fundație / setări"; $ include-html-clase: false; @import "fundație";
Rețineți că căile pot diferi în funcție de configurația proprie. Acest lucru vă va permite să utilizați toate mix-urile, funcțiile și setările din cadrul Fundației, fără a trebui să repetați toate CSS-urile. Acest lucru este util dacă includeți deja Fundația CSS pe pagina pe care lucrați. Această metodă ar putea fi folosită, de exemplu, ca un loc pentru a stoca toate înlocuirile dvs. pentru o pagină sau o submulțime specială de pagini.
Acesta este doar vârful aisbergului: Fundația și Sass au mult mai multe de oferit și amândouă au mari succese ale dezvoltatorilor care continuă să le facă mai avansate și, bine, mai bune.
Accentsconagua