@financial-times/o-normalise

o-normalise

Foundation styles and standardised utilities

• Usage
  • Sass
  • Focus States
• Contributing
• Contact
• Licence

Usage

Sass

As with all Origami components, o-normalise has a silent mode. To use its compiled CSS (rather than using its mixins with your own Sass) set $o-normalise-is-silent : false; in your Sass before you import the o-normalise Sass.

Available 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.

Normalising styles

The following mixins apply normalising styles to groups of HTML elements, these aim to fix browser inconsistencies and any potential side-effects caused by browser default styles.

• oNormaliseHTML - affects html, body, main elements and defaults :focus state
• oNormaliseLinks - affects a tags and :hover & :active states
• oNormaliseText - affects text related elements
• oNormaliseImages - affects the img element
• oNormaliseForms - affects form related elements

Available variables

• $o-normalise-grid-gutters - provides a map of standardised grid gutter sizes
• $o-normalise-border-radius - provides a standardised border radius value

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 UA determines that the focus should be specially indicated.

No browser supports :focus-visible right now (31st Jan 2018) but there is a polyfill which roughly mimics the behaviour by adding a class .focus-visible to an element if it should have :focus-visible applied to it. Integrate the polyfill with your project to apply these focus styles.

:focus is used as a fallback in core mode.

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.

---

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.