UI Component library
Layout
Moodle page layouts for themes
High level templates
Theme layouts are the highest level templates found in Moodle. They construct the Moodle Page users see when interacting with Moodle.
Layout files define the location of page elements like the primary and secondary navigation, the main content, Moodle blocks and the footer.
Theme layouts are defined in a themes config.php and themes can serve different layout files depending on the page type, example layouts are
- frontpage
- course page
- activity page
- secure page
- login page
Accessibility considerations
When interacting with a theme the layout needs to be constructed with a logical DOM order: First render the primary navigation, then the secondary navigation then the page content, then the footer.
Responsiveness
Use Bootstrap grids to create a responsive design. Make sure the primary and secondary navigation can be found easily on a mobile device.
Always try themes on all different theme layouts and ensure font-sizes, paddings and margins are used correctly. Especially for frequently used pages like courses and activities.