Miles grid

Miles grid-et består av 12 kolonner som skalerer til skjermbredden.

Fig.1

Blokkbredder – modulering

Standard bredde på blokkene når de settes inn på siden er 8 kolonner, sentrert. Noen blokker har alltid full bredde som Cover Blokk og Large Banner. Blokkene kan justeres på to måter i themet, ved hjelp av Gutenberg Blokk-UI-et eller ved å legge Blokkene kan -justeringene kan gjøres på to måter i Miles themet:

1. Gutenberg Blokk UI-et

Med standard Blokk UI-et kan man velge full-, wide-, venstre- eller høyrejustering

  • Wide – 10 kolonner. Funker bra for video- og bilde-blokker, og er brukt til to kolonn-modulen når den har to kolonner med tekst (trenger eksempel ( lenke).
  • Full – 12 kolonner. Standard for bl.a. Cover- og Large Banner blokkene. Typisk brukt på image elementet for å skape en full-bredde bilde-hero.
  • Left – brukes til justering av feature-blokken, i tillegg til standard Gutenberg modulene
  • Center – ikke i bruk
  • Right – Left – brukes til justering av feature-blokken, i tillegg til standard Gutenberg modulene
Venstre- og høyrejustert feature blokker i front-end.
Høyrejustert blokk i editoren (Align RIght)

2.Tillegg: Custom CSS-klasser

I tillegg er det laget custom CSS-klasser som kan modulere blokkene horisontalt i forhold til de 12 kolonnene:

  • push-1 – skyver blokken 1 kolonne til venstre
  • push-2 – skyver blokken 2 kolonner til venstre
  • pull-1 – trekker blokken 1 kolonne til venstre
  • pull-2 – trekker blokken 2 kolonner til venstre

Og noen klasser for eventuelt å justere vertikal avstand mellom blokkene:

  • top-padding – legger til 2U ekstra vertikal avstand
  • collapse – Fjerner / minimerer vertikal avstand
‘pull-1’ klassen lagt til
‘push-1’ og ‘top-padding’ klassene lagt til under “advanced > additional CSS classes”