@financial-times/o-normalise

Provides base styles and resets for stylesheets. Includes standardised utilities, such as visually hiding components or adding a consistent focus state.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@financial-times/o-normalise
3.2.28 months ago4 years agoMinified + gzip package size for @financial-times/o-normalise in KB

Readme

o-normalise MIT licensed
Foundation styles and standardised utilities

Usage

Check out how to include Origami components in your project to get started with o-normalise.

Sass

To output all default o-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' |
Note: if using the "focus" option in your project also include the :focus-visible polyfill. See Focus States.

Other Mixins

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

Migration guide

State | Major Version | Last Minor Release | Migration guide | :---: | :---: | :---: | :---: ✨ active | 3 | N/A | migrate to v3 | ⚠ maintained | 2 | 2.0 | migrate to v2 | ╳ deprecated | 1 | 1.7 | N/A |

Contact

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.

Licence

This software is published by the Financial Times under the MIT licence
.