Translate

Utilities for translating elements with transform.

Usage

Translate an element by first enabling transforms with the transform utility, then specifying the translate direction and distance using the translateX={space} and translateY={space} utilities.

<x.img transform translateY={6} />
<x.img transform translateY={-6} />
<x.img transform translateY={0} />

Responsive

To control the translation of an element at a specific breakpoint, use responsive object notation. For example, adding the property translateX={{ md: 6 }} to an element would apply the translateX={6} utility at medium screen sizes and above.

<x.div transform translateX={{ md: 6 }} />

For more information about xstyled's responsive design features, check out Responsive Design documentation.

Customizing

Spacing scale

If you'd like to customize your values for margin, padding, space between, all at once, use the theme.space section of your theme.

  // theme.js
  export const theme = {
    space: {
+     sm: '8px',
+     md: '16px',
+     lg: '24px',
+     xl: '48px',
    },
  }

Learn more about customizing the default theme in the theme customization documentation.

If you don't want to customize it, a set of space is already defined in default theme:

const defaultTheme = {
  // ...
  space: {
    0.5: '0.125rem',
    1: '0.25rem',
    1.5: '0.375rem',
    2: '0.5rem',
    2.5: '0.625rem',
    3: '0.75rem',
    3.5: '0.875rem',
    4: '1rem',
    5: '1.25rem',
    6: '1.5rem',
    7: '1.75rem',
    8: '2rem',
    9: '2.25rem',
    10: '2.5rem',
    11: '2.75rem',
    12: '3rem',
    14: '3.5rem',
    16: '4rem',
    20: '5rem',
    24: '6rem',
    28: '7rem',
    32: '8rem',
    36: '9rem',
    40: '10rem',
    44: '11rem',
    48: '12rem',
    52: '13rem',
    56: '14rem',
    60: '15rem',
    64: '16rem',
    72: '18rem',
    80: '20rem',
    96: '24rem',
  },
}