00_white-space.md

Spacings

Paddings

• all
• x, y

Margins

• all
• top, right, bottom, left
• x, y
• auto

01_api.js

paddings.all[0] // 0 til 4

02_util.js

/**
 * given a model and a direction it returns a function which given 
 * a `size` returns an object like `{ paddingLeft: 0 }`
 */

const gen =
  (model, direction) =>
    (size) => ({ [model + upper(direction)]: size })

//generateDirections('margin', ['top', 'bottom'])

03_paddings.js

const left = gen('padding', 'left')
const right = gen('padding', 'right')
const top = gen('padding', 'top')
const bottom = gen('padding', 'bottom')

const all = size => ({ padding: size })

const x = size => ({ ...left(size), ...right(size) })
// or: const x = size => mergeAll([ left(size), right(size) ])

const y = size => ({ ...top(size), ...bottom(size) })

04_margins.js

const left = gen('margin', 'left')
const right = gen('margin', 'right')
const top = gen('margin', 'top')
const bottom = gen('margin', 'bottom')

const all = size => ({ margin: size })

const x = size => ({ ...left(size), ..right(size) })

const y = size => ({ ...top(size), ..bottom(size) })

const auto = () => x('auto')