Outline

Goal of this learning module

The goal of this learning module is to learn how to style some MUI components using the McMaster Digital Branding Guidelines. You will not be an expert on MUI by the end of the class and this is okay. We want to cover the basics of MUI styling, but as with any skill, mastering it takes practice. You will also learn the basics of mobile user interface design as well as how to use the Wave tool to evaluate your website for AODA compliance.

Learning Objectives

At the end of this learning module, attendees will be able to:

• Create a Next.js application
• Add the MUI library to a Next.js application
• Use the recommended McMaster typography fonts and styles
• Create navigation components for your webpage including a navigation bar, footer, breadcrumbs and a universal back button.
• Style common interactive UI elements like buttons, tabs and file input widgets
• Evaluate your website for AODA compliance and fix common accessibility errors
• Apply French translation to a Next.js application

Table of Content

1. Favicon
2. Typography
3. Navigation Bar
4. Footer
5. Dark and Light Mode
6. Breadcrumbs With Universal Back Button
7. Interactive UI Elements
   1. Buttons
   2. File Input Widget
   3. Dropdown Menu
   4. Buttons With a Dropdown Menu
   5. Speed Dials
8. AODA Compliance
9. Localization
10. Conclusion

---