Editor X: Kiezen tussen flexbox en op rasters gebaseerde tools

Editor X biedt verschillende indelingstools die je kunt gebruiken om je elementen te ordenen, die allemaal verschillende doelen dienen. Deze tools zijn eigenlijk gebaseerd op twee veelvoorkomende CSS-technologieën – Raster en Flexbox – wat belangrijk is om in gedachten te houden bij het plannen van complexe composities. 

Een raster is een tweedimensionaal CSS-model dat je ook in Editor X kunt vinden. De twee dimensies zijn de kolommen en rijen. Bij het ontwerpen van grote responsieve indelingen helpen rasters je de structuur van de elementen te bepalen zoals ze in je vooraf gedefinieerde cellen worden geplaatst. 

Het Raster-element in Editor X is een echt CSS-raster, dus je kunt het gebruiken om complexe indelingen te maken terwijl je hun responsieve gedrag definieert. Je kunt voor elk breekpunt het aantal of de grootte van de kolommen/rijen kiezen, zodat de compositie altijd pixel-perfect is.

Bij het instellen van de grootte van je kolommen, rijen en lege ruimtes, zijn er veel vaste en vloeiende metingen die je kunt gebruiken zoals px, percentage, fr en meer.

Een container is de eenvoudigste indelingstool om composities te maken. Je kunt elementen aan deze container vastmaken, zodat het automatisch hun parent-element wordt en hun structuur definieert. Dit is een goed hulpmiddel voor het maken van 'zelfstandige' composities die kleiner moeten zijn dan een onderdeel. 

Een pagina-onderdeel is ook een container, dus het definieert de structuur van eventuele onderliggende elementen die eraan zijn gekoppeld. Je kunt ervoor kiezen om een raster op je onderdeel toe te passen of de elementen naar wens te positioneren. 

Flexbox is een eendimensionaal CSS-model dat we in Editor X gebruiken voor de meeste van onze indelingstools. In deze tools worden elementen automatisch aangepast (flex) om in de ruimte in het parent-element te passen, of het nu terugloopt, uitzet om de ruimte op te vullen of krimpt om in de ruimte te passen.

Een stapel is een transparante flex-container die elementen bevat die in een verticale volgorde zijn geplaatst. Je kunt bijvoorbeeld meerdere tekstvakken stapelen, of een tekstelement met een knop eronder stapelen. Stapelen houdt de marges tussen elementen intact en voorkomt dat elementen elkaar overlappen op kleinere schermen.

Een layouter is een flexibele container die meerdere items kan bevatten in een indeling naar keuze. De items van de Layouter zijn containers, dus je kunt elementen in een vrije compositie toevoegen of een raster toepassen als je het meer wilt structureren. 

Het enige wat je hoeft te doen is een weergavetype te kiezen (bijvoorbeeld Schuifregelaar, Mozaïek, Kolommen) en de layouter doet de rest: je items lopen zo terug dat ze er op elk breekpunt goed uitzien. Dat gezegd hebbende, kun je voor elke viewport een ander weergavetype kiezen (schuifindelingen werken bijvoorbeeld prima voor mobiele apparaten).

Een herhaler (repeater) is een flexibele container die meerdere items kan bevatten in een indeling naar keuze. Herhalers zijn ideaal wanneer je wilt dat elk item dezelfde indeling en hetzelfde ontwerp heeft, maar verschillende inhoud, zoals lijsten. De indeling en het ontwerp worden automatisch aangepast, zodat je je nooit zorgen hoeft te maken over de samenhang. 

Wat herhalers echt uniek maakt, is de mogelijkheid om ze aan je inhoudsverzamelingen te koppelen. Hierdoor kun je de inhoud vanaf de back-end beheren en bijwerken zonder het daadwerkelijke ontwerp te beïnvloeden. 

Voordat je een van onze tools selecteert, moet je de gewenste indeling voor elke schermgrootte plannen. Vervolgens kun je een indelingstool kiezen die de mogelijkheden bevat die je nodig hebt. 

Klik hieronder om meer te lezen over enkele belangrijke verschillen tussen indelingstools in Editor X: