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:
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-apex.css, containing theme-specific styles; and
oojs-ui-apex.js, containing theme-specific code
You can load additional icon packs from files named
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:
Clone the repo:
$ git clone https://phabricator.wikimedia.org/diffusion/GOJU/oojs-ui.git oojs-ui
Move into the library directory:
$ cd oojs-ui
Install composer and make sure running
composer will execute it (e.g. add it to
$PATH in POSIX environments).
Install dev dependencies:
$ npm install
Build the library (you can alternatively use
grunt quick-build if you don't need to rebuild the PNGs):
$ grunt build
You can see a suite of demos in
/demos by executing:
$ npm run-script demos
You can also copy the distribution files from the dist directory into your project.
composer testlocally 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:
We use the Semantic Versioning guidelines.
Releases will be numbered in the following format:
$ cd path/to/oojs-ui/ $ git remote update $ git checkout -B release -t origin/master # Ensure tests pass $ npm install && composer update && npm test && composer test # Avoid using "npm version patch" because that creates # both a commit and a tag, and we shouldn't tag until after # the commit is merged. # 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 --reverse v$(node -e 'console.log(require("./package.json").version);')...HEAD | grep -v "Localisation updates from" | sort $ edit History.md # Update the version number $ edit package.json $ git add -p $ git commit -m "Tag vX.X.X" $ git review # After merging: $ git remote update $ git checkout origin/master $ git tag "vX.X.X" $ npm run publish-build && git push --tags && npm publish