Origami Frontend Components & Services

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

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

Switch component view

GitHub Repository

Install o-spacing

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

If running a Manual Build, run bower install --save "o-spacing@^2.0.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: #ft-origami
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: #ft-origami
Email: origami.support@ft.com