Customizing Grid

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$grid-bg$component-bg
Description
Background color of the grid component
$grid-text$component-text
Description
Text color of the grid component
$grid-border$component-borderrgba( black, .08 )
Description
Border color of the grid component
$grid-header-bg$header-bg
Description
Background color of grid header
$grid-header-text$header-text
Description
Text color of grid header
$grid-header-border$grid-borderrgba( black, .08 )
Description
Border color of grid header
$grid-header-gradient$header-gradient
Description
Background gradient of grid header
$grid-alt-bgrgba( contrast-wcag( $grid-bg ), .04 )rgba( contrast-wcag( $grid-bg ), .04 )
Description
Background color of alternating rows in grid
$grid-alt-textnullnull
Description
Text color of alternating rows in grid
$grid-alt-bordernullnull
Description
Border color of alternating rows in grid
$grid-hovered-bgdarken($grid-bg, 7%)darken($grid-bg, 7%)
Description
Background color of hovered rows in grid
$grid-hovered-textnullnull
Description
Text color of hovered rows in grid
$grid-hovered-bordernullnull
Description
Border color of hovered rows in grid
$grid-selected-bgrgba($selected-bg, .25)rgba($selected-bg, .25)
Description
Background color of selected rows in grid
$grid-selected-textnullnull
Description
Text color of selected rows in grid
$grid-selected-bordernullnull
Description
Border color of selected rows in grid