Fibonacci Spacing

Spacing for a design system, but it's fibonacci!

Install

Using npm:

npm install @quassum/fibonacci-spacing

Using yarn:

yarn add @quassum/fibonacci-spacing

Usage

Basic usage

import { getFibonacciSpacing } from '@quassum/fibonacci-spacing';

const spacing = getFibonacciSpacing();
// Results in:
// const spacing = {
//   1: '1px',
//   2: '2px',
//   3: '3px',
//   5: '5px',
//   8: '8px',
//   13: '13px',
//   etc...
// }

Options

You can also provide some options, for example you could provide a different unit to generate:

const spacing = getFibonacciSpacing({ unit: 'rem' });

Notice that when changing the unit, the generates spacing constant generates the correct types for each value in fibonacci sequence.

You could also invert the values. In that case when accessing the values by their fibonacci numbered keys, you will get value which is equal to 1 divided by that value. For example, following shows the examples of the values you get:

const spacing = getFibonacciSpacing({ unit: 'rem', invert: true });

spacing[1]; // '1rem'
spacing[5]; // '0.2rem'
spacing[8]; // '0.125rem'
// etc

TypeScript

When you run getFibonacciSpacing function, the returned result is typed as literal string types, so the types you get are the same as the values.

const spacing = getFibonacciSpacing();

const first = spacing[1]
// value: '1px'
// intellisense type: '1px'

Contributors

• Antoni Silvestrovic (author)

License

MIT