| 1 |
efrain |
1 |
---
|
|
|
2 |
layout: docs
|
|
|
3 |
title: "Layout"
|
|
|
4 |
description: "Moodle page layouts for themes"
|
|
|
5 |
date: 2019-12-10T13:53:41+01:00
|
|
|
6 |
draft: false
|
|
|
7 |
---
|
|
|
8 |
|
|
|
9 |
## High level templates
|
|
|
10 |
|
|
|
11 |
Theme layouts are the highest level templates found in Moodle. They construct the Moodle Page users see when interacting with Moodle.
|
|
|
12 |
|
|
|
13 |
Layout files define the location of page elements like the primary and secondary navigation, the main content, Moodle blocks and the footer.
|
|
|
14 |
|
|
|
15 |
Theme layouts are defined in a themes config.php and themes can serve different layout files depending on the page type, example layouts are
|
|
|
16 |
|
|
|
17 |
* frontpage
|
|
|
18 |
* course page
|
|
|
19 |
* activity page
|
|
|
20 |
* secure page
|
|
|
21 |
* login page
|
|
|
22 |
|
|
|
23 |
## Accessibility considerations
|
|
|
24 |
|
|
|
25 |
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.
|
|
|
26 |
|
|
|
27 |
## Responsiveness
|
|
|
28 |
|
|
|
29 |
Use [Bootstrap grids]({{< docsref "/layout/grid" >}}) to create a responsive design. Make sure the primary and secondary navigation can be found easily on a mobile device.
|
|
|
30 |
|
|
|
31 |
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.
|