Grid og layout
Altinn’s responsive brukergrensesnitt er basert på en 12-kolonners grid layout, samt et sett definerte avstander som tar utgangspunkt i 12px som base.
On this page:
Bootstrap grid
Vi har brukt Bootstrap’s responsive gridsystem (fra aplha v4) for å bygge malene. Systemet baserer seg på flexbox. Les mer om grid-systemet hos Bootstrap
Hvordan grid-systemet skal brukes
Dette står også i Bootstraps dokumentasjon, men kort oppsummert består grid-systemet av tre hovedkomponenter: “containers”, “rows”, og “columns”.
- “Containers” sentrerer innholdet på siden.
.container
for fast bredde eller.container-fluid
for full bredde. - “Rows” er horisontale grupper av kolonner som sikrer at kolonnene blir stilt opp riktig.
- “Columns” er barn av “rows” og det er i der inneholdet skal bli plassert.
- En rad (row) må tilsammen utgjøre 12 kolonner. Man kan for eksempel kobinere 4+4+4=12, 3+3+3+3=12, osv..
- Klassenavn på “Columns” indikerer antall kolonner man vil bruke ut av 12 mulige innengfor en “row”. Så hvis du vil ha tre like brede kolonner, vil du bruke klassen
.col-sm-4
. (4 + 4 + 4 = 12) - Kolonnenes bredde blir satt i prosent, så de er alltid fluid og relative til deres forelder.
- Kolonnene har horisontal padding to for å lage avstand mellom hver individuelle kolonne.
- Det er fem grid-nivåer, en for hver responsive breakpoint: : xs, s, m, l, og xl.
Breakpoints
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 544px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
) !default;
CSS3 Media queries
@media blir brukt for å definere ulik stilsetting for ulike medietyper, skjermstørrelser og enheter. CSS-kode som skal være forskjellig på forskjellige skjermstørrelser lages for mobil først - deretter utvider vi for større skjermer. Eksempel:
.a-navbar {
width: 100%;
@include media-breakpoint-up(md) {
width: 300px;
}
}
Les mer på Bootstraps nettsider
Avstander
// SPACE
$spacer : 12px; // 12px
$spacer/2; // 6px
$spacer*1.5; // 18px
$spacer*2; // 24px
$spacer*3; // 36px
$spacer*4; // 48px
$spacer*5; // 60px
$spacer*6; // 72px
Gjenbrukbare klasser for avstander
Klassene refereres til med {property}-{sides}-{size}
F.eks “pr-1” vil sette padding right til 12px. “mt-2” vil sette margin top til 24px. Her kan man også bruke mediaquery-klasser, f.eks ved å sette “pl-md-3” så vil man få en padding left på 36 px for skjermer større enn md (768px).
Les mer på Bootstraps nettsider
Vertikal midtstilling
Når tekst skal sentreres innenfor en ramme, slik som for eksempel på en knapp, skal teksten sentreres basert på høyden til versalene i fonten (de store bokstavene). Slik figuren viser vil dermed avstanden fra toppen av k-en til toppen av knappen være større enn avstanden fra bunnen av p-en til bunnen av knappen.
Interaktive elementer
Av hensyn til ulike brukeres fingerstørrelse og førlighet skal alle interaktive elementer ha touch-target på minimum 48px. Det vil si at selv om en knapp kan se ut som den er 36px høy vil ethvert trykk innenfor 48px utløse knappen.
Dette løses ved å legge til et pseudo-element med en høyde på 48px og sentrere det, se kodeutsnittet under.
&:after {
content: "";
width: 100%;
height: 48px;
position: absolute;
left: 0;
top: -6px;
}