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},

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

Property	Value
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 }
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 }