OOUI
Object-Oriented User Interface
|
OOUI is a component-based JavaScript UI library. Key features:
It is the standard library for Web products at the Wikimedia Foundation, having been originally created for use by VisualEditor.
The library is available on npm. To install:
$ npm install oojs-ui
Once installed, include the following scripts and styles to get started:
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/oojs/dist/oojs.min.js"></script>
<script src="node_modules/oojs-ui/dist/oojs-ui.min.js"></script>
<script src="node_modules/oojs-ui/dist/oojs-ui-wikimediaui.min.js"></script>
<link rel="stylesheet" href="node_modules/oojs-ui/dist/oojs-ui-wikimediaui.min.css">
While the distribution directory is chock-full of files, you will normally load only the following three:
oojs-ui.js
, containing the full library;oojs-ui-wikimediaui.css
or oojs-ui-apex.css
, containing theme-specific styles; andoojs-ui-wikimediaui.js
or oojs-ui-apex.js
, containing theme-specific codeYou can load additional icon packs from files named oojs-ui-wikimediaui-icons-*.css
or oojs-ui-apex-icons-*.css
.
The remaining files make it possible to load only parts of the whole library.
Furthermore, every CSS file has a right-to-left (RTL) version available, to be used on pages using right-to-left languages if your environment doesn't automatically flip them as needed.
Found a bug or missing feature? Please report it in our issue tracker Phabricator!
We are always delighted when people contribute patches. To setup your development environment:
$ git clone https://gerrit.wikimedia.org/r/oojs/ui oojs-ui
$ cd oojs-ui
composer
will execute it (e.g. add it to $PATH
in POSIX environments).$ npm install
grunt quick-build
if you don't need to rebuild the PNGs):$ grunt build
/demos
by executing:$ npm run-script demos
We use Gerrit for code review, and Phabricator to track issues. To contribute patches or join discussions all you need is a developer account.
npm test
and composer test
locally before pushing changes. SVG files should be squashed in advance of committing with SVGO using svgo --pretty --disable=removeXMLProcInst --disable=cleanupIDs <filename>
.A new version of the library is released most weeks on Tuesdays.
Get updates, ask questions and join the discussion with maintainers and contributors:
#wikimedia-dev
on irc.libera.chat
.We use the Semantic Versioning guidelines.
Releases will be numbered in the following format:
<major>.<minor>.<patch>
Release process:
$ cd path/to/oojs-ui/
$ git remote update
$ git checkout -B release -t origin/master
# Clean install npm dependencies. Update Composer dependecies. And ensure tests pass
$ npm ci && composer update && npm test && composer test
# Update release notes
# Copy the resulting list into a new section at the top of History.md and edit
# into five sub-sections, in order:
# * ### Breaking changes
# * ### Deprecations
# * ### Features
# * ### Styles
# * ### Code
$ git log --format='* %s (%aN)' --no-merges v$(node -e 'console.log(require("./package").version);')...HEAD | grep -v "Localisation updates from" | sort
$ edit History.md
# Update the version number (change 'patch' to 'minor' if you've made breaking changes):
$ npm version patch --git-tag-version=false
$ git add -p
$ git commit -m "Tag v$(node -e 'console.log(require("./package").version);')"
$ git review
# After merging:
$ git remote update
$ git checkout origin/master
$ git tag "v$(node -e 'console.log(require("./package").version);')"
$ npm run publish-build && git push --tags && npm publish