Research
Security News
Threat Actor Exposes Playbook for Exploiting npm to Build Blockchain-Powered Botnets
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
@financial-times/o-spacing
Advanced tools
Maintain consistent spaces across components and projects in accordance to our baseline grid and design guidelines.
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 o-spacing
.
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 s1
or s2
are ideal for space within a component; use medium sizes m12
and m16
for related content on a page; and large sizes l18
, l24
for separating distinct areas within a project.
name | value |
---|---|
s1 | 4px |
s2 | 8px |
s3 | 12px |
s4 | 16px |
s6 | 24px |
s8 | 32px |
m12 | 48px |
m16 | 64px |
l18 | 72px |
l24 | 96px |
To apply named spaces see o-spacing
markup and Sass documentation.
o-spacing
provides utility classes to help space Origami components vertically within your project.
<!-- Add a 48px vertical margin between elements. -->
<div class='o-spacing-m12'></div>
<div class='o-spacing-m12'></div>
To apply spaces to other properties o-spacing
provides CSS Custom Properties (CSS Variables).
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.
.example {
margin: var(--o-spacing-s1);
}
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.
.example {
padding: calc(var(--o-spacing-baseline) * 1); // A small padding (4px).
margin-bottom: calc(var(--o-spacing-baseline) * 4); // A large space (16px).
}
For compatibility with existing Origami projects, o-spacing
outputs px
values by default. To use relative rem
values, set $o-spacing-relative-units: true
before importing @financial-times/o-spacing/main
.
$o-spacing-relative-units: true;
.example {
padding: oSpacingByName('s1'); // Small padding (0.24rem).
margin-bottom: oSpacingByName('m12'); // Medium margin (3rem).
}
If using o-typography
set $o-typography-relative-units also.
We recommend Sass users apply space to their project using the oSpacingByName
function. It accepts a space name and returns a px
value (or rem
value, if relative units are enabled).
.example {
padding: oSpacingByName('s1'); // Small padding (4px).
margin-bottom: oSpacingByName('m12'); // Medium margin (48px).
}
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).
.example {
margin-bottom: oSpacingByIncrement(4);
}
We recommend users apply named spaces using the Sass function oSpacingByName, but Sass users may output all o-spacing
CSS including utility classes and CSS custom properties using the oSpacing
mixin.
@include oSpacing($opts: (
'margin-bottom-utilities': true, // Output CSS classes such as `o-spacing-s1`
'custom-properties': true // Output CSS variables
));
State | Major Version | Last Minor Release | Migration guide |
---|---|---|---|
✨ active | 3 | N/A | migrate to v3 |
⚠ maintained | 2 | 2.1 | migrate to v2 |
╳ deprecated | 1 | 1.0 | N/A |
If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #origami-support or email Origami Support.
This software is published by the Financial Times under the MIT licence.
FAQs
Maintain consistent spaces across components and projects in accordance to our baseline grid and design guidelines.
The npm package @financial-times/o-spacing receives a total of 375 weekly downloads. As such, @financial-times/o-spacing popularity was classified as not popular.
We found that @financial-times/o-spacing demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 10 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.