Dashboard design patterns:
The structure of the dashboard is based on modern design patterns in terms of usability and semantics.
The html file uses resources from Google for fonts as well as Material icons for the overall iconography. Within the body code, we use the <aside> and <main> tags.
The CSS includes variables to manage the use of colours. This is also split into a dark theme colour variables section.
- the sidebar menu ‘open’ and ‘close’ functionality.
- themeToggler event listener which controls the light and dark theme toggle.
Skills: UI Design / Web Design
Summary: This project was a personal opportunity to refresh myself on moden best practices for building a responsive admin template with the functionality to switch between
a light and dark theme.
Demo link: https://kweku76.github.io/affran-health/
Here are some of the tasks.
- Using CSS variables to manage the UI colours
- CSS variables to manage the colour changes for the dark theme.
- Basic structure of the html elements with semantic structure
- setting up media queries to handle the breakpoints from desktop to tablet and then mobile devices
- using visual studio code and git to manage source control conventions
- using Googles Material icons as a source