Sidelayout

Skjermstørrelser

Layouten er tilpasset mobile enheter. Vi bruker bootstrap sine responsive breakpoints for å tilpasse sidene til 3 ulike skjermstørrelser:

• På store skjermer vises navigasjonsmenyen i venstre spalte.

• På mindre skjermer er navigasjonsmenyen skjult bak en hamburgermeny.

• På de aller minste skjermene flyter hamburgerknappen oppå innholdet slik at den ikke opptar dyrebar skjermplass.

Rent konkret bruker vi disse breakpoints:

Breakpoint	Brukes typisk på	Kjennetegn
xs	Mobiltelefon høydeformat	Halvgjennomsiktig hamburgerknapp Veldig liten venstremarg Hamburgerknappen flyter oppå innholdet Bakgrunnen er lys grå, men med hvit bakgrunn i figurer
sm	Mobiltelefon breddeformat	Ugjennomsiktig hamburgerknapp Bredere venstremarg Hamburgerknappen ligger i margen Bakgrunnen er helt hvit
md	Nettbrett høydeformat
lg	Nettbrett breddeformat	Full meny som kan lukkes Erstattes da av en hamburgerknapp
xl	Bærbar PC

Skillet mellom å vise full navigasjonsmeny eller skjule den bak en hamburgerknapp er lagt mellom md og lg for at nettbrett-brukere enkelt skal kunne velge om de ønsker å se menyen eller ikke ved å holde nettbrettet vertikalt eller horisontalt.

Sideoppbygning

Siden består av et <nav>-element (navigasjonsmeny) og et <div>-element (hovedspalten). Navigasjonsmenyen skjules ved å posisjonere den til venstre for det synlige området på skjermen. Den vises/skjules altså ikke ved å sette display: {block|none}; men ved å justere posisjon og marg, henholdsvis:

nav.sidemeny {
    width: 300px;
    position: fixed;
    left: -300px;
}
div.hovedspalte {
    margin-left: 0;
    width: 100%;
}

når den er skjult, med følgende endringer når den er åpen:

nav.sidemeny {
    left: 0px;
}
div.hovedspalte {
    margin-left: 300px;
    width: calc(100% - 300px);
}

Her bruker vi calc() for å kunne sette bredden på hovedspalten til 300px smalere enn hva nå skjermen er. Denne funksjonen er forholdsvis ny, men trygg å bruke i følge caniuse.com.

Ved å sette transition: margin-left $delay; får vi samtidig animert menyen når den klikkes på, slik at den sklir inn og ut fra venstre skjermkant med passende hastighet.

Hovedspalten

Hovedspalten <div class="hovedspalte"> består av et <nav>-element (brødsmulestien) og et <article>-element med hovedinnholdet på siden i.

For at innholdet skal være lesbart og siden skal se pen ut må det settes max-width for å begrense linjelengde, samt passende venstre/høyremarg.

Vanligvis gjøres dette på det ytterste container-elementet (div.hovedspalte er nødt til å arve fra Bootstrap sin .container-fluid, jf. Bootstrap-dokumentasjonen, og da får den også med left/right padding).

Vi ønsker imidlertid å ha muligheten til å la enkeltblokker gå helt ut i skjermkanten, f.eks at bilder, figurer og andre bokstyper under noen omstendigheter vises uten padding/marg på venstre eller høyre side. Dette er spesielt relevant for små skjermer.

For å få til dette har vi:

• Fjernet left/right-paddingen som div.hovedspalte arver fra .container-fluid, altså overstyrt denne til å være 0. Hovedspalten dekker dermed hele sidebredden uten marg.

• Satt left/right-padding på hvert enkelt element inne i hovedspalten i stedet. Hovedspalten inneholder avsnittselementer <section>, som igjen inneholder blokkene som skal paddes, så paddingen er satt på direkte barn av avsnittene ved hjelp av CSS-regelen div.hovedspalte article.innhold section > *. Denne regelen vil gjelde alle HTML-elementer som er immediate/direct child av <section> og som ikke overstyrer paddingen selv. Alle innholdsblokker får dermed passende marger automatisk, uten å måtte sette margene selv. For avsnittsblokkene rendres <section> av section-templaten, mens de andre blokkene (ingress, lenkeboks nederst på siden, etc.) må omsluttes med dette elementet i hovedtemplaten for Artikkel-klassen.

Innholdsblokker som ønsker å dekke hele skjermbredden kan da i sin egen CSS overstyre left/right-padding med en enda mer spesifikk CSS-regel. Dette hadde ikke vært mulig hvis paddingen lå på foreldreelementet <article>.

Likedan setter vi max-width på immediate children av <article>, for at alle innholdsblokkene skal ha en felles maksimal linjelengde for tekst. Hadde max-width blitt satt på foreldreelementet <article>, kunne ikke innholdsblokkene dekket hele skjermbredden på en bred skjerm. Dette hadde blitt veldig synlig hvis en innholdsblokk bruker en annen bakgrunnsfarge. max-width må dermed settes i rem, ikke em, siden den nå settes på elementer med forskjellig skriftstørrelse (h1/h2/h3, div, aside, etc.).