User interface classes built on the OOjs framework.
This library is available as an npm package! Install it right away:
npm install oojs-ui
If you don't want to use npm, you can:
Clone the repo and move into it,
$ git clone https://git.wikimedia.org/git/oojs/ui.git oojs-ui && cd oojs-ui.
Install Grunt command-line utility:
$ npm install -g grunt-cli
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 now copy the distribution files from the dist directory into your project.
You can see a suite of demos in
/demos by executing:
$ npm run-script demos
While the distribution directory is chock-full of files, you will normally only need to load three:
oojs-ui.js, containing the full library
oojs-ui-mediawiki.css, containing theme-specific styles
oojs-ui-mediawiki.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.
We use the Semantic Versioning guidelines as much as possible.
Releases will be numbered in the following format:
For more information on SemVer, please visit http://semver.org/.
Found a bug or missing feature? Please report it in the issue tracker!
We are always delighted when people contribute patches. We recommend a few things to make it quicker and easier for you to contribute:
composer testlocally before pushing changes. SVG files should be squashed in advance of committing with SVGO using
svgo --pretty --disable=removeXMLProcInst --disable=cleanupIDs <filename>.
$ 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