Eksempler og dokumentasjon

En liten introduksjon

Materialize css

Her er en liten oversikt over alle de mulighetene som ligger i dette modulære oppsettet. vi har brukt Materialize css som utgangspunkt, men skrevet dette om og lagt til nye moduler og stiler for å få et best mulig utgangspunkt for en hvilken som helst nettside

Fordelen ved å ta utgangspunkt i et rammeverk som dette er mange, men det som deg som sluttbruker kommer til å ha størst utbytte av, er hvor godt det er testet.

Et rammeverk av denne størrelsen har gått gjennom mange faser, hvor selv de merkeligste feilene for lengst er luket ut, og igjen gir økt brukeropplevelse hos brukeren.

Materialize css er laget for å dekke så mange brukerscenarier som mulig, og den samme tankegangen har vi når vi gjør endringer. Vi ønsker at systemet skal være så fleksibelt som overhode mulig, uten at endringer som legges inn en plass, ødelegger noe annet.

Grunnpilarer

Grunnstrukturen er laget over en grid som er 12 kolonner bred. Dette betyr at man kan sette opp en, to, tre fire, seks og tolv kolonner som er like brede. Samtidig har vi full kontroll hvordan disse endrer seg på mindre skjermer, som for eksempel en mobiltelefon. Det vil si at alle sidene vi lager ved hjelp av vår platform, vil med små grep se like bra ut på små enheter, som på store enheter. Mobiltilpassing er en del av pakken.

Menyen slik du ser på denne siden, sitter fast i toppen uavhengig hvor langt nede på siden du har scrollet. Dette er bare en av måten menyen kan lages. Andre eksempel er en meny som forsvinner når man scroller, eller et sidepanel som alltid henger med siden, enten på venstresiden, eller på høyresiden. Det er heller ikke noe i veien for at menyen kan ligge i bunnen av siden, dersom det er ønskelig.

Konklusjonen er at det meste lar seg løse. Det som ikke lar seg løse direkte ved hjelp av vår grunnstruktur, kan alltids løses på en annen måte.

Vertikal rytme

Hva sa du?

Vertikal rytme?

Hva er det?

Vertikal rytme er et fantastisk hjelpemiddel for å gi brukeren en opplevelse av struktur og orden. Vi har benyttet en vertikal rytme bestående av 24 pixler, og har bygget typografien rundt denne størrelsen. Dette løfter designet, og gir leseren en opplevelse av et mønster som gjør det enklere å lese.

Dette gjelder også overskriftene

Alle overskriftene er tilpasset denne størrelsen, og store tekstmengder blir derfor mer behagelig å lese

Overskrifen liggende på brødteksten

Overskriftene i rammeverekt går fra 1 til 6, som forteller om viktigheten av budskapet. Dette gjenspeiles også i teksten, og går man ytterligere ned i verskrifts-typen vil den legge seg rett over brødteksten.

Nest siste overskrift

Nest siste overskrift

Siste overskrift

Helt ned til den aller siste overskriften, kan man se at den vertikale rytmen er ivaretatt

Også mellom vanlige tekstblodder ser man at teksten føler dette mønsteret.

Promobokser

view_module

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..

thumb_up

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..

view_module

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..

view_module

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..

Bildebokser

Parallakse

Fungerer både med og uten innhold

Parallakse-effekt er en visuell effekt, hvor bakgrunnen beveger seg i en annen hastighet enn resten av siden når man scroller

Dette gir en fin romfølelse som gjør at siden, og ikke minst innholdet, står mere ut.

Vær oppmerksom på at bakgrunnen ikke lager for mye støy, slik at teksten blir vanskeligere å lese.

Et lite utvalg av predefinerte farger

Alle kommer i 10 forskjellige valører, men det er selvfølgelig ingen problem å legge inn ønskede farger.

mode_edit