@financial-times/o-normalise - npm Package Compare versions

Comparing version 1.7.4 to 2.0.0-beta.1

package.json

		@@ -12,2 +12,4 @@ {
		"*.json",
		"*.js",
		"!main.js",
		"scss",
		@@ -27,5 +29,7 @@ "!bower.json",
		"name": "@financial-times/o-normalise",
		"version": "1.7.4",
		"version": "2.0.0-beta.1",
		"description": "Foundation styles and standardised utilities",
		"dependencies": {},
		"dependencies": {
		"@financial-times/o-colors": "^4.10.1"
		},
		"component": "o-normalise",
		@@ -32,0 +36,0 @@ "scripts": {},

README.md

		@@ -6,5 +6,4 @@ o-normalise [![Circle CI](https://circleci.com/gh/Financial-Times/o-normalise/tree/master.svg?style=svg)](https://circleci.com/gh/Financial-Times/o-normalise/tree/master) [![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](#licence)

		- [Usage](#usage)
		- [Sass](#sass)
		- [Focus States](#focus-states)
		- [Sass](#sass)
		- [Focus States](#focus-states)
		- [Contributing](#contributing)
		@@ -15,34 +14,40 @@ - [Contact](#contact)

		## Usage
		## Sass

		### Sass
		To output all `o-normalise` styles call the mixin `oNormalise`:

		As with all Origami components, o-normalise has a [silent mode](http://origami.ft.com/docs/syntax/scss/#silent-styles). 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.
		```scss
		@include oNormalise();
		```

		#### Available mixins
		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`:

		- `oNormaliseVisuallyHidden` - provides styles to [visually hide an element while remaining accessible to screen reader](https://snook.ca/archives/html_and_css/hiding-content-for-accessibility).
		- `oNormaliseClearfix` - adds clearfix styles to the element. See [this Sitepoint article for more on clearfixes - we use a variation on method 3.](https://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/)
		- `oNormaliseBoxSizing` - adds `box-sizing: border-box` to the current and all descending elements, see [this article by Paul Irish for a full explanation](https://www.paulirish.com/2012/box-sizing-border-box-ftw/).
		```scss
		@include oNormalise($opts: (
		'elements': ('forms', 'images', 'text', 'links'),
		'body': ('font-smoothing', 'box-sizing', 'focus', 'reduce-motion')
		));
		```

		##### Normalising styles
		Options include:

		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.
		\| 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', 'box-sizing', 'focus' \|
		\| helpers \| Classes which may be applied to elements manually. \| 'clearfix', 'visually-hidden' \|

		- `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
		_Note: if using the "focus" option in your project also include the `:focus-visible` polyfill. See [Focus States](#focus-states)._

		#### Available variables
		### Other Mixins

		- `$o-normalise-grid-gutters` - provides a map of standardised grid gutter sizes
		- `$o-normalise-border-radius` - provides a standardised border radius value
		- `oNormaliseVisuallyHiddenContent` - provides styles to [visually hide an element while remaining accessible to screen reader](https://snook.ca/archives/html_and_css/hiding-content-for-accessibility).
		- `oNormaliseClearfixContent` - adds clearfix styles to the element. See [this Sitepoint article for more on clearfixes - we use a variation on method 3.](https://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/)
		- `oNormaliseBoxSizingContent` - adds `box-sizing: border-box` to the current and all descending elements, see [this article by Paul Irish for a full explanation](https://www.paulirish.com/2012/box-sizing-border-box-ftw/).

		### Focus States
		## 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.
		`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](https://github.com/WICG/focus-visible) 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](https://github.com/WICG/focus-visible) with your project to apply these focus styles.
		No browser supports `:focus-visible` right now (31st Jan 2018) but there is [a polyfill](https://github.com/WICG/focus-visible) 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](https://github.com/WICG/focus-visible) at v4 or v5 with your project to apply these focus styles.

		@@ -57,4 +62,10 @@ `:focus` is used as a fallback in `core` mode.

		---
		## Migration

		State \| Major Version \| Last Minor Release \| Migration guide \|
		:---: \| :---: \| :---: \| :---:
		✨ active \| 2 \| N/A \| [migrate to v2](MIGRATION.md#migrating-from-v1-to-v2) \|
		╳ deprecated \| 1 \| 1.7 \| N/A \|


		## Contact
		@@ -61,0 +72,0 @@

dist/scss/_mixins.scss