Template contents
The template consists of an HTML-file, with several attached CSS and JS files, and an image folder with icons, logos and more. View the included readme-file for a more technical explanation. There are also detailed comments in the separate files.
HTML
In uio-app-template.html an area is reserved for the main part of the app. One should follow the file setup as closely as possible, but code may be changed if technically required. Whenever code is changed, the template serves as a guide for technical and visual output. Any changed code must be semantically valid and WCAG compliant.
CSS
Styles are written as pure CSS, without preprocessor (less/sass). They are split into multiple files, for different areas of the template:
uio-app-main.css applies to the main app area, and may be edited directly.
The other CSS-files should be edited as little as possible. Consider what is technically necessary, bearing in mind how any future updates of the template should be handled. Overriding and commenting may be more appropriate than direct changes.
JS
uio-app-header.js controls menus and language selection in the header. The document language attribute (html lang="") is controlled with the language selector. Logos and some other elements follow the selected language (view the readme-file for more info). This JS file also contains logic for responsive header behaviour.
uio-app-privacy-notification.js handles warnings for cookies and privacy. It's commented out of the HTML-file. Can be used as needed.
Image folder
The images folder contains various background-images used in the interface, such as logos, icons, arrows and more.
Source code
Can be found on github:
https://github.com/unioslo/uio-app-profil
Click on ?Code? to download files or clone the repository.
Updates
Updates to the source code may occur from time to time. These will be solved as gracefully as possible. Please consider how you utilize the template code and still maintain the possibility to apply updates.
Demo
View template demo.
NOTE: This is for demo only. For updated source code, go to github.