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,
git clone https://git.wikimedia.org/git/oojs/ui.git.
Install Grunt command-line utility:
$ npm install -g grunt-cli
Install dev dependencies and build the distribution files:
$ npm install
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.jscontaining the full library
oojs-ui-mediawiki.csscontaining theme-specific styles
oojs-ui-mediawiki.jscontaining theme-specific code
You can load additional icons 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.
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 # 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" $ git push --tags $ npm publish