Grid unit utility

Historically, we’ve been using a 10px base grid for most of the things, then started to introduce a 8px grid for some things. In the future, we want to be using the 8px grid only.

I think having a utility for this would help to make the transition to 8px faster and easier to follow. There are of course many cases where we don’t want grid units. It is not about doing everything with it, but more as a convenience tool to make sure we use multiples of the grid unit when we want it. It would also help making a semantic distinction between e.g. 8px when we want exactly 8px, and gu(1) because we want to use one grid unit that happens to be 8px too.

In the Aragon’s App Center PR, I started experimenting with using a constant to reinforce the grid unit we use for spacing:

import { GU } from '../utils'
const App = () => <div css={`margin: ${GU}px ${4 * GU}px`} />

The problem is that it’s pretty verbose.

Another option would be to expose a function:

import { gu } from '../utils'

const App = () => <div css={`margin: ${gu(1)}px ${gu(4)}px`} />

// We could even add `px` by default:

const App = () => <div css={`margin: ${gu(1)} ${gu(4)}`} />

But it’s still quite verbose. It would also add a lot of function calls, but it probably doesn’t have any significant impact on modern JS engines.

Another solution to make it less verbose could be to extend the way styled-components transforms styles to add a custom syntax:

// As a CSS unit
const App = () => <div css="margin: 1gu 4gu" />

// As a CSS function
const App = () => <div css="margin: gu(1) gu(4)" />

Another solution could have been to use a CSS variable for it, but they are too verbose:

const App = () => <div css="margin: calc(1 * var(--gu)) calc(4 * var(--gu))" />

Proposal 1

As a first step:

• Make the GU constant available (GU = 8).
• Export a function named g() rather than gu() (shorter).
• g() would add px to the value, e.g. g(2) would return 16px.

That way, we could use both GU and g() depending on what is needed. I don’t like the naming much, but they would be so common that I think conciseness is the most important aspect here. We could also have long name equivalents (GRID_UNIT and gridUnit()), but I don’t think they would be used at all.

It would means having this kind of syntax for now:

import { AppBar, GU, g } from '@aragon/ui'

const App = () => (
  <AppBar padding={3 * GU}>
      <div css={`margin: ${g(1)} ${g(4)}`} />
  </AppBar>
)

Later, we could add:

• A babel transform to remove these function calls: g(x) => (GU * x + 'px').
• A styled-components transform, to have the utility as a CSS function directly: g(2) => 16px.

Which would two dependencies to use aragonUI in an optimal way: the styled-components transform (which would be a runtime dependency), and the babel transform, which would also make babel itself a recommended tool to build apps with aragonUI.

Same example with the styled-components transform:

import { AppBar, GU } from '@aragon/ui'

const App = () => (
  <AppBar padding={3 * GU}>
      <div css="margin: g(1) g(4)" />
  </AppBar>
)

Proposal 2

I wonder if we should try to use a function rather than the constant? I don’t like mixing the two, to achieve a very similar thing. I don’t think we should have a second parameter (too verbose), but maybe another function?

We could have gp() for “grid units in pixels”, and gu() for “grid units” (number).

Or g() for “grid units in pixels” (as it is the most commonly used), and gn() for “grid units as number”.

import { AppBar, g, gn } from '@aragon/ui'

const App = () => (
  <AppBar padding={gn(3)}>
      <div css={`margin: ${g(1)} ${g(4)}`} />
  </AppBar>
)

With the styled transform:

import { AppBar, g, gn } from '@aragon/ui'

const App = () => (
  <AppBar padding={gn(3)}>
      <div css="margin: g(1) g(4)" />
  </AppBar>
)

[bpierre]

@sohkai @delfipolito @AquiGorka Shall we go for this? Please vote with 👍 or 👎

// shall we export this too?
const GRID_UNIT = 8

// gu() as in “grid unit”
const gu = (v = 1) => v * GRID_UNIT

// g() as in “grid unit for CSS”, but as short as possible 😆
const g = v => gu(v) + 'px'

Usage, without the styled transform:

import { AppBar, g, gu } from '@aragon/ui'

const App = () => (
  <AppBar padding={gu(3)}>
      <div css={`margin: ${g(1)} ${g(4)}`} />
  </AppBar>
)

Usage with the styled transform:

import { AppBar, gu } from '@aragon/ui'

const App = () => (
  <AppBar padding={gu(3)}>
      <div css="margin: g(1) g(4)" />
  </AppBar>
)

[metamn]

Right! It was my machine … restarted (khmmm …😉 and all works fine now! Thank you for the great help!