Security News
RubyGems.org Adds New Maintainer Role
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
@financial-times/o-normalise
Advanced tools
Provides base styles and resets for stylesheets. Includes standardised utilities, such as visually hiding components or adding a consistent focus state.
Foundation styles and standardised utilities
Check out how to include Origami components in your project to get started with o-normalise
.
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.
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
- adds box-sizing: border-box
to 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 core
mode.
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.
State | Major Version | Last Minor Release | Migration guide |
---|---|---|---|
✨ active | 2 | N/A | migrate to v2 |
╳ deprecated | 1 | 1.7 | N/A |
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.
This software is published by the Financial Times under the MIT licence.
FAQs
Provides base styles and resets for stylesheets. Includes standardised utilities, such as visually hiding components or adding a consistent focus state.
The npm package @financial-times/o-normalise receives a total of 386 weekly downloads. As such, @financial-times/o-normalise popularity was classified as not popular.
We found that @financial-times/o-normalise demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 10 open source maintainers collaborating on the project.
Did you know?
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.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.