https://github.com/binjospookie/spacing-helper

A tiny (117 bytes) and blazing fast standalone helper for creating consistent spacing between the elements of your UI
https://github.com/binjospookie/spacing-helper

cssinjs emotion helper spacing styled-components tiny ui

Last synced: about 1 month ago
JSON representation

A tiny (117 bytes) and blazing fast standalone helper for creating consistent spacing between the elements of your UI

• Host: GitHub
• URL: https://github.com/binjospookie/spacing-helper
• Owner: binjospookie
• License: mit
• Created: 2019-11-09T13:51:56.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-04-12T02:56:33.000Z (over 1 year ago)
• Last Synced: 2024-10-02T19:47:56.368Z (2 months ago)
• Topics: cssinjs, emotion, helper, spacing, styled-components, tiny, ui
• Language: JavaScript
• Homepage:
• Size: 2.53 MB
• Stars: 46
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-blazingly-fast - spacing-helper - A tiny (117 bytes) and blazing fast standalone helper for creating consistent spacing between the elements of your UI (JavaScript)

README

        
# Spacing-helper

A tiny (117 bytes) and blazing fast standalone helper for creating consistent spacing between the elements of your UI.

```js

import { createSpacing } from 'spacing-helper';

const spacing = createSpacing({ factor: 8 }); // 8 is default scaling factor

spacing(1,2,3,4); // '8px 16px 24px 32px'

```

## Installation

`npm i spacing-helper` or `yarn add spacing-helper`

## Motivation

Let's see some code

```js

const HeaderStyled = styled.header`

    margin: 16px 24px;

    ...

`;

```

Make it consistent

```js

const MODULE = 8;

const HeaderStyled = styled.header`

    margin: ${MODULE * 2}px ${MODULE * 3}px;

    ...

`;

```

Make it pretty

```js

const HeaderStyled = styled.header`

    margin: ${spacing(2)} ${spacing(3)};

    ...

`;

```

And...

```js

const HeaderStyled = styled.header`

    margin: ${spacing(2, 3)};

    ...

`;

```

## More examples

```js

const spacing = createSpacing({ factor: 8 });

expect(spacing()).toBe('8px');

expect(spacing(2)).toBe('16px');

expect(spacing(1, 2)).toBe('8px 16px');

expect(spacing(1, 2, 3)).toBe('8px 16px 24px');

expect(spacing(1, 2, 3, 4)).toBe('8px 16px 24px 32px');

```

```js

const spacingFull = createSpacing({ factor: 8, units: 'rem', divisor: 100 });

expect(spacingFull(1, 2)).toBe('0.08rem 0.16rem');

expect(spacingFull(1, 2, 3)).toBe('0.08rem 0.16rem 0.24rem');

expect(spacingFull(1, 2, 3, 4)).toBe('0.08rem 0.16rem 0.24rem 0.32rem');

```

## API

Name | Type | Default | Description |

------ | ------ | ------ | -----|

`divisor` | number | 1 | divisor for multiplication result of spacing and factor |

`factor` | number | 8 | scaling factor |

`precision` | number | 2 | precision of divisions |

`units` | string | "px" | units of transforms result (e.g. px, rem, em) |

## Benchmarks

Version | ops/sec |

------ | ------ |

`v3` | 2,240,720 |

`v4.x` | 26,891,052 |