Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@financial-times/o-normalise

Package Overview
Dependencies
Maintainers
18
Versions
33
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

  • 3.0.0-beta.0
  • prerelease
  • npm
  • Socket score

Version published
Weekly downloads
696
decreased by-56.12%
Maintainers
18
Weekly downloads
 
Created
Source

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:

FeatureDescriptionValues
elementsElement types to apply normalising styles to.'forms', 'images', 'text', 'links'
bodyFeatures which apply to html, body, main elements and all elements with a :focus state.'font-smoothing', 'focus'
helpersClasses 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

StateMajor VersionLast Minor ReleaseMigration guide
✨ active2N/Amigrate to v2
╳ deprecated11.7N/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.

Keywords

FAQs

Package last updated on 29 Apr 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc