Share
Construcția cu o rețea a devenit o cerință de zi cu zi pentru dezvoltatorii din front-end. Rețelele nu oferă doar un sentiment de ritm și consistență în proiectare, dar când se utilizează o structură bine cunoscută a rețelei, aceasta oferă un limbaj simplu de design colectiv pentru munca în echipă.
Flexboxgrid este un nou cadru care vă permite să combinați predictibilitatea și structura lingvistică comună a unui sistem de rețea cu flexibilitatea și simplitatea flexboxului. Astăzi, vom trece prin elementele de bază ale utilizării Flexboxgrid și îl vom folosi pentru a construi o pagină de portofoliu simplu pentru Dribbble. Să începem!
Primul pas pentru a începe cu Flexboxgrid este de a apuca CSS. Pentru dezvoltare, utilizați versiunea neinformată.
Apoi, hai să vorbim puțin despre modul în care funcționează Flexboxgrid. Documentația este complet cuprinsă pe pagina de pornire de pe Flexboxgrid.com, dar vom trece peste punctele înalte.
Flexboxgrid este construit pentru a suporta patru puncte de interferență primare, numite în mod arbitrar pentru a evita problemele legate de întreținerea punctelor de întrerupere a pixelilor. Aceste puncte de trecere sunt mână, poală, birou, și perete, denumite după ce sunt văzute ca lățimi de mână, orb, de birou și de perete (de exemplu, unde este probabil să se găsească un dispozitiv). Clasele coloanelor în sine sunt structurate astfel:
coloană [număr] - [coloană] coloană-4 - coloană manuală - auto-perete
Flexboxgrid este o grilă cu douăsprezece coloane și utilizează coloane bazate pe procentaje în combinație cu puterea flexbox pentru o rețea solidă.
Notă: suportul de browser pentru flexbox este încă incomplet; Flexboxgrid nu ar trebui să se bazeze pe proiecte care necesită implementarea integrală a browser-ului.
Luând direct din documentație, marcarea pentru un exemplu de rând utilizând Flexboxgrid arată cam așa:
sensibil
Există o lățime de coloană "automată" la fiecare punct de întrerupere. Acest lucru face ceva diferit de cel tradițional lățime: auto regulă. Flexbox va umple automat rândul în mod corespunzător cu coloane de dimensiuni egale, indiferent de câte sunt plasate pe rând.
autoautoauto
De exemplu, în exemplul de mai sus, coloanele vor ocupa o treime din fiecare.
Există mult mai multe lucruri care se pot face cu Flexboxgrid, inclusiv alinierea coloanelor unui rând pe orizontală:
precum și pe verticală:
Flexboxgrid beneficiază, de asemenea, de avantajele tehnicilor de reordonare ușoară ale Flexbox și ale opțiunilor de spațiere dinamice, dar pentru moment vom avansa cu crearea rețelei Dribbble!
Vom începe cu un simplu document HTML gol, inclusiv jQuery și Normalize. Simțiți-vă liber să utilizați ceva de genul HTML5 Boilerplate cu instrumente cum ar fi Modernizr, dar pentru acest proiect vom rămâne axați pe JavaScript, HTML și CSS pe care trebuie să vă scrieți.
De aici vom construi structura HTML pe care dorim să o folosim și apoi vom face totul cu API-ul Dribbble.
În primul rând, să presupunem că vrem să creăm o rețea care să pornească de la cel puțin două blocuri pe rândul orizontal și să se mute până la șase blocuri pe rând la perete breakpoint. Iată cum am putea realiza acest lucru:
coloană-6 - mână dictează că la mână punct de întrerupere (pentru dispozitivele ținute în mână) fiecare bloc va umple șase din cele douăsprezece coloane. Prin urmare, vom putea potrivi două miniaturi Dribbble pe un rând al aspectului nostru în acest moment.
La poală breakpoint, coloană-4 - tur dictează că fiecare bloc va avea patru coloane, de aici vom putea să se potrivească trei pe un rând.
Să presupunem că vrem să facem grila un pic mai dinamică. Iată un exemplu de rând cu grilă care utilizează lățimea automată și lățimea variabilă.
Notă: în punctul de întrerupere a peretelui, avem de fapt o rețea cu cinci; acest lucru nu ar fi posibil în mod normal cu un sistem de douăsprezece grilă fără clase personalizate, întrucât doisprezece nu este divizibil cu cinci. Cu toate acestea, cu Flexbox, lățimea coloanelor poate fi calculată cu ușurință automat.
Acum, dacă avem o structură de rețea, să scriem codul necesar pentru a aduce conținutul nostru Dribbble. Vom folosi pluginul jQuery Jribbble. Puteți lua sursa de la GitHub. Jribbble va face extrem de ușor să trageți fotografii din Dribbble.
Includeți Jribbble într-un fișier separat JS sau în partea superioară a acestuia script.js. Sub Jribbble, acest cod va aduce fotografiile dorite Dribbble.
(funcția () var playerId = "envato"; $ .jribbble.getShotsByPlayerId (playerId, funcția (date) var shots = data.shots; var h = "; h + = '„; h + = '„; ); $ (“Dribbble-shots.) Html (h).; ); ());„; h + = '
Ne întoarcem mai întâi codul într-o expresie de funcții invocată imediat, care ne asigură că ne protejăm scopul JavaScript. Apoi, ne-am stabilit ID-ul jucătorului și, ulterior, îl folosim pe Jribbble pentru a aduce imaginile noastre. Odată ce avem fotografiile noastre, construim html-ul prin iterarea fiecărui foc și umplem un element cu clasa dribbble-fotografii cu html.
Structura HTML ar trebui să arate astfel:
Dribbble Shots
Rețineți că am inclus și un font Google.
În continuare, vom oferi un stil minimal în style.css:
corp font-family: 'Maven Pro', sans-serif; fundal-culoare: # f1faff; h1 font-greutate: 400; * [clasa ^ = coloana] / * max-height: 100px; * / overflow: hidden; margin-bottom: 12px; * [clasa ^ = coloana] img width: 100%; .container width: 80%; marja: 0 auto; poziție: relativă; padding-top: 100px; a display: block; opacitate: 0,9; a: mutați opacity: 1;
Produsul dvs. final ar trebui să arate similar cu acesta:
Flexboxgrid oferă o soluție de rețea foarte flexibilă care permite un control foarte interesant asupra distanței, dimensionării, afișării și chiar ordonării elementelor. Când este combinat cu conținut convingător, Flexboxgrid vă permite să faceți cu ușurință ceea ce a fost mult mai complicat anterior cu grila.
Accentsconagua
„; h + = '