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.
This software is published by the Financial Times under the MIT licence.