Element Global - Density

Density is a foundational, SASS only component.

Density subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.

Basic usage

@use '@element/global/density';
@use '@element/global/density/mixins' as density-mixins;
@use '@element/global/density/functions' as density-functions;

The styles for applying density to button component instance looks like this:

@use "@element/button/button";

.my-custom-button {
  // Sets button density scale to 'compact', i.e. button height to `24px`.
  @include button.density(compact);
}

This would apply compact (high density) to button component instance. The available density levels are defined in the global/density/variables file and by default are default (0), comfortable (-1), and compact (-3). The numerical values are referred to as the density scale, with the more negative the value the more compact the component.

Here are the components that do provide density Sass mixins:

• Button
• Checkbox
• Chip
• Table
• Icon Button
• List
• Radio
• Switch
• Tab Bar
• Text Field

Style Customization

Density in CSS

Rather than using the mixins to customize density on a per-component basis, it is also possible to set a class on an HTML parent element. All children of that element will then use that density unless a particular component has been overridden. The available classes are:

• element-comfortable
• element-compact

Sass Variables

Sass Mixins

Components that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).

Currently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.

The height or size of a component is calculated with the following formula:

@use "@element/button/button";
@use "@element/global/density";

$height: button.$height + density.$interval * $density-scale;
/// @example 36px + 4px * (-3) => 24px