framework

How to update Bootstrap version?

Modyo offers many tools for accelerated digital channel creation. One of these tools is the Minimal Template, which is generated automatically when creating a new site. The Minimal Template was created to provide an agile way to create sites taking into account the best practices in web design, as part of this original package Bootstrap 4 is included, one of the most popular libraries among frontend developers.

With the rapid and continuous growth of the digital industry, new versions of Bootstrap are coming out and today we are going to see how to update this library. to its most updated version

The first step is to understand how the Minimal Template that contains a snippet called variables_css in which the values with which we are going to fill our Bootstrap stylesheet are assigned are assigned; To perform a bootstrap update under these conditions we have two possible implementation paths: one is to re-parameterize the Bootstrap CSS sheet and the other is not to use the variable sheet and to use direct CSS and modify it.

For both cases, the first thing we have to do is replace the Bootstrap JS with the version we want to use. For this we are going to go to templates snippet and open the file called bootstrap_js, there paste the javascript code of the latest version of bootstrap

Then we have to make the decision if we are going to use the variables or not, I will leave you the two possible options so that you can focus on the one you choose.

Option A: Update Bootstrap without variables

This option will take a fresh version of Bootstrap, without any integration with the Modyo template, this is a good option if you plan to start a project from scratch and implement your own style sheets.

Search for templates > snippet and there, open the bootstrap_css file, replace the code there with the stylesheet corresponding to the version of Bootstrap you want to implement.

Option B: Update Bootstrap with variables

This option is recommended if you already have a site implemented and you just want to update Bootstrap to its latest version or if you want to take advantage of Modyo's accelerated development by modifying variables that update the color palette with just a few value changes.

To use the variables we have to take the css sheet from the bootstrap CDN and copy it into the code editor that we have in our computer and using the keyboard shortcut to find and replace the color that comes as primary (# 0d6efd) and change it to the value of liquid {{primary}} that we define in the variables snippet.

This process must be repeated with all the variables until all those found in the snippet are mapped.

After we have the stylesheet ready, we will take it to the Modyo template, open bootstrap_css within templates and replace the code with our new sheet.

It is important to mention that all the examples that were worked for the minimal are optimized for version 4 of Bootstrap so if there are changes in the grid or the way the helpers are written, the result can be affected, so we have to rewrite the code found inside the snippet in the Grids section and check the examples page so that everything displays correctly.

By

Felipe Meyer

Felipe Meyer