Component library - Revision history

Devdocsbot: Protected "Component library": Developer Docs Migration ([Edit=Allow only administrators] (indefinite))

2022-07-15T04:27:43Z

Protected "Component library": Developer Docs Migration ([Edit=Allow only administrators] (indefinite))

← Older revision	Revision as of 04:27, 15 July 2022
(No difference)

Devdocsbot: Update migration status and path

2022-07-15T04:25:52Z

Update migration status and path

← Older revision		Revision as of 04:25, 15 July 2022
Line 1:		Line 1:
			{{Template:Migrated\|newDocId=/general/development/tools/component-library}}
	= Component library =		= Component library =

Tsala: /* Getting started */ http://componentlibrary.moodle.com/admin/tool/componentlibrary/docspage.php/library/getting-started/

2021-11-17T11:09:52Z

Getting started: http://componentlibrary.moodle.com/admin/tool/componentlibrary/docspage.php/library/getting-started/

← Older revision		Revision as of 11:09, 17 November 2021
Line 19:		Line 19:
	The library is built right into Moodle, but is only shown to developers. You can find it in your site by navigating to Site administration -> Development -> UI Component library.		The library is built right into Moodle, but is only shown to developers. You can find it in your site by navigating to Site administration -> Development -> UI Component library.

	If you cannot see "UI Component library" then you will need to build it first.		If you cannot see "UI Component library" then you will need to build it first - see below.

			You can also browse the Component Library online http://componentlibrary.moodle.com/admin/tool/componentlibrary/docspage.php/library/getting-started/

	=== Building the Component Library ===		=== Building the Component Library ===

Andrewnicols: Link to grunt

2021-09-21T06:02:50Z

Link to grunt

← Older revision		Revision as of 06:02, 21 September 2021
Line 29:		Line 29:
	See our [[Grunt]] documetation for information on how to install these dependencies.		See our [[Grunt]] documetation for information on how to install these dependencies.

	Once you have installed the NodeJS dependencies you can then use the `grunt` tooling to build the library.:		Once you have installed the NodeJS dependencies you can then use the [http://gruntjs.com/ grunt] tooling to build the library.:

	grunt componentlibrary		grunt componentlibrary

Andrewnicols: Start of CL docs

2021-09-21T05:48:25Z

Start of CL docs

New page

= Component library =

This document provides a brief overview of the Moodle Component Library.

== What is the Component Library? ==

The Component Library is a developer tool provided to help identify frequently-used user interface components, and encourage their re-use.

It includes components from both Twitter Bootstrap, and from Moodle, and it displays these features using your current Moodle theme.

This should help you to work on your theme features, bringing together most of Moodle into one convenient location.

The library is a tool for visual designers, front-end developers, UX developers and anybody creating core Moodle code or Moodle extensions. Its use will allow you to create user interfaces more efficiently.

== Getting started ==

=== Where is the Component Library? ===

The library is built right into Moodle, but is only shown to developers. You can find it in your site by navigating to Site administration -> Development -> UI Component library.

If you cannot see "UI Component library" then you will need to build it first.

=== Building the Component Library ===

The Component Library is written using the same Hugo tooling that the Twitter Bootstrap framework uses. It also includes the Bootstrap libraries for the version of Bootstrap used in Moodle.

The library is built from your console, and you will need to install the same NodeJS dependencies that we use for many of our other development features.

See our [[Grunt]] documetation for information on how to install these dependencies.

Once you have installed the NodeJS dependencies you can then use the `grunt` tooling to build the library.:

grunt componentlibrary

Simples! What could be easier!?

=== What should be documented ===

The main aim of this library is to improve consistency of the user interface to provide a better user (and developer) experience by re-using components across Moodle.

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

The initial aim is to document any new UI feature which:
* is made available in the `core` component, or any core subsystem
* is made available for re-use in a plugin which offers sub-plugins

The documentation of other features will also be welcomed.

[[Category:Coding_guidelines]]
[[Category:Core_development]]
[[Category:Developer_tools]]
[[Category:Guidelines_for_contributors]]
[[Category:Interfaces]]
[[Category:Moodle_User_Interface_Guidelines]]
[[Category:Processes]]
[[Category:Themes]]
[[Category:Usability]]