Foundation styles and standardised utilities
To include features of
Options include:
| Feature | Description | Values | |---------------------|---------------------------------------------------------------------------------------------------------------------|-----------------------------------------| | elements | Element types to apply normalising styles to. | 'forms', 'images', 'text', 'links' | | body | Features which apply to
Browser support is now good so we no longer recommend the focus-visible polyfill, this should be removed from your project.
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.
- [Usage](#usage)
- [Sass](#sass)
- [Other Mixins](#other-mixins)
- [Focus States](#focus-states)
- [Contributing](#contributing)
- [Migration guide](#migration-guide)
- [Contact](#contact)
- [Licence](#licence)
Usage
Check out how to include Origami components in your project to get started witho-normalise
.Sass
To output all defaulto-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
- addsbox-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 too-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.