Skip to main content Link Menu Expand (external link) Left Arrow Right Arrow Document Search Copy Copied

Conclusion

Throughout this workshop, we learned the basics of styling Material UI components to conform to the McMaster Digital Brand Standards. Your final Next.js SPA has the following features :

  • A McMaster favicon
  • Styled text using the Typography component
  • A theme that uses the McMaster Heritage Maroon and Heritage Gold colors
  • A styled responsive navigation bar with two configurations depending on the screen size
  • A responsive footer that adapts its layout and position to the device’s screen size
  • Support for dark and light mode (in addition to following the user preference)
  • Styled buttons using a custom MacButton component
  • A styled speed dial component
  • A styled file input widget
  • A styled dropdown menu
  • Vertical tabs that make use of a drawer on mobile devices
  • AODA compliance
  • Accessible focus indicators
  • A “Skip to Main Content” button

While we only scratched the surface of what you can do with Next.js and Material UI, we hope that this workshop provided you with the basic knowledge needed to style your McMaster website.

We recommend the following resources if you want to learn more about Next.js, Material UI, the McMaster Brand Standards, and the web accessibility guidelines:

You can also use the PageSpeed Insights tool to assess your website in terms of performance, accessibility, best practices and SEO score. The tool can grade the mobile and desktop versions of your website. Please note that your website needs to be web accessible without the need for a VPN connection or login credentials for this tool to work. Alternatively, you can use the Lighthouse tool that is built into the Google Chrome browser to assess any website that requires logging in using credentials.

The complete version of this demo website is available on the final branch of the following GitHub repo: McMasterRS/wsr_web-design-guide.

If you want to learn how to create and style the Next.js SPA used in this demo from scratch, please consult the Building Modern Single-Page Applications learning module.

If you require additional help with building your website or if you happen to use a different tech stack or framework than the ones covered in this workshop, please feel free to book a consultation with the Research Software Development team by emailing rsd@mcmaster.ca.