Snabbtips Hur man bygger en blogglayout med Bulma

I det här snabba tipset kommer vi att använda Bulma, en populär Flexbox-baserad CSS-ram av Jeremy Thomas, för att skapa en responsiv blogglayout.

Som vanligt, för att få en första uppfattning om vad vi ska skapa, ta en titt på den associerade Codepen demo (kolla in den större versionen för en bättre upplevelse):

Komma igång med Bulma

Bulma kräver bara en enda CSS-fil. Du kan ta en kopia av den här filen genom att besöka sin GitHub-sida via en pakethanterare (t ex npm) eller en CDN (t ex cdnjs). 

För den här handledningen väljer vi det sista alternativet. Så lägger vi en länk till den obligatoriska filen inom  av vårt HTML-dokument:

Nu är vi redo att börja bygga blogglayouten!

Bygga layouten

Vårt galler har maximal bredd och kommer att centreras horisontellt. För att uppnå detta använder vi Bulma s sektion och behållare hjälperklasser:

På små skärmar ska alla artiklar staplas vertikalt, så här:

Som standard placerar Bulma, som är designad mobilt, först artiklarna ovanpå varandra under visningsbredd på 769px. Allt vi behöver göra är att bygga blogglayouten när visningen överstiger 768px.

För att göra det behöver vi bara ett element: bricka. Som du ser på ett ögonblick är tricket att hyra flera kakelelement.

Med det i åtanke, låt oss se närmare på önskad skrivbordslayout. Som du kan se från följande visualisering omfattar den tre rader:

För varje rad förväntar Bulma åtminstone följande nestade hierarki:

kakel är-förfader | └───tile är förälder | └───tile är-barn

Låt oss förklara att

• Vi börjar med en högsta kakel som innehåller alla andra plattor.
• Inom den lägger vi till plattor som är fördelade på den horisontella axeln. Plus, baserat på ett tolv kolumngrid, kan vi ange en viss bredd för dessa element. Detta är möjligt genom att använda är-* klasser var * är ett tal mellan 1 och 12. Till exempel en kakel med är-6 klassen kommer att uppta 50% av det horisontella utrymmet.
• För att stapla plattor vertikalt använder vi är-vertikal klass.
• När vi vill lägga till innehåll på en kakel, tilldelar vi är-barn klass till den och den är-förälder klass till moderplattan.

Vid denna tidpunkt är vi redo att lägga den här teorin i praktiken.

Rad # 1

Den första raden innehåller tre kolumner. Den första och tredje kolumnen upptar en fjärdedel av radens bredd, medan den andra tar upp hälften av radens bredd. Dessutom består den tredje kolumnen av två barnkolumner.

Baserat på vad vi har diskuterat ovan är här den obligatoriska markeringen:

Observera att vi definierar en specifik bredd endast för den andra kolumnen via är-6 klass. Om vi ​​vill kan vi naturligtvis lägga till är-3 klass till den första och tredje kolumnen också. Men detta är inte nödvändigt eftersom båda kolumnerna växer (de har flex-grow: 1) För att dela det återstående horisontella utrymmet.

Dessutom, bara för styling, tilldelar vi några anpassade klasser till varje artikel. Och för enkelheten släpper vi ut innehållets innehåll.

Rad # 2

På samma sätt som den första raden innehåller den andra raden tre kolumner. Den första upptar hälften av radens bredd, medan den andra och den tredje tar upp en fjärdedel av radens bredd. Vidare innehåller den andra kolumnen två barnkolumner.

Här är relaterad markering:

Rad # 3

Den tredje raden är lite mer komplicerad; här har vi två kolumner. Den första är dubbelt så stor, i förhållande till den andra. Inom den första kolumnen har vi två underrader. Den första underraden innehåller tre lika stora kolumner, medan den andra underraden innehåller två lika stora kolumner.

Markeringen för detta fall är följande:

Som du ser från koden ovan ser den kapslade hierarkin ut så här:

kakel är-förfader | ├───tile är-8 är-vertikal | | | ├───tile / * Extra klass för IE * / | | | | | ├───tile är förälder | | | └───tile is-child | | | | | ├───tile är förälder | | | └───tile is-child | | | | | └───tile är förälder | | └───tile is-child | | | └───tile / * Extra klass för IE * / | | | ├───tile är förälder | | └───tile is-child | | | └───tile är förälder | └───tile is-child | └───tile är förälder └───tile is-child

Om du vill få en bättre uppfattning om hur kakelelementet fungerar, var noga med att kolla in dokumentationen och använda verktyget för din favoritbläsares utvecklarverktyg för att inspektera de tillhörande klasserna.

Browser Support

Nuförtiden Flexbox har verkligen bra stöd, och vår blogg layout borde därför fungera i alla moderna webbläsare.

Men medan jag testade sidan i olika webbläsare fann jag att IE 11 inte gav det önskade resultatet. Här är vad jag såg:

Å andra sidan stötte inte testning med Microsoft Edge jag på dessa problem. Kanske är det något slags fel med de senaste versionerna av IE. Hur som helst försökte jag se om det fanns någon snabb fix som skulle undvika dessa problem. 

Jag löste det genom att lägga till flex-basis: auto till artiklarna och toppens kakel av är-vertikal kakel av den tredje raden (se tidigare hierarki).

Återigen är det en snabb lösning som verkar fungera för det här exemplet. För dina egna implementeringar kan du behöva göra några andra ändringar i din kod.

Slutsats

I det här snabba tipset lärde vi oss att bygga ett lyhörd blogg med Bulma, en ram byggd ovanpå Flexbox. 

Har du någonsin försökt Bulma i något av dina projekt? Vad tycker du om det? Dela dina erfarenheter i kommentarerna nedan.