Skip to content
Foundation styles and standardised utilities
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
.github
demos/src
src/scss
.gitignore
README.md
bower.json
main.scss
origami.json
package.json

README.md

o-normalise Circle CI MIT licensed

Foundation styles and standardised utilities

Usage

Sass

As with all Origami components, o-normalise has a silent mode. To use its compiled CSS (rather than using its mixins with your own Sass) set $o-normalise-is-silent : false; in your Sass before you import the o-normalise Sass.

Available mixins

Normalising styles

The following mixins apply normalising styles to groups of HTML elements, these aim to fix browser inconsistencies and any potential side-effects caused by browser default styles.

  • oNormaliseHTML - affects html, body, main elements and defaults :focus state
  • oNormaliseLinks - affects a tags and :hover & :active states
  • oNormaliseText - affects text related elements
  • oNormaliseImages - affects the img element
  • oNormaliseForms - affects form related elements

Available variables

  • $o-normalise-grid-gutters - provides a map of standardised grid gutter sizes
  • $o-normalise-border-radius - provides a standardised border radius value

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


Contact

If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #ft-origami or email Origami Support.


Licence

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

You can’t perform that action at this time.