A styling utility component to aid projects and component with consistent spacing, according to the baseline grid within the design guidelines.
Check out how to include Origami components in your project to get started with
For Build Service users,
o-spacing provides CSS classes for vertical space and CSS Custom Properties (CSS Variables) for other usecases. For Sass users
o-spacing also provides a number of Sass functions and mixins for applying space to a project.
The above illustration is taken from the UXD Sketch Toolkit.
Our baseline grid defaults to 4px. Any multiple of this default may be applied to a project. We recommend using our named spaces for consistency.
Named spaces are the sizes we use to layout a component or page consistently. Each space is based on the 4px baseline. Small sizes such as
s2 are ideal for space within a component; use medium sizes
m16 for related content on a page; and large sizes
l24 for separating distinct areas within a project.
o-spacing provides utility classes to help space Origami components vertically within your project.
<!-- Add a 48px vertical margin between elements. -->
To apply spaces to other properties
o-spacing provides CSS Custom Properties (CSS Variables).
CSS Custom Properties
Named Space Custom Properties
o-spacing outputs a CSS Custom Property (CSS Variable) for each named space. E.g.
--o-spacing-s1. These may be used to apply spaces in custom CSS if your project supports CSS Custom Properties. This is particularly useful for Build Service users who do not have access to
o-spacing's Sass functions.
Baseline Custom Property
We recommend using a named space, but for more granular control a project may output any space which is a multiple of our baseline value. For users who do not have access to Sass,
o-spacing outputs a
--o-spacing-baseline CSS variable.
For compatibility with existing Origami projects,
px values by default. To use relative
rem values, set
$o-spacing-relative-units: true before importing
o-typography set $o-typography-relative-units also.
We recommend the use of named spaces, but any space that multiplies our baseline is allowed. To apply a multiple of the baseline value use
oSpacingByIncrement. It accepts a value to multiply the baseline by and returns a
px value (or
rem value, if relative units are enabled).
Custom Properties & Utility Classes
|State||Major Version||Last Minor Release||Migration guide|
|✨ active||2||N/A||migrate to v2|
This software is published by the Financial Times under the MIT licence.