Forums | Mahara Community
Upgrade to Bootstrap 4 with Mahara 19.04
27 March 2019, 2:17 PM
Hello Mahara community,
We are gearing up for the Mahara 19.04 release in April. A preview version of that release will be available next week. Please watch out for the announcement in the "News" forum here or on social media.
We'd like to let you know about a change that some of you might be anticipating greatly: Mahara 19.04 will run on the new version of Bootstrap, Bootstrap 4. Over the last months, we've upgraded our CSS framework to support Bootstrap 4.
Changing to this new version brings a number of advantages with it:
- Tidier code
- Easier to upgrade in the future
- Using newer standards for front-end development
- Better and more flexible mixins and functions
- Easier to understand the import structure for themes and allowing for more variables to be imported from the raw theme into child themes
- Variables follow the $component-state-property-size pattern
- SCSS maps now make it easier to make components with states
The overall look of Mahara has not changed making it possible to upgrade and still allow learners to have a familiar site look. We are making some UX improvements though. A new page header will be available.
All built-in themes have been upgraded to Bootstrap 4. Some final changes are in progress for the preview version of Mahara.
You can access the upgrade documentation on the wiki. In contrast to the upgrade from our custom Mahara CSS to Bootstrap 3, i.e. from Mahara 15.04 or earlier to 15.10 or later), the upgrade to Bootstrap 4 will be smoother.
In our trials with a different designer / front-end developer than the one who did the bulk of the work, it took only about 4-8 hours to upgrade a theme. Highly customized themes may take a bit more time to change around as Bootstrap did make some far-reaching changes, in particular around the naming of variables.
If you want to take a sneak peek at the upcoming changes and don't want to wait until the preview version to do so, please feel free to grab the latest master from our Git repository and install the code. That would also allow you to start making changes to any third-party plugins that you may use.