What does it mean to generate density in Angular Material?

Question

The Angular Material source code has this property:

// Whether density should be generated by default.
$_mat-theme-generate-default-density: true !default;

What does Angular Material mean by generating density? A simple CSS example illustrating it would be awesome.

Answer 1

Following Material design specs. Angular Material is implementing features to config the density of components.

The mean of density it's about make components more easy to find, priorice actions and make it more visible. See more on Material design density usage

For simple css example it could be a list of boxes and it's padding change by viewport changes.

Run the code snippet and change the window viewport size.

.container {
  display: flex;
  flex-direction: column;
}

.box {
  box-sizing: border-box;
  padding: 10vh 5vw;
  margin: 5px;
  background-color: #ccc;
  width: 100%;
}

<div class="container">
 <div class="box">1</div>
 <div class="box">2</div>
 <div class="box">3</div>
</div>