Origami Frontend Components & Services

Readme: o-normalise

Foundation styles and standardised utilities


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


To output all default o-normalise styles call the mixin oNormalise:

@include oNormalise();

To include features of o-normalise granularly, pass an $opts map. E.g. to output all styles except for the css helper classes o-normalise-visually-hidden and o-normalise-clearfix:

@include oNormalise($opts: (
    'elements': ('forms', 'images', 'text', 'links'),
    'body': ('font-smoothing', 'focus', 'reduce-motion')

Options include:

Feature Description Values
elements Element types to apply normalising styles to. 'forms', 'images', 'text', 'links'
body Features which apply to html, body, main elements and all elements with a :focus state. 'font-smoothing', 'focus'
helpers Classes which may be applied to elements manually. 'clearfix', 'visually-hidden'

Other Mixins

Focus States

o-normalise provides default focus states using the :focus-visible pseudo-class. This applies while an element matches the :focus pseudo-class and the user-agent determines that the focus should be specially indicated.

Browser support is now good so we no longer recommend the focus-visible polyfill, this should be removed from your project. :focus is used as a fallback where needed in older browsers.


If you think there is something that could be added to o-normalise, either raise an issue to discuss or create a Pull Request with the changes to be reviewed by the Origami team.

If you think of any JavaScript functions or utilities that would be useful to have in a module like this, please raise an issue on o-utils.

Migration guide

State Major Version Last Minor Release Migration guide
✨ active 3 N/A migrate to v3
⚠ maintained 2 2.0 migrate to v2
╳ deprecated 1 1.7 N/A


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


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

Switch component view

GitHub: o-normalise@3.3.1

Install o-normalise

If using the Build Service, add o-normalise@^3.3.1 to your link tag.

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

Help & Support

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