Sfat rapid Cum să construiți un layout blog cu Bulma

În acest sfat rapid, vom folosi Bulma, un cadru CSS bazat pe Flexbox, bazat pe Flexbox, de Jeremy Thomas, pentru a construi un aspect de blog receptiv.

Ca de obicei, pentru a obține o idee inițială a ceea ce vom crea, aruncăm o privire la demo-ul asociat Codepen (consultați versiunea mai mare pentru o experiență mai bună):

Noțiuni de bază cu Bulma

Bulma necesită doar un singur fișier CSS. Puteți obține o copie a acestui fișier accesând pagina GitHub, printr-un manager de pachete (de exemplu, npm) sau un CDN (de exemplu, cdnjs). 

Pentru acest tutorial, vom alege ultima opțiune. Deci, vom plasa o legătură la fișierul necesar în cadrul  din documentul nostru HTML:

Acum, suntem gata să începem să construim structura blogului!

Construirea layoutului

Grila noastră va avea o lățime maximă și va fi centrat orizontal. Pentru a realiza acest lucru, folosim Bulma secțiune și recipient clase ajutatoare:

Pe ecrane mici, toate articolele trebuie să fie așezate vertical, după cum urmează:

Implicit, Bulma, care este proiectată pentru prima dată pe mobil, plasează articolele unul peste celălalt sub lățimea ferestrei de vizualizare de 769 px. Tot ce trebuie să facem este să construim aspectul blogului când fereastra de vizualizare depășește 768 de pixeli.

Pentru a face acest lucru, avem nevoie de un singur element: ţiglă. Așa cum veți vedea într-un moment, truc este de a cuibărit mai multe elemente de țiglă.

Având în vedere acest lucru, să aruncăm o privire mai atentă la aspectul desktopului dorit. După cum puteți vedea din următoarea vizualizare, aceasta cuprinde trei rânduri:

Pentru fiecare rând, Bulma așteaptă cel puțin următoarea ierarhie imbricată:

țiglă este un strămoș | └─────────────────────┘ └───────────────────┘

Să explicăm:

• Începem cu o țiglă de nivel superior care conține toate celelalte plăci.
• În interiorul acestuia, adăugăm plăci care sunt distribuite pe axa orizontală. În plus, pe baza unei douăsprezece grile de coloane, putem stabili o lățime specifică pentru aceste elemente. Acest lucru este posibil prin utilizarea funcției este-* clase unde * este un număr între 1 și 12. De exemplu, o țiglă cu este-6 clasa va ocupa 50% din spațiul orizontal.
• Pentru a stivui dale verticale, folosim este verticala clasă.
• Odată ce dorim să adăugăm conținut la o țiglă, îi atribuim este copil clasa la ea și este părinte clasă la țigla mamă.

În acest moment suntem gata să punem această teorie în practică.

Rândul # 1

Primul rând conține trei coloane. Prima și a treia coloană ocupă o lățime a lățimii rândului, iar cea de-a doua ocupă o jumătate din lățimea rândului. În plus, a treia coloană este formată din două coloane copil.

Pe baza a ceea ce am discutat mai sus, iată marcajul cerut:

Observați că definim o lățime specifică numai pentru a doua coloană prin este-6 clasă. Desigur, dacă vrem, putem adăuga este-3 clasa la prima și a treia coloană. Dar acest lucru nu este necesar deoarece ambele coloane cresc (au flex-creste: 1) Pentru a partaja spațiul orizontal rămas.

Mai mult decât atât, doar pentru stil, atribuim câteva clase personalizate fiecărui articol. Și pentru simplitate, am omite conținutul articolelor.

Rândul # 2

Similar rândului 1, al doilea rând conține trei coloane. Primul ocupă o jumătate din lățimea rândului, în timp ce al doilea și al treilea ocupă un sfert din lățimea rândului. Mai mult, a doua coloană include două coloane pentru copii.

Iată marcajul asociat:

Rândul # 3

Al treilea rând este un pic mai complicat; aici avem două coloane. Primul este de două ori mai mare decât cel de-al doilea. În prima coloană, avem două sub-rânduri. Primul sub-rând conține trei coloane de dimensiuni egale, în timp ce al doilea sub-rând include două coloane de dimensiuni egale.

Marcajul pentru acest caz este următorul:

După cum veți vedea din codul de mai sus, ierarhia imbricată arată astfel:

țiglă este un strămoș | ├────────────────────────────────────────────────────────────── | | ├────────────────────────────────────────────────────────────────────────── | | | | | | | └────────────────────┘ | | | | | | | └────────────────────┘ | | | | └─────────────────────┘ | └────────────────────┘ | | └────────────────────────────────────────────────────────────────────────── | | | | └────────────────────┘ | | └─────────────────────┘ └────────────────────┘ └─────────────────────────────────────────────────┘

Dacă doriți să obțineți o idee mai bună despre modul în care funcționează elementul țiglă, asigurați-vă că ați verificat documentația, precum și că utilizați instrumentele de dezvoltare ale browserului dvs. preferat pentru a inspecta clasele asociate.

Suport pentru browser

În prezent, Flexbox are un suport foarte bun, iar aspectul blogului nostru ar trebui să funcționeze în toate browserele moderne.

Cu toate acestea, în timp ce testez pagina în diferite browsere, am constatat că IE 11 nu a produs rezultatul dorit. Iată ce văd:

Pe de altă parte, testarea cu Microsoft Edge nu am întâmpinat aceste probleme. Poate că este un fel de bug cu cele mai recente versiuni ale IE. În orice caz, am încercat să văd dacă există o soluție rapidă care să evite aceste probleme. 

Am rezolvat-o adăugând flex-bază: auto a articolelor și a dalelor de nivel superior este verticala țiglă din al treilea rând (a se vedea ierarhia anterioară).

Din nou, aceasta este o soluție rapidă care pare să funcționeze pentru acest exemplu. Pentru implementările proprii, va trebui să faceți alte modificări în codul dvs..

Concluzie

În acest sfat rapid, am învățat cum să construim o rețea responsabilă de bloguri cu Bulma, un cadru construit pe partea de sus a Flexbox. 

Ați încercat vreodată Bulma în oricare dintre proiectele dvs.? Ce crezi despre? Distribuiți experiențele dvs. în comentariile de mai jos.