Options

Quickly customize OUDS Web with built-in variables to easily toggle global CSS preferences for controlling style and behavior.

Customize OUDS Web with our built-in custom variables file and easily toggle global CSS preferences with new $enable-* Sass variables. Override a variable’s value and recompile with npm run test as needed.

You can find and customize these variables for key global options in OUDS Web’s scss/_variables.scss file.

Variable	Values	Description
`$ouds-dimension-base`	`4px` (default), or any value > 0	Specifies the default spacer value to programmatically generate our spacer utilities.
`$enable-dark-mode`	`true` (default) or `false`	Enables built-in dark mode support across the project and its components.
`$enable-rounded`	`true` (default) or `false`	Enables predefined `border-radius` styles on various components.
`$enable-gradients`	`true` or `false` (default)	Enables predefined gradients via `background-image` styles on various components.
`$enable-bootstrap-compatibility`	`true` or `false` (default)	Enforces Bootstrap compatibility.
`$enable-cssgrid`	`true` or `false` (default)	Enables the experimental CSS Grid system (e.g. `.grid`, `.g-col-md-1`, etc.).
`$enable-grid-classes`	`true` (default) or `false`	Enables the generation of CSS classes for the grid system (e.g. `.row`, `.col-md-1`, etc.).
`$enable-container-classes`	`true` (default) or `false`	Enables the generation of CSS classes for layout containers.
`$enable-button-pointers`	`true` (default) or `false`	Add "hand" cursor to non-disabled button elements.
`$enable-negative-margins`	`true` or `false` (default)	Enables the generation of negative margin utilities.
`$enable-deprecation-messages`	`true` (default) or `false`	Set to `false` to hide warnings when using any of the deprecated mixins and functions that are planned to be removed in Bootstrap `v6`.
`$enable-important-utilities`	`true` (default) or `false`	Enables the `!important` suffix in utility classes.
`$enable-bullet-list-tick`	`true` or `false` (default)	Enables the `.bullet-list-tick` CSS class, see Bullet list documentation.