Skip to main content

Getting started

The Moodle logo

The Moodle UI Component library

The Moodle UI component library is the central location for documenting frequently used User Interface components used in Moodle. Moodle UI components are used to represent distinct UI elements, such as tables, buttons, dialogs, and others. The main purpose of this library is to provide documentation for designers and developers when doing frontend development of new features.

This library allows you to create user interfaces more efficiently, it is a tool for visual designers, front-end developers, ux developers and anybody creating core Moodle code or Moodle extensions.

Whenever a new Moodle feature is created or updated the building blocks for the UI of the feature should be documented in this library.

Bootstrap docs

A large part of this library contains information about Bootstrap components which are shipped with every Moodle installation. Bootstrap contains a lot of useful components and utilities which can safely be used for frontend development. For example, instead of adding custom CSS to add some padding in a box you should really look at the spacing utilities from Bootstrap instead.

Build with Hugo

This page and all other pages in the Component library are build using Hugo, a static site generator that can turn documentation written in Markdown into nice pages like the one you are looking at right now.

Using npm scripts

The package.json includes numerous tasks. Run npm run to see all the npm scripts in your terminal. Primary tasks include:

Task Description
npm run build Run all scripts to create docs, build css, build the search index.
npm run start Run all scripts to create docs, build css, build the search index, and watch for changes.
npm run docs-build Rebuild all of the docs pages in admin/tool/componentlibrary/docs
npm run docs-watch Build all docs pages and keep watching for changes in admin/tool/componentlibrary/content
npm run css-compile Compile all scss for these docs pages.
npm run index Index all pages for the search feature