Scaling

Global scaling settings allow applications to adjust spacing density, typography sizing behavior, and grid breakpoints to best serve their audience and use case. These settings are applied at the application level—typically on the <html> element—and affect all Bolt components and utilities within the application.

scaling should be consistent across an application. Multiple density modes or typography scales should not appear on different pages or sections of the same product.

Density determines the size of Bolt's fluid spacing tokens, which in turn affects spacing classes and component styles using those tokens.

The following example demonstrates how different density modes affect spacing between and within components.

<bolt-textfield
  label="Default text field"
  class="bolt-space-bottom-xl"
></bolt-textfield>

<bolt-chip-group class="bolt-space-bottom-xl">
  <bolt-input-chip label="Category 1"></bolt-input-chip>
  <bolt-input-chip label="Category 2"></bolt-input-chip>
  <bolt-input-chip label="Category 3"></bolt-input-chip>
</bolt-chip-group>

<bolt-accordion-group header="Accordion group name">
  <bolt-accordion header="Accordion number one">
    Accordion content goes here
  </bolt-accordion>
  <bolt-accordion header="Accordion number two">
    Accordion content goes here
  </bolt-accordion>
</bolt-accordion-group>

• Density typically affects the vertical space within and between components on a page.
  • Exceptions include closely contained elements, like Buttons and Chips. These adjust space horizontally as well to maintain the benefits of the density mode in different layouts.
• Density should ONLY be applied at the application level.
  • Multiple density modes should not appear on a page at one time or change from page to page.
• For consumer-facing products, density changes should only be opt-in by the consumer.
  • Internal product teams may decide to make Compact or Sparse the default to best suit the user's needs.
• Some vertical internal component spacing may be fixed, such as in input and fieldset labels.
  • This is due to minimum space requirements to account for accessibility and visual variations (e.g. focus rings around inputs).

Density utility classes MUST be applied on the parent <html> element (on the same element as the bolt-typography class).

Options include:

• Default: (no additional class necessary)
• Compact: use bolt-density--compact class
  • Allows for MORE information to be visible at once (compared to default).
  • This higher density mode applies less white space between and around elements.
• Sparse: use bolt-density--sparse class
  • Allows for LESS information to be visible at once (compared to default).
  • This lower density mode applies more white space between and around elements.

<html class="bolt-typography bolt-density--compact">
  ...
</html>

Similar to density modes, Bolt's typography can be configured at the global level to prioritize readability or information density.

By default, most typography within Bolt is responsive and adjusts with viewport size. This fluid behavior ensures consistent visual hierarchy across devices without requiring manual breakpoint management.

Static typography configuration can be used to lock typography styles to either their minimum or maximum values, rather than scaling responsively. This is typically used in data-dense applications where power users need to see maximum information on screen, or when device sizes are fixed and predictable.

• Responsive (default): Typography scales automatically with viewport width (no additional class necessary)
• Minimum scale: use bolt-typography--min class to lock typography to minimum sizes
• Maximum scale: use bolt-typography--max class to lock typography to maximum sizes

<html class="bolt-typography bolt-typography--min">
  ...
</html>

For complete typography implementation details, see Typography principles.

Grid basis configuration can be used to opt into larger maximum breakpoints for Bolt's grid system and its containers.

This may be beneficial for applications with high data-density, as it increases the amount of screen real estate available to the grid as a whole and to each column within it.

For grid implementation details, see the Grid component.