https://github.com/bukinoshita/space

A spacing util
https://github.com/bukinoshita/space

design space spacing system theme ui

Last synced: 2 months ago
JSON representation

A spacing util

• Host: GitHub
• URL: https://github.com/bukinoshita/space
• Owner: bukinoshita
• License: mit
• Created: 2020-03-10T00:21:51.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2023-01-05T09:41:46.000Z (about 2 years ago)
• Last Synced: 2024-10-10T16:08:00.287Z (3 months ago)
• Topics: design, space, spacing, system, theme, ui
• Language: TypeScript
• Homepage:
• Size: 518 KB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 13
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

README

        
# Space

> A spacing util

## Install

```bash

$ yarn add @bukinoshita/space

```

## Usage

Example with [styled-jsx](https://github.com/zeit/styled-jsx).

```ts

// theme/space.ts

import { Space } from '@bukinoshita/space'

// It uses the `4px` grid by default

export const space = new Space()

```

```tsx

// components/my-component.tsx

import { space } from 'theme/spacing'

const MyComponent = () => (

  


    
Nice


    

    {`

      h1 {

        margin-bottom: ${space.spacing(2)} // 8px;

        color: black;

      }

    `}

    

  

)

```


You can find more [example here](/examples).

## API

### Space(grid, unit)

#### grid

Type: `number`


Default: `4`


Optional

#### unit

Type: `string`


Default: `px`


Optional

### .spacing(value)

#### value

Type: `number`


Required

## License

MIT © [Bu Kinoshita](https://bukinoshita.com)