Origami Frontend Components & Services

Readme: o-footer active

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.

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.

Switch component view

GitHub Repository

Install o-footer

If using the Build Service, add o-footer@^6.0.10 to your script and link tags.

If running a Manual Build, run bower install --save "o-footer@^6.0.10".

Help & Support

o-footer is maintained directly by the Origami team. If you have any questions about o-footer or Origami in general, we are happy to help. 😊

Slack: #ft-origami
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #ft-origami
Email: origami.support@ft.com