The footer

Again, the footer element contains a DIV that constrains the width of footer content. NAV elements are again used to contain the copyright link, and any other links appropriate for the footer.

<footer id='footer'>
    <div class='center responsive_page_width'>
        <nav class='float_left'>
            <a target='_blank' href='https://www.crossadaptive.com'>Copyright 2017 CrossAdaptive</a>
        </nav>
        <nav class='float_right'>
            <a href='#'>A footer link</a>
        </nav>
    </div>
</footer>

CSS

As previously discussed, the sizing and positioning of the footer is mainly orchastrated by the CSS related to the HTML5 Page Structure. Here the default line-height and colour is set. These are likely to be overriden by a user project.

BODY > FOOTER
{
    line-height:80px;
    color:#aaa;
}

Like before, flex is used to position elements within the footer.

BODY > FOOTER > DIV
{
    display:         flex;
    flex-direction:  row;
    justify-content: space-between;
    align-items:     center;
    box-sizing:      border-box;
}

BODY > FOOTER NAV A
{
    display:block;
    float:left;
    line-height:inherit;
    color:inherit;
    text-decoration:none;
    padding:0 10px;
    vertical-align:top;
    position:relative;
}

BODY > FOOTER NAV:first-child A:first-child
{
    padding-left: 21px;
}

BODY > FOOTER NAV:last-child A:last-child
{
    padding-right: 21px;
}