Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@financial-times/o-spacing

Package Overview
Dependencies
Maintainers
12
Versions
21
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@financial-times/o-spacing

Maintain consistent spaces across components and projects in accordance to our baseline grid and design guidelines.

  • 3.2.2
  • npm
  • Socket score

Version published
Weekly downloads
682
decreased by-56.7%
Maintainers
12
Weekly downloads
 
Created
Source

o-spacing

A styling utility component to aid projects and component with consistent spacing, according to the baseline grid within the design guidelines.

  • Usage
  • Spaces
  • Markup
  • CSS Custom Properties
  • Sass
  • Migration
  • Contact
  • Licence

Usage

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.

Spaces

Visual representation of spaces defined below.

The above illustration is taken from the UXD Sketch Toolkit.

Baseline

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

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.

namevalue
s14px
s28px
s312px
s416px
s624px
s832px
m1248px
m1664px
l1872px
l2496px

To apply named spaces see o-spacing markup and Sass documentation.

Markup

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).

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.

.example {
	margin: var(--o-spacing-s1);
}

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.

.example {
	padding: calc(var(--o-spacing-baseline) * 1); // A small padding (4px).
	margin-bottom: calc(var(--o-spacing-baseline) * 4); // A large space (16px).
}

Sass

Relative Units

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.

Named Space

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).
	}

Baseline Space

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);
	}

Custom Properties & Utility Classes

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
));

Migration

StateMajor VersionLast Minor ReleaseMigration guide
✨ active3N/Amigrate to v3
⚠ maintained22.1migrate to v2
╳ deprecated11.0N/A

Contact

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.

Licence

This software is published by the Financial Times under the MIT licence.

Keywords

FAQs

Package last updated on 21 Dec 2022

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc