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