BrutCSS Reference Documentation

Dimensions Classes

Dimensions, namely width and height. These are all using an 8-step scale with 1 being the smallest width and 8 the largest. These scales use the Widths Heights scale, which, by default, is double the respective value from Spacing. This should result in harmonious designs that align on a grid. There are also percentage-based scales where the value in the class is the percentage, with the addition of third and two-thirds.

Widths

Numeric/fixed widths.

.w-1 {
  width: var(--wh-1);
}

.w-2 {
  width: var(--wh-2);
}

.w-3 {
  width: var(--wh-3);
}

.w-4 {
  width: var(--wh-4);
}

.w-5 {
  width: var(--wh-5);
}

.w-6 {
  width: var(--wh-6);
}

.w-7 {
  width: var(--wh-7);
}

.w-8 {
  width: var(--wh-8);
}

Width Percent

Percentage widths.

.w-10 {
  width: 10%;
}

.w-20 {
  width: 20%;
}

.w-25 {
  width: 25%;
}

.w-30 {
  width: 30%;
}

.w-40 {
  width: 40%;
}

.w-50 {
  width: 50%;
}

.w-60 {
  width: 60%;
}

.w-70 {
  width: 70%;
}

.w-75 {
  width: 75%;
}

.w-80 {
  width: 80%;
}

.w-90 {
  width: 90%;
}

.w-100 {
  width: 100%;
}

.w-third {
  width: calc(100% / 3);
}

.w-two-thirds {
  width: calc(100% / 1.5);
}

Width View Width

View-width percentage widths

.w-10vw {
  width: 10vw;
}

.w-20vw {
  width: 20vw;
}

.w-30vw {
  width: 30vw;
}

.w-40vw {
  width: 40vw;
}

.w-50vw {
  width: 50vw;
}

.w-60vw {
  width: 60vw;
}

.w-70vw {
  width: 70vw;
}

.w-80vw {
  width: 80vw;
}

.w-90vw {
  width: 90vw;
}

.w-100vw {
  width: 100vw;
}

.w-auto {
  width: auto;
}

.mw-1 {
  max-width: var(--wh-1);
}

.mw-2 {
  max-width: var(--wh-2);
}

.mw-3 {
  max-width: var(--wh-3);
}

.mw-4 {
  max-width: var(--wh-4);
}

.mw-5 {
  max-width: var(--wh-5);
}

.mw-6 {
  max-width: var(--wh-6);
}

.mw-7 {
  max-width: var(--wh-7);
}

.mw-8 {
  max-width: var(--wh-8);
}

.mw-10 {
  max-width: 10%;
}

.mw-20 {
  max-width: 20%;
}

.mw-25 {
  max-width: 25%;
}

.mw-30 {
  max-width: 30%;
}

.mw-40 {
  max-width: 40%;
}

.mw-50 {
  max-width: 50%;
}

.mw-60 {
  max-width: 60%;
}

.mw-70 {
  max-width: 70%;
}

.mw-75 {
  max-width: 75%;
}

.mw-80 {
  max-width: 80%;
}

.mw-90 {
  max-width: 90%;
}

.mw-100 {
  max-width: 100%;
}

.mw-third {
  max-width: calc(100% / 3);
}

.mw-two-thirds {
  max-width: calc(100% / 1.5);
}

Width View Max Width

View-width percentage maximum widths

.mw-10vw {
  max-width: 10vw;
}

.mw-20vw {
  max-width: 20vw;
}

.mw-30vw {
  max-width: 30vw;
}

.mw-40vw {
  max-width: 40vw;
}

.mw-50vw {
  max-width: 50vw;
}

.mw-60vw {
  max-width: 60vw;
}

.mw-70vw {
  max-width: 70vw;
}

.mw-80vw {
  max-width: 80vw;
}

.mw-90vw {
  max-width: 90vw;
}

.mw-100vw {
  max-width: 100vw;
}

Min Width

Numeric/fixed minimum widths

.minw-1 {
  min-width: var(--wh-1);
}

.minw-2 {
  min-width: var(--wh-2);
}

.minw-3 {
  min-width: var(--wh-3);
}

.minw-4 {
  min-width: var(--wh-4);
}

.minw-5 {
  min-width: var(--wh-5);
}

.minw-6 {
  min-width: var(--wh-6);
}

.minw-7 {
  min-width: var(--wh-7);
}

.minw-8 {
  min-width: var(--wh-8);
}

Min Width Percent

Percentage-based minimum widths

.minw-10 {
  min-width: 10%;
}

.minw-20 {
  min-width: 20%;
}

.minw-25 {
  min-width: 25%;
}

.minw-30 {
  min-width: 30%;
}

.minw-40 {
  min-width: 40%;
}

