Grid og spacing

GoBasic indeholder en Grid Editor, som er baseret på et drag-and-drop princip. I kan trække moduler ind, dragge dem rundt på sitet i Grid Editoren og definere deres størrelse - helt uden kode.

Grid'ets størrelse og indstillinger

Grid'et i GoBasic består af 12 kolonner. Derudover har grid'et også mulighed for at blive vist i Full Screen, som betyder, at modulet går helt til kanten. I kan se forskellige modulsammensætninger forneden, hvor vi har beskrevet hvilke modulindstillinger vi har brugt i jeres grid.

Inner grid i Full Width

Her ses et Inner Grid i Full Width, hvor selve grid'et går helt til browserens kant. På den måde kan man skabe et bånd som har en baggrundsfarve der farver hele browserens bredde.

12 spalter i alt

Her ses en Multi Box der er 4 spalter bred med med 3 spalters luft til venstre, og en anden Multi Box der er 2 spalter med, med 3 spalters luft til højre. Dette giver i alt 12 spalter, og fylder altså hele grid'ets bredde ud.

Egestas Purus

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec sed odio dui.

Vestibulum Condimentum

Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. 

Spacers

I kan nemt skabe luft på jeres site ved at bruge "spacer" modulet. Til jeres design vil vil anbefale at bruge et Spacer modul på 40 pixels. I fastsætter denne værdi i selve modulet.

Grid gutter

Grid'ets gutter udgør afstanden mellem moduler. I jeres design er jeres grid gutter 20 pixels, så afstanden horisontalt mellem to moduler altid vil være den samme:

1

2

3

Responsivitet

GoBasic grid'et er responsivt. Det vil sige, at modulerne ændrer størrelse, når browseren gør det. På mobil vil alle moduler fylde 12 kolonner, og bevare fuld bredde hvis de er indstillet til dette. På tablet vil jeres grid opføre sig på samme måde, som på desktop.