@financial-times/o-normalise

o-normalise

Foundation styles and standardised utilities

• o-normalise
  • Usage
  • Sass
    • Other Mixins
  • Focus States
  • Contributing
  • Migration guide
  • Contact
  • Licence

Usage

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

Sass

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

• oNormaliseVisuallyHidden - provides styles to visually hide an element while remaining accessible to screen reader.
• oNormaliseClearfix - adds clearfix styles to the element. See this Sitepoint article for more on clearfixes - we use a variation on method 3.
• oNormaliseBoxSizing - adds box-sizing: border-box to the current and all descending elements, see this article by Paul Irish for a full explanation.

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.

Contributing

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

Contact

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.

---

Licence

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