Chameleon 6: Now on Bootstrap 5

From Bootstrap 4 to Bootstrap 5

Bootstrap is the CSS framework that provides the grid, components, and utility classes Chameleon builds its layouts from, so this upgrade touches everything the skin renders. Chameleon 6 uses Bootstrap 5.3, which it gets through Extension:Bootstrap, the extension that bundles the framework for MediaWiki. All Bootstrap 5 classes and utilities are now available in your wikitext and templates.

Bootstrap 5 also exposes its colors and many other values as CSS custom properties, so a lot of what used to need an SCSS recompile can now be done from MediaWiki:Chameleon.css with plain CSS.

The bundled Font Awesome icon set also moved from version 5 to version 6.

BootstrapComponents 6

Chameleon is not making the jump alone. Its companion extension BootstrapComponents, which lets you add Bootstrap components such as accordions, cards, carousels, and modals to wiki pages via parser functions and tags, has also released version 6 with Bootstrap 5 support. It builds on the same Extension:Bootstrap foundation, so if you run Chameleon and BootstrapComponents together, you can move both to Bootstrap 5 at the same time.

Upgrading

Chameleon 6 raises the minimum requirements: it needs MediaWiki 1.43 or later, PHP 8.1 or later, and Extension:Bootstrap 6 or later.

Because this is a major Bootstrap upgrade, plan for some migration work. Bootstrap 5 renames and removes a number of Bootstrap 4 classes and utilities. If you use Bootstrap classes in wikitext, templates, or custom stylesheets, or if you customize Chameleon's SCSS variables, you may need to update them. Our migration guide walks you through the class renames, the SCSS changes, and the Font Awesome update.

See it in action

Try Chameleon and BootstrapComponents together on our live demo wiki: bootstrap.pro.wiki.

Professional MediaWiki Services

At Professional Wiki, we provide MediaWiki theming and skin development, MediaWiki software development, and various MediaWiki services. Get in touch if you would like help with your Chameleon upgrade.