Roosevelt

← Usage

Light mode and dark mode

Light mode and dark mode will be detected automatically based on operating system preference. To set it manually, you can apply an additional class of light or dark to your <form> elements to force the mode.

Overriding default styles

The most convenient way to override the default styles in Semantic Forms is to override the built-in CSS variables.

For example:

form.semanticForms {
  /* will overwrite the default semantic-forms values */
  --semanticFormsFontFamily: monospace;
  --semanticFormsTextColor: blue;
  --semanticFormsInputMinWidth: 300px;
}

Controlling how wide fields get

Fields are laid out in a grid whose columns grow to fill the available width. Three variables control the sizing:

• --semanticFormsInputMinWidth (default 250px): the narrowest a column may be. This is what decides how many columns fit across, and so how many fields sit side by side.
• --semanticFormsInputColumnMaxWidth (default 1fr): the widest a column may be. The default lets the columns share out whatever space is left over. Set a length to stop them growing past it. A value below --semanticFormsInputMinWidth has no effect, since the minimum wins.
• --semanticFormsInputMaxWidth (default 365px): the widest the field itself may be inside its column. Use this to keep fields a readable width while the columns themselves stay wide.

For a complete list of CSS variables you can override, see the top of styles/globals.scss.