Deze post is bedoeld voor mede-webdesigners en developers: De laatste tijd loop ik er veel tegenaan dat we custom lay-outs moeten bouwen in een systeem dat zelf de HTML structuur van de elementen bepaalt (o.a WordPress). Uiteraard kun je ook in WordPress zelf vergaande controle uitoefenen over je templates. Je kunt er voor kiezen alles van de grond af opbouwen, maar vaak gebiedt de snelheid waarmee een website live moet komen te staan (lees: het budget) ook dat er efficiënt gebruik moet worden gemaakt van gestandaardiseerde templates. Eerlijk is eerlijk: meer custom templates = meer onderhoud in de toekomst en dus kost het meer tijd = geld. Echter wil je als ontwerper wel de vrijheid houden om de lay-out aan te passen, anders worden al je websites een soort eenheidsworst. Vaak komt het er op neer dat de volgorde van de items op een of andere manier moet worden gewijzigd.

Flexbox inzetten voor lineaire layouts

Met flexbox is dit erg gemakkelijk. Wij gebruiken Sass om onze CSS te compileren en zodoende hebben we door de jaren heen een mooie mobile-first workflow gecreëerd waarmee we makkelijk wijzigingen in de lay-out kunnen maken. Flexbox kun je met deze mixins gemakkelijk gebruiken om lineaire items uit te lijnen. D.w.z items die in een rij of een kolom kunnen staan. Voor uitlijning van items over meerdere rijen of kolommen (vlakken) raden we aan om css-grid te gebruiken i.p.v flexbox. De twee zijn gewoon samen te gebruiken.

Waarom mixins?

In het volgende voorbeeld laat ik zien welke mixins ik standaard in mijn _mixins.scss gebruik en hoe je dit kunt gebruiken om items gemakkelijk uit te lijnen en te plaatsen zoals je dat in je ontwerp hebt bedacht. Het is niet alleen de keuze van een opgeruimde stylesheet, maar het gebruik van mixins geeft je ook veel beter de mogelijkheid om je code up-to-date te houden. Zo kun je gemakkelijk aanpassingen doen aan 1 mixin (mocht er iets veranderen op het gebied van standaarden en compatibiliteit). Hierbij de code, doe ermee wat je wilt!

See the Pen Flexbox Mixins by Vita (@vitavanderlijke) on CodePen. 0