English version of this page

Ta i bruk grafisk profil for applikasjoner

Et felles malsett for å gjøre det enkelt å legge på korrekt design for applikasjoner og nettsider. 

Innhold i malsettet

Malsettet består av en HTML-fil, med flere tilknyttede CSS og JS filer, samt en bildemappe med ikoner, logoer med mer. Se readme-filen som følger med for mer teknisk forklaring. Det er også detaljert kommentering i de ulike filene.

HTML

I uio-app-template.html er det satt av et område for hoveddelen av appen. Man bør følge oppsettet i filen mest mulig, men kode kan endres etter tekniske behov. I slike tilfeller gjelder malen som en veiledning til oppsett og utseende. Eventuelt endret kode skal overholde krav til validering og universell utforming.

CSS

Stilsettet er skrevet som vanlig CSS, uten preprosessor (less/sass). Det er delt opp i flere filer, for ulike deler av malen: 

uio-app-main.css tilhører hovedområdet for appen, og kan redigeres direkte.

Øvrige CSS-filer bør endres minst mulig (vurder hva som er teknisk nødvendig), blant annet med tanke på fremtidige oppdateringer av malverket. Overstyring og kommentering kan være mer hensiktsmessig enn direkte redigering.

JS

uio-app-header.js kontrollerer menyer og språkvalg i headeren. Dokumentspråket  (html lang="") endres med språkvelgeren. Logoer og enkelte andre elementer følger språkvalget (se readme-filen for mer info). Denne JS-filen har også logikk for håndtering av responsiv header.

uio-app-privacy-notification.js håndterer varsel om cookies og personvern. Dette er kommentert ut i HTML-filen. Brukes etter behov.

Bildemappe

images mappen inneholder ulike bakgrunnsbilder som brukes i grensesnittet, slik som logoer, ikoner, piler med mer. 

Kildekode

Kan hentes på github:
https://github.com/unioslo/uio-app-profil
Klikk på «Code» for å laste ned filene eller klone repoet.

Oppdateringer

Det kan fra tid til annen forekomme oppdateringer av kildekoden. Dette vil bli løst mest mulig skånsomt. Tenk likevel igjennom hvordan du tar i bruk rammeverket for best å kunne hente inn oppdateringer.

Demo

Se demo av rammeverket.
NB: Denne koden er kun for visning. For oppdatert kildekode, hent fra github.

Publisert 17. feb. 2017 13:37 - Sist endret 2. aug. 2022 12:47