Origami Frontend Components & Services

The Origami Registry is being decommissioned by the end of March 2024 and replaced with Storybook. For more information please read our blog post.

Please share any feedback in our #origami-chat Slack channel.

SassDoc: o-spacing

oSpacing(opts)

Output all o-spacing features.

parameter type default description
opts

Example

@include oSpacing($opts: (
	'margin-bottom-utilities': true, // Output CSS classes such as `o-spacing-s1`.
	'custom-properties': true // Output CSS variables.
));

Links

oSpacingByName(size-name)

parameter type default description
size-name Get a recommended space size by name.

Returns

Number - A px value (or rem value if relative units have been enabled).

Links

oSpacingByIncrement(increment)

parameter type default description
increment The number to multiply the baseline size by.

Returns

Number - A px value (or rem value if relative units have been enabled).

Links

oSpacingGetBaselineValue

Returns

Number - A px value representing our spacing baseline (or rem value if relative units have been enabled).

Links

o-spacing-relative-units

When true output relative rem space values, not px. Relative spaces will respect the browser's configured font size.

For legacy reasons, this defaults to false (outputs px units). Projects may need to be updated to support relative units.

Links

o-spacing-names

All space names supported by o-spacing.

Links

oSpacing(opts)

Output all o-spacing features.

parameter type default description
opts

Example

@include oSpacing($opts: (
	'margin-bottom-utilities': true, // Output CSS classes such as `o-spacing-s1`.
	'custom-properties': true // Output CSS variables.
));

Links

Status
active
Switch component view

GitHub: o-spacing@3.1.0

Install o-spacing

If using the Build Service, add o-spacing@^3.1.0 to your link tag.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-spacing@^3.1.0".

Help & Support

o-spacing is maintained directly by the Origami team. If you have any questions about o-spacing or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com