update dependencies Grunt and Bootstrap - set active class…

[atelierbram]

In this PR I updated the dependencies for Grunt, and others as well in package.json because after NPM first install running the grunt command Grunt wouldn't run and generates an error. Bootstraps navbar needed some additional (updated) markup too with the new version.

I opted for setting an active class on the nav's list-items (like in Bootstrap) ISO on the link in the templates ISO in javaScript. Using the comparison operator == here within an if-statement. This works when the values of the two variables page_id (in this example from html/templates/page1.html) and menu_item from the for-loop in html/components/nav.njk match, ... and because of the way these templates render:

Because assignments outside of blocks in child templates are global and executed before the layout template is evaluated it’s possible to define the active menu item in the child template:

In html/templates/page1.html:

{% set page_id = "Page 1" %}   

In html/components/nav.njk:

  <li class="nav-item {% if page_id == item.menu_item %}active{% endif %}">

[morganfeeney]

I haven't seen this before +git, what does it do?

[atelierbram]

Sorry I don't know, copy & paste thing from other repo. I will remove it in a bit.

[morganfeeney]

Hi, i've spent a bit of time looking at the changes, I spotted a few things, if you don't have time just let me know and I'll pick them up ;)

There are a few outdated utility spacing classes used in the header that need to be updated, see example:

You can see the same alignment issue in the footer too.

I notice in the nav, the word navbar is out of alignment with the content:

Any idea why?

[morganfeeney]

I see the point to this, I originally wanted some dynamic way to do this which is why I opted for the JS at that time. For example if the name of the file changes then you might have to also change the page id etc.

However... from a learning point of view I think it's far better to show people how to add an active class using Nunjucks 👍.

@atelierbram You can go ahead and remove the JS rather than comment it out, ok?

[atelierbram]

Morgan, Next couple of days I don't have much time, maybe I can make some time on thursday to do this right. I'm not deeply invested in Bootstrap, and the repo is using an alpha version for the next release of Bootstrap, so I don't know ... Personally I wouldn't mind waiting for the official release of Bootstrap 4 to fix those outdated classes, for there might be more that needs to be changed with that release.

[morganfeeney]

I'm gonna merge this in, and fix the classes myself. If BS updates then... well it's not exactly a big job to correct. Thanks for the effort.

[atelierbram]

Great - thanks; you're welcome