Origami Frontend Components & Services

Readme: o-header

Responsive header for FT branded sites

Usage

Quick Start

Install the module:

bower install --S o-header

Load the JS:

import oHeader from 'o-header';

oHeader.init();

Load the CSS:

$o-header-is-silent: false;
@import 'o-header/main';

Load o-fonts and set some default CSS properties to the document root:

html {
    font-family: "MetricWeb";
}

Copy the markup from one of the demos in the registry, and paste it in a document

Markup

As there are variations on the header, and the markup for each is specific and somewhat extensive, we recommend visiting the component page in the registry to find the markup that is most suited to your product.

There are intentionally no classes to switch between logged in and out as we don't want to do that in the client side. This is left up to the product.

Some elements inside the header require specific data attributes so the JavaScript can add some behaviour correctly. These are:

JavaScript

An o-header object must be constructed for every <header> you have on your page that uses this module.

const Header = require('o-header');
const headerEl = document.querySelector('.o-header');
const header = new oHeader(headerEl);

Alternatively, a o.DOMContentLoaded event can be dispatched on the document to auto-construct an o-header object for each element with a data-o-component="o-header" attribute:

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

Sass

The 'base' of the image url can be set with the $o-header-image-base-url variable. e.g. setting

$o-header-image-base-url: 'https://my.image.service/foo';

will output an image logo url in the format https://my.image.service/foo/v2/images/raw/ftlogo:....

The 'version' of the image url can be set with the $o-header-image-service-version variable. e.g. setting

$o-header-image-service-version: "v1";

will output an image logo url in the format https://my.image.service/foo/v1/images/raw/ftlogo:....

Silent mode (docs)

When using o-header in silent mode, we offer a series of helper mixins to output styles for different parts of the header.

oHeader

The header is made up of various features (e.g. nav, search, and drawer). To get everything, use the oHeader() mixin without arguments. To get only the stuff you need, you can pass in a list of features as the first argument.

The list of features is as follows:

To output styles for a feature only, excluding the core header styles, pass false as the second argument.

Example

To get all of the CSS needed for the FT homepage you would call:

oHeader(('sticky', 'simple', 'anon', 'search', 'nav', 'megamenu'));

Events

o-header fires the following events:

Browser Support

We use the standard o--if-js and o--if-no-js classes to hide elements in enhanced and core experience respectively

Migration Guide

Migrating from 6.x.x to 7.x.x

V7 introduces new major versions of o-colors, o-typography, o-buttons and o-visual-effects. Updating to this new version will mean updating any other components that you have which are using o-colors, o-typography, o-buttons, or o-visual-effects. There are no other breaking changes in this release.

Migrating from 5.x.x to 6.x.x

This is a complete change in the markup and usage of the module, so we advise to look at the markup in the demos and go over the readme. If any issues come up, please let us know.


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-header

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

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

Help & Support

o-header is maintained directly by the Origami team. If you have any questions about o-header 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