Share
I dette raske tipset skal vi bruke Bulma, et populært Flexbox-basert CSS-rammeverk av Jeremy Thomas, for å bygge en responsiv bloggoppsett.
Som vanlig, for å få en innledende ide om hva vi skal skape, ta en titt på den tilknyttede Codepen-demoen (sjekk ut den større versjonen for en bedre opplevelse):
Bulma krever bare en enkelt CSS-fil. Du kan ta en kopi av denne filen ved å besøke sin GitHub-side, gjennom en pakkebehandling (for eksempel npm) eller en CDN (for eksempel cdnjs).
For denne opplæringen velger vi det siste alternativet. Så, legger vi en lenke til den nødvendige filen i av vårt HTML-dokument:
Nå er vi klare til å begynne å bygge bloggoppsettet!
Vårt rutenett vil ha en maksimal bredde og vil være sentrert horisontalt. For å oppnå dette bruker vi Bulma's seksjon og container hjelperklasser:
På små skjermer skal alle artikler stables vertikalt, slik:
Som standard er Bulma, som er designet for første gang, plassert artiklene på hverandre under visningsbredder på 769 px. Alt vi trenger å gjøre er å bygge bloggoppsettet når visningsporten overskrider 768px.
For å gjøre det trenger vi bare ett element: flis. Som du ser om et øyeblikk, er trikset å neste flere fliser.
Med det for øye, la oss se nærmere på ønsket skrivebordslayout. Som du ser fra følgende visualisering, består den av tre rader:
For hver rad forventer Bulma minst følgende nestede hierarki:
flis er-forfader | └───tile er forelder | └───tile er-barn
La oss forklare at:
Accentsconagua
er-* klasser hvor * er et tall mellom 1 og 12. For eksempel en flis med er 6- klassen vil oppta 50% av det horisontale rommet.er vertikal klasse.er-barn klasse til det og er-foreldre klasse til foreldreflisen.På dette punktet er vi klar til å sette denne teorien i praksis.
Den første raden inneholder tre kolonner. Den første og tredje kolonne okkuperer en fjerdedel av radens bredde, mens den andre tar opp en halv av radens bredde. I tillegg består den tredje kolonnen av to barnekolonner.
Basert på hva vi har diskutert ovenfor, her er det nødvendige oppslaget:
Legg merke til at vi bare definerer en bestemt bredde for den andre kolonnen via er 6- klasse. Selvfølgelig, hvis vi vil, kan vi legge til er 3- klasse til første og tredje kolonne også. Men dette er ikke nødvendig fordi begge kolonnene vokser (de har flex-grow: 1) For å dele det gjenværende horisontale rommet.
Dessuten, bare for styling, tilordner vi noen tilpassede klasser til hver artikkel. Og for enkelhet utelater vi innholdet i artiklene.
I likhet med den første raden inneholder den andre raden tre kolonner. Den første inntar en halv av radens bredde, mens den andre og tredje tar opp en fjerdedel av radens bredde. I tillegg inneholder den andre kolonnen to barnekolonner.
Her er relatert oppslag:
Den tredje raden er litt mer komplisert; her har vi to kolonner. Den første er dobbelt så stor, i forhold til den andre. Innenfor den første kolonnen har vi to underrader. Den første underraden inneholder tre like store kolonner, mens den andre underraden inneholder to like store kolonner.
Markeringen for denne saken er som følger:
Som du ser fra koden ovenfor, ser det nestede hierarkiet slik ut:
flis er-forfader | ├───tile er-8 er-vertikal | | | ├───tile / * Ekstra klasse for IE * / | | | | | ├───tile er-forelder | | | └───tile is-child | | | | | ├───tile er-forelder | | | └───tile is-child | | | | | └───tile er forelder | | └───tile is-child | | | └───tile / * Ekstra klasse for IE * / | | | ├───tile er-forelder | | └───tile is-child | | | └───tile er forelder | └───tile is-child | └───tile er forelder └───tile is-child
Hvis du vil få en bedre ide om hvordan fliserelementet fungerer, må du sjekke ut dokumentasjonen, samt bruke utviklerværktøyene til din favorittbrowser for å inspisere tilknyttede klasser.
I dag har Flexbox virkelig god støtte, og bloggens layout må derfor fungere i alle moderne nettlesere.
Imidlertid, mens jeg testet siden i forskjellige nettlesere, fant jeg ut at IE 11 ikke produserte det ønskede resultatet. Her er hva jeg så:
På den annen side møtte ikke testing med Microsoft Edge disse problemene. Kanskje det er en slags feil med de nyeste versjonene av IE. Uansett, prøvde jeg å se om det var noen hurtigreparasjoner som ville unngå disse problemene.
Jeg løste det ved å legge til flex-basis: auto til artiklene og toppnivå fliser av er vertikal flis av tredje rad (se forrige hierarki).
Igjen, dette er en rask løsning som ser ut til å fungere for dette bestemte eksemplet. For dine egne implementeringer må du kanskje gjøre noen andre endringer i koden din.
I dette raske tipset lærte vi å bygge et responsivt bloggnett med Bulma, et rammeverk bygget på toppen av Flexbox.
Har du noen gang prøvd Bulma i noen av prosjektene dine? Hva tenker du om det? Del dine erfaringer i kommentarene nedenfor.
