ShiftBy

No matter how impressive your design system is, there will always be times that small layout adjustments are required. This handy component lets you shift things around in small increments.

import React from 'react';

function ShiftBy({ x = 0, y = 0, children }) {
  return (
    <div
      style={{
        transform: `translate(${x}px, ${y}px)`,
      }}
    >
      {children}
    </div>
  );
}

export default ShiftBy;

It's used like this:

<ShiftBy x={-3}>
  <Heading>Slightly Misaligned Heading</Heading>
</ShiftBy>

Link to this headingExplanation

As discussed in Chasing the Pixel-Perfect Dream, there are often cases where an implementation doesn't quite look right. Sometimes, things are perfectly mathematically aligned, but they just don't quite look right, because of the way a font kerns or leads.

This tiny component allows us to adjust for these situations in a consistent, meaningful way. It draws a line between our encapsulated component styles and our in-spot tweaks, without opening the floodgates to all kinds of one-off edits.

I suspect many folks will be skeptical of this approach, but it's worked very well for me! Keep an open mind and give it a try. 🙂