FT branded page footer for responsive pages
notlee Merge pull request #94 from Financial-Times/optional-margin
Make the footer margin optional.
Latest commit 62f6455 Jun 1, 2018

README.md

o-footer Build Status

FT page footer component

Usage

Data

For convenience a JSON file with footer links has been provided (footer.js).

Markup

There are full HTML examples in demos/src which you can copy and paste into your project to get started.

Styles

If you're using the Build Service, there's not much to do except make sure the classes in your markup match up with those in the demos.

If you're not using the build service then you'll need to be aware of silent mode. As with all Origami components, o-footer has a silent mode. To use its compiled CSS (rather than using its mixins with your own Sass) set $o-footer-is-silent : false; in your Sass before you import the o-footer Sass.

$o-footer-is-silent: false;

// Output standard o-footer with dark theme and navigation matrix styles
@include oFooter;

// Output the footer with the light theme
@include oFooter($theme: 'light');

// Output the simple footer, with the dark theme.
// Use the method above for a light themed simple footer
@include oFooter($simple: true);

// Output o-footer without the standard top margin.
@include oFooter($margin: false);

JavaScript

Unless you're using the Build Service no JS will run automatically. You must either construct an o-footer object or fire the o.DOMContentLoaded event, which oFooter listens for.

Constructing an o-footer

const oFooter = require('o-footer');

const ofooter = new oFooter();

Firing an oDomContentLoaded event

document.addEventListener('DOMContentLoaded', function() {
	document.dispatchEvent(new CustomEvent('o.DOMContentLoaded'));
});

Migration guide

Upgrading from 5.x.x to 6.x.x

V5 -> V6 introduces the new majors of o-colors and o-typography. Updating to this new version will mean updating any other components that you have which are using o-colors and o-typography. There are no other breaking changes in this release.

Upgrading from 4.x.x to 5.x.x

Version 5 has significant markup changes compared to version 4. If you want to upgrade, the best option is to look at the demos: footer and simple footer. If you don't want to upgrade, some superficial visual changes have been back-ported to a minor version on 4.x.x.

Upgrading from 3.x.x to 4.x.x

Note that o-footer v4 relies on o-grid v4.

Markup changes

 <nav class="o-footer__row o-footer__nav">
 	<div class="o-footer__col o-footer__col--full-width">
 		…
+ 		<div class="o-footer__divider"></div>
 	</div>
 </nav>

Contact

If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #ft-origami or email Origami Support.


Licence

This software is published by the Financial Times under the MIT licence.