Origami Frontend Components & Services

Readme: o-layers

o-layers has a support status of "deprecated". This means that no new features will be added to this component, but security-related bugs will be fixed. We do not recommend using this component in new projects. If you still rely on this component or have concerns, please contact the Origami team.

Deprecated: This component was not widely used and therefore did not meet its aim of managing the z-index between components and projects. There is no direct replacement for o-layers. Instead fire component specific events to indicate that a new "layer" such as an overlay has been opened.

This module provides a namespace for managing modules that make use of the z-axis, providing events, css classes and coding conventions that modules must use to interact with other modules that use the z-axis


Check out how to include Origami components in your project to get started with o-layers.

Terminology and concepts


A Layer refers to the owned DOM, or portion of owned DOM, of any module that makes use of the z-axis.

Layer context

A Layer context refers to a HTML element where every layer lying within it should only be concerned with other layers if they also lie within it. e.g. Within an interactive graphic any popups only need concern themselves with the state of other popups which also overlay the same graphic; they can safely disregard popups overlaying a different graphic.

document.body is the default layer context.

### o-layers__context class

This class should be added to any element (other than document.body) which needs to behave as a layer context. All layers must either

In general a new layer context should only be defined if you are very sure any layers it contains will never interfere (either through directly overlapping or by leaving a distracting, no longer needed UI element) with anything outside of it.


All layer contexts (with the exception of document.body) should have the following css properties defined (o-layers does not provide sass for this as there is considerable variation in acceptable values)

Javascript helper

oLayers#getLayerContext(el) will return the given element's layer context.


The following custom events must be fired on a layer's closest ancestor with the class o-layers__context (or on document.body if no such element exists). The Event.details property must define all the properties from the list below that are truthy for the given layer


This should be fired immediately before any layer is added to the DOM/displayed.


This should be fired immediately after any layer is removed from the DOM/hidden.

Coding conventions

Any module which controls one or more layers must implement the following patterns:


Copyright (c) 2016 Financial Times Ltd. All rights reserved.

This software is published under the MIT licence.

deprecated Origami v1 (Bower)
Switch component view

GitHub: o-layers

Install o-layers

If using the Build Service, add o-layers@^2.1.6 to your script tag.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-layers@^2.1.6".

Help & Support

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

Slack: #origami-support
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: #origami-support
Email: origami.support@ft.com