Implementation Guide and Suggestions re: DMN Header / Footer wrapper

[nigelgilbert]

Summary

@johndhancock This issue lists some things I had to change with your repository to get the DMN header and footer wrapper working 100%. You can see a fully integrated example using this source code in the example I implemented.

Basic Steps

1. Add the necessary divs to your markup in base.html:

<div class="wrapper" id="dmn-header"></div>
<div class="wrapper" id="dmn-footer"></div>

2. Import the built bundle into your JS scripts.js file:

import "./../../../../dist/index";

Things that have to change in your repository

Here are things I changed to get it working 100%. Most of these are simple changes– updating packages, more carefully scoping css selectors, etc. These must be done in the Yeoman generator repository.

1. Update Babel

Problem

Our Babel versions are out of sync. Dev team is using 7.x. To use Header and Footer wrapper, please upgrade to Babel 7.

Logs

https://justpaste.it/6gphy

Fix

npm i babelify@latest @babel/preset-env --s

See fix commit here.

2. Styling Issues

Some CSS selectors in your repo are breaking the Footer's style. I think some of these are unnecessary unspecific and could be fixed easily.

~.inline-block~

.inline-block {
    max-width: 650px;
    width: 100%;
    margin: 4.8rem auto;
    font-family: Montserrat,Helvetica,Arial,"Arial Unicode","Lucida Sans Unicode",sans-serif;
}

~This breaks footer margins. There is no inline-block class on the page. Putting that aside, I think that this selector is too generic to have such a specific margin property– it should probably go on a more specific selector that targets 1 particular feature.~

This is used a lot throughout project... better to change on my end.

a

a {

    color: #0185d3;
    font-weight: 700;
    text-decoration: none;
}

This breaks footer font weight in the nav links. Same sentiment as above.

border: 0 normalize

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: 0;
}

This breaks the border on the footer's copyright wrapper. For some reason this dumb generic normalizing class selector has priority over my specific selectors. Possibly an issue with priority and header order? Not sure.

[nigelgilbert]

I made this issue to fix .inline-block in my wrapper repository: https://github.com/dallasnews/dmn-vendor-wrapper/issues/3