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.
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:
||Run all scripts to create docs, build css, build the search index.|
||Run all scripts to create docs, build css, build the search index, and watch for changes.|
||Rebuild all of the docs pages in admin/tool/componentlibrary/docs|
||Build all docs pages and keep watching for changes in admin/tool/componentlibrary/content|
||Compile all scss for these docs pages.|
||Index all pages for the search feature|