Introduction

How Didactika's Moodle plugins draw their screens, and how to read and use this reference.

This reference describes how the Moodle plugins of Didactika are drawn. Its aim is that a list, a form, a dialog or a badge looks and behaves the same in every plugin and on every Moodle version we support, and that the theme of a site can restyle all of them at once.

How to use this site

Every example is a component of Bootstrap as Didactika draws it: the stylesheet that Moodle itself ships for the version selected in the header, with the Didactika layer on top (shape, size, focus, states and colour). Use the components as you would on a real page: hover, focus and type. Turn on designer mode (the ruler button of the header) and click anything inside an example to open the inspector, which reads the layer too. Its Design tab measures size, padding, radius, type and colours from that version’s CSS; its Code tab shows the HTML of the element as a plugin would write it, every class with the number of rules it brings, and the CSS that applies. The numbers cannot drift from the code.

• Moodle version. Every page is written for the version selected in the header. A class, an icon or a component that does not exist in a version is not shown in it, and what appeared later carries a badge such as “5.3+”.
• Colour mode. Where the selected version has a dark mode, the examples follow it.
• Didactika theme. The design system is what plugins apply. One switch in the header draws every example with the Didactika theme on top (colours, typography, gradients), and a selector next to it chooses the version of the theme (v0.1 for now).
• Language. Every page exists in English and Spanish.

Principles

1. Moodle draws, the theme decides. Buttons, fields, forms, dialogs and alerts are Bootstrap and Moodle components with their own classes. A plugin never redraws them.
2. A thin layer on top. Plugins add only what Moodle has no component for: the chrome of a list (toolbar, filters, pager, row actions), tinted badges, steps, choice cards and empty states.
3. One markup for every version. The same classes work on every supported version, and each page gives the names of the version you selected.
4. Measured, not described. Sizes, spacing, radius, type and colours are read from the real CSS.
5. Accessible by default. Contrast, focus, keyboard and labels are part of every component.
6. One meaning for each element. The same icon, colour or action means the same thing everywhere in the platform, and what removes or stops is always danger.

Anatomy of a component page

Each component page states what the component is for and when not to use it, its anatomy, every variant against every state, its measured sizes, its classes (the names of the selected version), its code, what changes by version, and its accessibility.