@financial-times/o-normalise
v3.3.2
Published
Provides base styles and resets for stylesheets. Includes standardised utilities, such as visually hiding components or adding a consistent focus state.
Downloads
8,116
Readme
o-normalise
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' |
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 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.