Share
Aș vrea să vorbesc cu tine despre Lemonade. Nu băutura citrice răcoritoare, ci un sistem de rețea pe care l-am creat.
Lemonade este un sistem de rețea care a fost construit pentru a oferi designerilor și dezvoltatorilor încrederea în a face site-uri pe deplin responsabile, eliminând frustrarea de a leagă browserele care caută bug-uri și erori. Să ne uităm la modul în care este pusă împreună și cum vă puteți construi propriul sistem de grilă receptiv.
Înainte de a construi propria mea, am folosit de multe ori Skeleton.css pentru planurile mele receptive. Cu toate acestea, pe măsură ce timpul a mers, m-am simțit ca un pic de cauză pierdută, pur și simplu pentru că am continuat să-l amelioreze nevoilor mele și să-mi îndepărtez elementele inutile pe care nu le-am putut folosi. Este un cadru foarte bun, dar aș recomanda-o doar celor care nu se simt confortabil cu munca din front-end.
Există atât de multe grile, cadre și biblioteci, dar alegerea celei potrivite este o decizie dificilă. Cea mai ușoară cale de a decide este să te întrebi: "Ce încerc să fac?" De exemplu: în prezent construiesc un CMS (mai ales PHP) și nu vreau să mă concentrez pe interfața (panoul de administrare) deloc, așa că am optat pentru Bootstrap. Bootstrap este un cadru uimitor de cuprinzător și are literalmente grijă de tine în timpul fiecărui aspect al procesului de proiectare.
Chiar mi-am dorit să fac ceva care să-mi dea controlul total, unde nu ar trebui să-mi petrec majoritatea timpului personalizând grila. În primul rând, credeam că o rețea ar fi o plimbare în parc, de fapt m-am gândit că o voi face în câteva ore. În data de 24 iunie 2013, în jurul orei 12:30, am deschis editorul și am început să scriu cod, multe. Dar surpriza, surpriza, a fost extrem de dificil sa mergi; cum creați ceva care a fost creat de sute de ori, dar mai bine? A trebuit să mă gândesc înainte, a trebuit să-l creez cum aș vrea să funcționeze, nu cum credeam că ar trebui să funcționeze un sistem de rețea, așadar am stabilit trei obiective (le-am scris pe note lipicioase și le-am tencuit pe perete):
Permiteți-mi să vă conduc prin aceste obiective într-o manieră mai detaliată. Am vrut ca rețeaua să fie mică, atât de mică, încât dacă aș fi trebuit să o editez, nu voi blestema pe ecran cu frustrare. A trebuit să lucreze pe browserele moderne (uitați IE8 și sub); Am vrut să elimină scenariul de mișcare prin browsere îngrijorându-mă dacă totul pare OK. Obiectivul final a fost să-l folosim, nu am vrut să fac ceva și să-l țin doar pe GitHub și să nu-l mai folosesc niciodată. Dacă aveam de gând să creez ceva, ar fi trebuit să fie folosit în fiecare proiect pe care l-am făcut.
Mai întâi să abordăm CSS. Rețineți primul obiectiv: "Fii mic, dar puternic"
*, *: după, *: înainte de marja: 0; umplutura: 0; / * Elimină comportamentul de umplere pe lățimi * / -webkit-box-size: box-border; -moz-box-size: caseta de margine; box-size: caseta de margine; / * Selectorul atributului * / [class * = 'bit-'] float: left; padding: 10px; / * Plutește ultimul ".bit" în dreapta * / [class * = 'bit -']: ultimul tip padding-right: 10px; float: dreapta; / * Clearfix * / .frame: după conținut: ""; afișare: tabel; clar: ambele;
În esență, aceasta este coloana vertebrală a rețelei; aceasta este ceea ce face grila funcționează și ține totul împreună.
Setarea casetei de frontieră cu un selector universal ne împiedică să ne îngrijorăm de umplutura elementelor noastre care se încurcă cu lățimile noastre.
În timp ce suntem în legătură cu selectorii, cel mai mare criminal din spațiul nostru este selectorul de atribute. Puteți vedea selectorul atributului în acțiune pe care l-am folosit [Class * = 'bit']. Aceasta vizează orice elemente ale căror atribute de clasă conține "pic-". Am fi putut folosi de asemenea [Class ^ = 'bit'] care vizează toate elementele în care se află clasa începe cu "bit-". Folosirea unui selector de atribute pentru a cuprinde toate clasele de coloane diferite ne va salva atât de mult timp când scriem lățimi de coloane noi.
Un alt lucru de observat este utilizarea unui selector de tip ultim [Clasa * = 'bit -']: ultima-de-tip. Fiecare rând de "biți" va fi conținut în a cadru element:
Folosind selectorul de tip ultima, putem viza ultimul element "bit" din grup, instruindu-l sa pluteasca drept, in loc de stanga. Acest lucru face ca totul să se alinie perfect față de marginea dreaptă, în sprijinul browserelor.
O întrebare obișnuită pe care o aud foarte mult despre Lemonade este: "De ce asemenea nume de clasă ciudate?" Nu este o poveste interesantă, tocmai m-am referit la coloane ca "biți" în notele mele, așa că a escaladat de acolo. Spunând asta, cred că subconștient doresc ca clasele să fie diferite față de standardul "col-1" văzut în multe alte sisteme de grilă.
Am generat lățimea coloanelor folosind un calculator (vezi, nu trebuie să fii un matematician). Calculul coloanelor nu era deloc dificil, de fapt a fost foarte ușor. De exemplu, în grilă, fiecare bit este o fracțiune din toată lățimea, bit-8 este a opta. Prin urmare, 100 ÷ 8 = 12,5, deci setăm lățimea fiecărui bit-8 la 12,5%.
Am testat temeinic fiecare secțiune de coloană cu conținut real și toate funcționează perfect pe diferite browsere și dispozitive.
/ * Lățimile principale * / .bit-1 lățime: 100%; .bit-2 lățime: 50%; .bit-3 lățime: 33,33%; .bit-4 lățime: 25%; .bit-5 lățime: 20%; .bit-6 lățime: 16,6666666667%; .bit-7 lățime: 14,2857142857%; .bit-8 lățime: 12,5%; : 11.1111111111%; .bit-10 lățime: 10%; .bit-11 lățime: 9.09090909091%; .bit-12 lățime: 8.33%;
Acum, după cum puteți vedea, lățimile sunt super-curate, ușor de citit și asta este ceea ce am vrut inițial - puteți vedea cu ușurință ce anume și dacă este necesar, puteți să vă mândriți și să editați dimensiunile cu ușurință.
Editarea limonadei este plăcut simplă. Sistemele de rețea sunt adesea intimide pentru a le edita, așa că m-am provocat să-mi fac cât mai simplu posibil. Singura regulă pentru personalizarea limonadei este: atâta timp cât coloanele dvs. sunt egale cu 100%, va funcționa perfect. Adăugarea propriilor biți este direct înainte, deoarece selectorii atributului au grijă de cea mai mare parte a structurii rețelei:
.bit-25 lățime: 25%; .bit-75 lățime: 75%;
Aceste două în combinație ar fi bine.
Realizarea acestuia a fost destul de dificilă, pentru a fi perfectă pe fiecare dispozitiv și pentru a determina punctele de întrerupere, a fost extrem de frustrant. Lasă-mă să te conduc prin cod. Am ales să lucrez mai degrabă pe desktop, mai degrabă decât pe cel mobil, dar depinde în întregime de dvs. la ce abordare preferați.
Am stabilit deja lățimea de bază, așa că acum să direcționăm dispozitive între 800px și 1100px:
/ * tableta de bază pentru stiluri desktop reduse * / @media (min-width: 800px) și (max-width: 1100px) .bit-2, .bit-7 width: 100%; .bit-4, .bit-8, .bit-10, .bit-12 lățimea: 50%;
Am putea descrie acest lucru ca pe o compilație de peisaj pe Desktop (ținând seama de faptul că lățimile dispozitivului nu sunt în niciun caz stabilite în piatră). Acest lucru era la fel de important ca și celelalte întrebări media - de ce? Pentru că am descoperit că majoritatea celor care dețin 13 "notebook-uri au rar lățimea browser-ului, ei vor avea o pereche de sute de pixeli de lățime întreagă, ceea ce arată bine pe tabletă peisaj, trebuie să arate bine și pe desktop.
/ * stiluri tabletă de bază * / @media (max-width: 800px) .bit-4, .bit-6, .bit-8, .bit-10, .bit-12 latime: 50%; .bit-1, .bit-2, bit-3, .bit-5, .bit-7, .bit-9, .bit-11 lățimea: 100%;
Această gamă îmi place să mă gândesc că țintesc mobil la tabletă (deși, din nou, definirea dispozitivelor prin rezoluția ecranului este un teritoriu stâncos). De ce punctele de întrerupere ciudate? Nimic prea nebun, este exact ceea ce a funcționat cel mai bine - rețelele sunt foarte obositoare când vine vorba de cât de stricte trebuie să fie lățimile și am descoperit că aceste puncte de rupere au funcționat bine în sălbăticie.
Unicitatea dimensiunilor coloanelor a fost destul de greu de creat și de fapt aceasta a fost cea pe care am petrecut cea mai mare parte a cercetărilor mele; ce vedeți de obicei pe desktop care se schimbă dramatic pe telefonul mobil? În principal conținut inline care devine conținut stivuit - așa că a trebuit să mă gândesc ce este mai mult decât probabil să fie plasat unul lângă altul și ceea ce va fi stivuit unul pe altul.
/ * stiluri mobile de bază - totul 100% * / @media (max-width: 480px) .bit-1, .bit-2, .bit-3, .bit-4, .bit-5,. , .bit-7, .bit-8, .bit-9, .bit-10, .bit-11, .bit-12 lățimea: 100%;
Această rubrică se adresează ceea ce majoritatea oamenilor ar recunoaște ca fiind mobil. Am încercat să fiu mai creativ cu stabilirea lățimii pentru telefonul mobil, dar am simțit că trebuie să-l păstrez așa cum îmi imaginez că majoritatea oamenilor nu caută un fel de aspect metrou sau ceva prea nebun ca acesta.
HTML-ul este foarte simplu și asta e grozav în această rețea. Pentru a continua cu exemplul nostru, să facem o coloană cu trei grile (de exemplu, o galerie).
Acolo îl aveți, o galerie cu trei coloane, responsabilă și compatibilă cu browserul. Puteți, bineînțeles, să vă jucați cu HTML și să faceți toate tipurile de machete.
Building Lemonade a fost o curbă mare de învățare pentru mine, ma învățat că dacă nu mă simt confortabil cu ceva, atunci nu trebuie să rămân în jur și să aștept alternative - pot crea propria mea!
Sper că acest tutorial ți-a oferit o perspectivă asupra creării unor lucruri destul de minunate. Uitați-vă la unele site-uri din sălbăticie, pentru a vedea cum au folosit-o alții:
Dacă aveți întrebări sau probleme, lăsați un comentariu de mai jos sau nu ezitați să mă tweet.
Accentsconagua
