Demo flexibele kolommenlayout

Deze pagina geeft een voorbeeld van de flexibele kolommenlayout. De kleuren zijn extreem, maar dat is om even het onderscheid te duiden van de te bewerken elementen. 

Het zwarte is de 'row'. Die is op desktop zichtbaarder dan op mobiel, maar daar doen we eigenlijk niet heel veel meer mee dan de kleur geven die we willen. 

Het rode is de 'container'. De container is het kader rondom alle inhoud. (Titel + alle kolommen binnen deze paragraaf). Die geven we de gewenste kleur, en als de kleur afwijkt van de kleur van de row is het leuk om deze ook een borderRadius te geven. Ook krijgt hij een klein beetje padding, want anders staan je kolommen en je titel helemaal tegen de rand. 

Het witte zijn de kolommen zelf. Die kan je niet individueel stylen, maar die geef je 1 generieke styling mee. In dit geval heb ik die een witte achtergrondkleur gegeven, een klein beetje padding en ronde hoeken. We kunnen de tekstkleur wel al aanpassen, maar de H2 en H3 kleuren nog niet. We zijn het aan het ontwikkelen dat je binnen 1 zo'n flexibele layout alle html-elementen kunt stylen, maar dat duurt nog even voordat dat af is. 

De titel van je kolommenlayout (wordt niet altijd gebruikt) kunnen we een kleur geven, en we kunnen de padding / margin van de titel aanpassen. 

De opbouw van de kolommen (hoe breed is elke kolom?) kunnen we ook instellen en daar zijn we volledig flexibel in. Voor mobiel zeggen we eigenlijk altijd dat het 1 kolom breed is, voor desktop kunnen we daar natuurlijk creatiever mee zijn. 

Aan de achterkant heb ik de breedte van deze kolommenlayout op 10 gezet. Dat betekent dat hij het beeld in 10 gelijke delen verdeelt. Daarna heb ik ingesteld hoeveel delen elke kolom krijgt. 
Kolom 1 heeft 3, kolom 2 heeft 7 delen. Samen maakt dat 10 en dan is de eerste rij vol. 
Kolom 3 en 4 hebben allebei 5 delen. 
Kolom 5, 6 en 7 hebben een verdeling van 3-3-4
Kolommen 8-12 hebben allemaal 2 delen. 

Daarna herhaalt hij dat patroon. Dus krijgen kolom 13 en 14 weer 3 / 7. 

Dit is heel extreem en ga je in de praktijk eigenlijk nooit op die manier gebruiken. 
Ter referentie: bij het nieuwsbericht heb ik de breedte ingesteld op 2. Kolom 1 krijgt daarbij ook de waarde 2, kolom 2 en 3 allebei waarde 1. 

Het is een vrij ingewikkeld verhaal, maar als jullie er behoeften aan hebben kan ik dit nog een keer in een teamscall uitleggen. :-) 

Dit is een voorbeeld om te laten zien hoe het werkt

Kolom 1

Kolom 2

Kolom 3

Kolom 4

Kolom 5

Kolom 6

Kolom 7

Kolom 8

Kolom 9

Kolom 10

Kolom 11

Kolom 12

Kolom 13

Kolom 14