OOUI

OOUI allows developers to rapidly create responsive web user-interfaces and applications. It operates consistently across a multitude of browsers and is internationalization and accessibility ready.

The OOUI library contains:


 * ready-to-use widgets, layouts, and windows that can be instantiated directly or easily extended,


 * a PHP server-side compatible output for cases where JavaScript is not supported,


 * elements that can be easily mixed and matched to create custom user interfaces.

OOUI is available in core>Core|MediaWiki Core, as well as on [https://www.npmjs.com/package/oojs-ui npm], [https://packagist.org/packages/oojs/oojs-ui Composer], and through [https://cdnjs.com/libraries/oojs-ui cdnjs]. OOUI implements a "wui>Wikimedia User Interface|WikimediaUI" theme – conforming to [https://design.wikimedia.org/style-guide/ Wikimedia Foundation's design style guide]. Interfaces built within MediaWiki use this theme by default, though different MediaWiki skins usetheme>OOUI/Using OOUI in MediaWiki#Using themes|can and do over-ride this. See oouimw>OOUI/Using OOUI in MediaWiki|documentation about using OOUI in MediaWiki.

It is successfully in use in 40+ web products by Wikimedia Foundation and volunteer developers.

Note, that the library was originally created for entire user interface of VisualEditor, on top of the OOjs primer (Object-Oriented JavaScript, hence OOUI's former name "OOjs UI"). It has later been extended to serve MediaWiki Core with PHP implemented widgets or responsive interfaces in current project Advanced Mobile Contributions.

geoojsui>git:oojs/ui/|The source code is hosted on gerrittutorial>Gerrit/Tutorial|Gerrit and [https://github.com/wikimedia/oojs-ui mirrored on GitHub].

Documentation
See the sidebar for a full list of documentation subpages.

See also:


 * [<tvar|api>https://doc.wikimedia.org/oojs-ui/master/js/</> API documentation] generated from the source code on doc.wikimedia.org


 * [<tvar|demo>https://doc.wikimedia.org/oojs-ui/master/demos/</> Interactive demos online] and in the project's <tvar|1> </> directory


 * [<tvar|tut>https://doc.wikimedia.org/oojs-ui/master/demos/tutorials/index.html</> A tutorial on building a Todo list application using OOUI step by step]