Skip to main content

Gutters

How to use ?​

Generated styles provided by the gutters section of the theme configuration assist in applying margin and padding to your components. You can access these styles using the following code:

const { gutters } = useTheme()

For more details, refer to the gutters section of the theme configuration.

Generated gutters​

Here's the representation of the generated styles for a given GuttersConfig like the one below:

export const config = {
    // ...
    gutters: [...value],
    // ...
}

Where value is an array of numbers, the generated keys available through the gutters key will be the concatenation of the gutter name and the value, including:

  • margin_${value},
  • marginBottom_${value},
  • marginTop_${value},
  • marginRight_${value},
  • marginLeft_${value},
  • marginVertical_${value},
  • marginHorizontal_${value},
  • padding_${value},
  • paddingBottom_${value},
  • paddingTop_${value},
  • paddingRight_${value},
  • paddingLeft_${value},
  • paddingVertical_${value},
  • paddingHorizontal_${value},
  • gap_${value},

The corresponding values behind these keys will be:

{
    [gutter_name]: value
}

This structure simplifies the process of accessing and applying margin and padding styles with various gutter values.

Static gutter styles​

Some gutter styles, don't require dynamic generation. To accommodate this, we offer the staticGuttersStyles object that houses static styles for gutters. You can use this file as-is or customize it to your preferences. These styles will be seamlessly merged with the generated ones, making them accessible through the gutters object of the useTheme hook.

Playground​

Here's a simple playground that provides a visual representation of the objects generated from a given gutters configuration:

export const config = { 
  //... 
  gutters: [], 
  //... 
}

Generated classes

PropertyValue
gap_10{ gap: 10 }
margin_10{ margin: 10 }
marginBottom_10{ marginBottom: 10 }
marginTop_10{ marginTop: 10 }
marginRight_10{ marginRight: 10 }
marginLeft_10{ marginLeft: 10 }
marginVertical_10{ marginVertical: 10 }
marginHorizontal_10{ marginHorizontal: 10 }
padding_10{ padding: 10 }
paddingBottom_10{ paddingBottom: 10 }
paddingTop_10{ paddingTop: 10 }
paddingRight_10{ paddingRight: 10 }
paddingLeft_10{ paddingLeft: 10 }
paddingVertical_10{ paddingVertical: 10 }
paddingHorizontal_10{ paddingHorizontal: 10 }
gap_20{ gap: 20 }
margin_20{ margin: 20 }
marginBottom_20{ marginBottom: 20 }
marginTop_20{ marginTop: 20 }
marginRight_20{ marginRight: 20 }
marginLeft_20{ marginLeft: 20 }
marginVertical_20{ marginVertical: 20 }
marginHorizontal_20{ marginHorizontal: 20 }
padding_20{ padding: 20 }
paddingBottom_20{ paddingBottom: 20 }
paddingTop_20{ paddingTop: 20 }
paddingRight_20{ paddingRight: 20 }
paddingLeft_20{ paddingLeft: 20 }
paddingVertical_20{ paddingVertical: 20 }
paddingHorizontal_20{ paddingHorizontal: 20 }