Foundation styles and standardised utilities
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.
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.
box-sizing: border-boxto the current and all descending elements, see this article by Paul Irish for a full explanation.
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.
mainelements and defaults
oNormaliseText- affects text related elements
oNormaliseImages- affects the
oNormaliseForms- affects form related elements
$o-normalise-grid-gutters- provides a map of standardised grid gutter sizes
$o-normalise-border-radius- provides a standardised border radius value
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
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.
This software is published by the Financial Times under the MIT licence.