Foundation styles and standardised utilities
Check out how to include Origami components in your project to get started with
To output all default
o-normalise styles call the mixin
To include features of
o-normalise granularly, pass an
$opts map. E.g. to output all styles except for the css helper classes
@include oNormalise($opts: ( 'elements': ('forms', 'images', 'text', 'links'), 'body': ('font-smoothing', 'focus', 'reduce-motion') ));
Note: if using the "focus" option in your project also include the
:focus-visible polyfill. See Focus States.
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.
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.
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 at v4 or v5 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.
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.