.minw-50 {
  min-width: 50%;
}

.minw-60 {
  min-width: 60%;
}

.minw-70 {
  min-width: 70%;
}

.minw-75 {
  min-width: 75%;
}

.minw-80 {
  min-width: 80%;
}

.minw-90 {
  min-width: 90%;
}

.minw-100 {
  min-width: 100%;
}

.minw-third {
  min-width: calc(100% / 3);
}

.minw-two-thirds {
  min-width: calc(100% / 1.5);
}

Min Width View Width

View-width-based minimum widths

.minw-10vw {
  min-width: 10vw;
}

.minw-20vw {
  min-width: 20vw;
}

.minw-30vw {
  min-width: 30vw;
}

.minw-40vw {
  min-width: 40vw;
}

.minw-50vw {
  min-width: 50vw;
}

.minw-60vw {
  min-width: 60vw;
}

.minw-70vw {
  min-width: 70vw;
}

.minw-80vw {
  min-width: 80vw;
}

.minw-90vw {
  min-width: 90vw;
}

.minw-100vw {
  min-width: 100vw;
}

.minw-auto {
  min-width: auto;
}

Heights

Numeric/fixed heights.

.h-1 {
  height: var(--wh-1);
}

.h-2 {
  height: var(--wh-2);
}

.h-3 {
  height: var(--wh-3);
}

.h-4 {
  height: var(--wh-4);
}

.h-5 {
  height: var(--wh-5);
}

.h-6 {
  height: var(--wh-6);
}

.h-7 {
  height: var(--wh-7);
}

.h-8 {
  height: var(--wh-8);
}

Height Percent

Percentage heights.

.h-10 {
  height: 10%;
}

.h-20 {
  height: 20%;
}

.h-25 {
  height: 25%;
}

.h-30 {
  height: 30%;
}

.h-40 {
  height: 40%;
}

.h-50 {
  height: 50%;
}

.h-60 {
  height: 60%;
}

.h-70 {
  height: 70%;
}

.h-75 {
  height: 75%;
}

.h-80 {
  height: 80%;
}

.h-90 {
  height: 90%;
}

.h-100 {
  height: 100%;
}

.h-third {
  height: calc(100% / 3);
}

.h-two-thirds {
  height: calc(100% / 1.5);
}

Height View Height

View-height percentage heights

.h-10vh {
  height: 10vh;
}

.h-20vh {
  height: 20vh;
}

.h-30vh {
  height: 30vh;
}

.h-40vh {
  height: 40vh;
}

.h-50vh {
  height: 50vh;
}

.h-60vh {
  height: 60vh;
}

.h-70vh {
  height: 70vh;
}

.h-80vh {
  height: 80vh;
}

.h-90vh {
  height: 90vh;
}

.h-100vh {
  height: 100vh;
}

.h-auto {
  height: auto;
}

.max-height-1 {
  max-height: var(--wh-1);
}

.max-height-2 {
  max-height: var(--wh-2);
}

.max-height-3 {
  max-height: var(--wh-3);
}

.max-height-4 {
  max-height: var(--wh-4);
}

.max-height-5 {
  max-height: var(--wh-5);
}

.max-height-6 {
  max-height: var(--wh-6);
}

.max-height-7 {
  max-height: var(--wh-7);
}

.max-height-8 {
  max-height: var(--wh-8);
}

.max-height-10 {
  max-height: 10%;
}

.max-height-20 {
  max-height: 20%;
}

.max-height-25 {
  max-height: 25%;
}

.max-height-30 {
  max-height: 30%;
}

.max-height-40 {
  max-height: 40%;
}

.max-height-50 {
  max-height: 50%;
}

.max-height-60 {
  max-height: 60%;
}

.max-height-70 {
  max-height: 70%;
}

.max-height-75 {
  max-height: 75%;
}

.max-height-80 {
  max-height: 80%;
}

.max-height-90 {
  max-height: 90%;
}

.max-height-100 {
  max-height: 100%;
}

.max-height-third {
  max-height: calc(100% / 3);
}

.max-height-two-thirds {
  max-height: calc(100% / 1.5);
}

Height View Max Height

View-height percentage maximum heights

.max-height-10vh {
  max-height: 10vh;
}

.max-height-20vh {
  max-height: 20vh;
}

.max-height-30vh {
  max-height: 30vh;
}

.max-height-40vh {
  max-height: 40vh;
}

.max-height-50vh {
  max-height: 50vh;
}

.max-height-60vh {
  max-height: 60vh;
}

.max-height-70vh {
  max-height: 70vh;
}

.max-height-80vh {
  max-height: 80vh;
}

.max-height-90vh {
  max-height: 90vh;
}

.max-height-100vh {
  max-height: 100vh;
}