UIFoundations
Colour, type, spacing, radius, elevation and icons.
Open source · GPL-3.0
One look for every Moodle plugin
The reference for building Moodle plugins that look and behave the same on every supported release. Each component, with all its variants, is drawn with the real CSS of each Moodle LTS and measured from it.
Try it now
Everything on this site answers to these three controls. Change them and the examples change with them.
Moodle versionExamples are drawn with the CSS of that release.
Didactika themeColours, typography and gradients of the theme, on top of the design system.
InspectClick an element on any component page to measure it and read its HTML and CSS.
Saved: the profile was enabled.
primarysuccess
3Moodle versions
400Moodle icons mapped
666Design tokens read
2Languages
71Pages
Explore the system
Every section, from the foundations to whole pages.
Bootstrap components
Every Bootstrap component with all its variants and states.
Moodle components
Forms, modals, navigation and the rest of what Moodle draws.
Didactika components
What our plugins add: lists, filters, steps, version compare.
Patterns
Whole pages assembled from the components.
Guides
Adapt a plugin, write a theme, review a screen.
How we build at Didactika
Six rules that decide every screen of every plugin.
Moodle draws, the theme decides
Buttons, fields, forms and dialogs are Bootstrap and Moodle components. A plugin never redraws them, so a theme restyles every plugin at once.
A thin layer on top
We add only what Moodle has no component for: the chrome of a list, tinted badges, steps, choice cards and empty states.
One markup, every version
The same classes work on Bootstrap 4 (Moodle 4.x) and Bootstrap 5 (Moodle 5.x). Each page shows where a name differs.
Measured, not described
Sizes, spacing, radius, type and colours are read from the real CSS of the version you pick, so they cannot drift from the code.
Accessible by default
Contrast, focus, keyboard and labels are part of every component, not an afterthought.
Open and bilingual
Documented in English and Spanish, versioned by Moodle LTS and published as open source.