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 Javascript file is small and only contains instructions for managing:
- the sidebar menu ‘open’ and ‘close’ functionality.
- themeToggler event listener which controls the light and dark theme toggle.
Date: 2023
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
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.
On the surface, it seems simple but there are are lot of moving parts that require understanding regarding CSS HTML and Javascript.
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
- Javascript to create the toggle functionality for light and dark themes
- 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
