Share
In deze snelle tip gaan we Bulma gebruiken, een populair Flexbox-gebaseerd CSS-framework van Jeremy Thomas, om een responsieve bloglayout te bouwen.
Zoals gewoonlijk, om een idee te krijgen van wat we gaan maken, bekijk je de bijbehorende Codepen-demo (bekijk de grotere versie voor een betere ervaring):
Bulma vereist slechts één CSS-bestand. Je kunt een kopie van dit bestand pakken door naar de GitHub-pagina te gaan, via een pakketbeheerder (bijvoorbeeld npm) of een CDN (bijvoorbeeld cdnjs).
Voor deze zelfstudie kiezen we de laatste optie. Dus plaatsen we een link naar het vereiste bestand binnen de van ons HTML-document:
Nu zijn we klaar om te beginnen met het bouwen van de bloglayout!
Ons raster heeft een maximale breedte en wordt horizontaal gecentreerd. Om dit te bereiken, gebruiken we Bulma's sectie en houder helper klassen:
Op kleine schermen moeten alle artikelen verticaal worden gestapeld, zoals dit:
Standaard plaatst Bulma, dat eerst mobiel is ontworpen, de artikelen boven elkaar onder viewport-breedten van 769 px. Het enige dat we moeten doen, is de blog-lay-out te bouwen wanneer het kijkvenster 768 px overschrijdt.
Om dat te doen, hebben we slechts één element nodig: het tegel. Zoals je zo zult zien, is het de kunst om meerdere tegelelementen te nesten.
Met dat in gedachten, laten we de gewenste bureaubladindeling van dichterbij bekijken. Zoals u kunt zien in de volgende visualisatie, bestaat deze uit drie rijen:
Voor elke rij verwacht Bulma op zijn minst de volgende geneste hiërarchie:
tile is-ancestor | └────tile is-ouder | └────tile is-kind
Laten we dat uitleggen:
Accentsconagua
is- * klassen waar * is een getal tussen 1 en 12. Bijvoorbeeld een tegel met de is-6 klas zal 50% van de horizontale ruimte innemen.is-vertical klasse.is-kind klasse en de is ouder klasse naar de bovenliggende tegel.Op dit moment zijn we klaar om deze theorie in de praktijk te brengen.
De eerste rij bevat drie kolommen. De eerste en derde kolom nemen een vierde van de rijbreedte in beslag, terwijl de tweede de helft van de rijbreedte beslaat. Bovendien bestaat de derde kolom uit twee onderliggende kolommen.
Op basis van wat we hierboven hebben besproken, hier is de vereiste markup:
Merk op dat we alleen een specifieke breedte definiëren voor de tweede kolom via de is-6 klasse. Natuurlijk kunnen we, als we willen, de is-3 klasse ook naar de eerste en derde kolom. Maar dit is niet nodig omdat beide kolommen groeien (ze hebben flex-groei: 1) Om de resterende horizontale ruimte te delen.
Bovendien kennen we voor elk ontwerp een paar aangepaste klassen toe aan elk artikel. En omwille van de eenvoud, laten we de inhoud van de artikelen weg.
Vergelijkbaar met de eerste rij, bevat de tweede rij drie kolommen. De eerste beslaat de helft van de rijbreedte, terwijl de tweede en derde een kwart van de rijbreedte innemen. Verder bevat de tweede kolom twee onderliggende kolommen.
Dit is de gerelateerde opmaak:
De derde rij is iets gecompliceerder; hier hebben we twee kolommen. De eerste is twee keer zo groot ten opzichte van de tweede. Binnen de eerste kolom hebben we twee subrijen. De eerste deelrij bevat drie even grote kolommen, terwijl de tweede deelrij twee even grote kolommen bevat.
De opmaak voor deze case is als volgt:
Zoals u kunt zien in de bovenstaande code, ziet de geneste hiërarchie er als volgt uit:
tile is-ancestor | ├────tile is-8 is-verticaal | | | ├───tile / * Extra klasse voor IE * / | | | | | ├────tile is-ouder | | | └────tile is-kind | | | | | ├────tile is-ouder | | | └────tile is-kind | | | | | └────tile is-ouder | | └────tile is-kind | | | └───tile / * Extra klasse voor IE * / | | | ├────tile is-ouder | | └────tile is-kind | | | └────tile is-ouder | └────tile is-kind | └─────tile is-ouder └────ile is-child
Als u een beter idee wilt krijgen van hoe het tile-element werkt, moet u de documentatie lezen en de ontwikkelaarstools van uw favoriete browser gebruiken om de bijbehorende klassen te inspecteren..
Tegenwoordig heeft Flexbox echt geweldige ondersteuning en daarom zou onze blogopmaak in alle moderne browsers moeten werken.
Hoewel ik de pagina in verschillende browsers aan het testen was, ontdekte ik dat IE 11 niet het gewenste resultaat opleverde. Dit is wat ik zag:
Aan de andere kant zijn tests met Microsoft Edge I deze problemen niet tegengekomen. Misschien is het een soort bug met de nieuwste versies van IE. Hoe dan ook, ik probeerde te zien of er een snelle oplossing was om deze problemen te voorkomen.
Ik heb het opgelost door toe te voegen flex-basis: automatisch naar de artikelen en de bovenste tegels van de is-vertical tegel van de derde rij (zie vorige hiërarchie).
Nogmaals, dit is een snelle oplossing die lijkt te werken voor dit specifieke voorbeeld. Voor uw eigen implementaties moet u misschien nog wat andere wijzigingen in uw code aanbrengen.
In deze snelle tip hebben we geleerd hoe we een responsief blograster kunnen bouwen met Bulma, een framework dat bovenop Flexbox is gebouwd.
Heb je ooit Bulma geprobeerd in al je projecten? Wat denk je er van? Deel uw ervaringen in de opmerkingen hieronder.
