MelangeCSS Reference

Current Version: 1.0.0-RC4

Widths And Heights ( Medium Width )†

Along with the spacings group, widths and heights allow control over sizes using the built-in spacing scale. The widths and heights here are identical to the value used in the spacings group, so your design should have visual harmony and consistency.

Properties

Box Sizing

Box sizing controls how the width and height are calculated. MelangeCSS sets the default to border-box (which is not the browser default) as this avoids some issues with predicting and controlling sizing

content-box-m 
.content-box-m {
  box-sizing: content-box;
}
border-box-m 
.border-box-m {
  box-sizing: border-box;
}
Height
h*
Height Height
h-1-m 
.h-1-m {
  height: calc(2 * var(--mg-sp-1));
}
.h-1-m
h-2-m 
.h-2-m {
  height: calc(2 * var(--mg-sp-2));
}
.h-2-m
h-3-m 
.h-3-m {
  height: calc(2 * var(--mg-sp-3));
}
.h-3-m
h-4-m 
.h-4-m {
  height: calc(2 * var(--mg-sp-4));
}
.h-4-m
h-5-m 
.h-5-m {
  height: calc(2 * var(--mg-sp-5));
}
.h-5-m
h-6-m 
.h-6-m {
  height: calc(2 * var(--mg-sp-6));
}
.h-6-m
h-7-m 
.h-7-m {
  height: calc(2 * var(--mg-sp-7));
}
.h-7-m
h-8-m 
.h-8-m {
  height: calc(2 * var(--mg-sp-8));
}
.h-8-m
Percentages
h-10-m 
.h-10-m {
  height: 10%;
}
.h-10-m
h-20-m 
.h-20-m {
  height: 20%;
}
.h-20-m
h-25-m 
.h-25-m {
  height: 25%;
}
.h-25-m
h-30-m 
.h-30-m {
  height: 30%;
}
.h-30-m
h-40-m 
.h-40-m {
  height: 40%;
}
.h-40-m
h-50-m 
.h-50-m {
  height: 50%;
}
.h-50-m
h-60-m 
.h-60-m {
  height: 60%;
}
.h-60-m
h-70-m 
.h-70-m {
  height: 70%;
}
.h-70-m
h-75-m 
.h-75-m {
  height: 75%;
}
.h-75-m
h-80-m 
.h-80-m {
  height: 80%;
}
.h-80-m
h-90-m 
.h-90-m {
  height: 90%;
}
.h-90-m
h-100-m 
.h-100-m {
  height: 100%;
}
.h-100-m
h-third-m 
.h-third-m {
  height: calc(100% / 3);
}
.h-third-m
h-two-thirds-m 
.h-two-thirds-m {
  height: calc(100% / 1.5);
}
.h-two-thirds-m
Percentages of View Height
h-10vh-m 
.h-10vh-m {
  height: 10vh;
}
.h-10vh-m
h-20vh-m 
.h-20vh-m {
  height: 20vh;
}
.h-20vh-m
h-30vh-m 
.h-30vh-m {
  height: 30vh;
}
.h-30vh-m
h-40vh-m 
.h-40vh-m {
  height: 40vh;
}
.h-40vh-m
h-50vh-m 
.h-50vh-m {
  height: 50vh;
}
.h-50vh-m
h-60vh-m 
.h-60vh-m {
  height: 60vh;
}
.h-60vh-m
h-70vh-m 
.h-70vh-m {
  height: 70vh;
}
.h-70vh-m
h-80vh-m 
.h-80vh-m {
  height: 80vh;
}
.h-80vh-m
h-90vh-m 
.h-90vh-m {
  height: 90vh;
}
.h-90vh-m
h-100vh-m 
.h-100vh-m {
  height: 100vh;
}
.h-100vh-m
h-auto-m 
.h-auto-m {
  height: auto;
}
.h-auto-m
max-height*
Height Max Height
max-height-1-m 
.max-height-1-m {
  max-height: calc(2 * var(--mg-sp-1));
}
max-height-2-m 
.max-height-2-m {
  max-height: calc(2 * var(--mg-sp-2));
}
max-height-3-m 
.max-height-3-m {
  max-height: calc(2 * var(--mg-sp-3));
}
max-height-4-m 
.max-height-4-m {
  max-height: calc(2 * var(--mg-sp-4));
}
max-height-5-m 
.max-height-5-m {
  max-height: calc(2 * var(--mg-sp-5));
}
max-height-6-m 
.max-height-6-m {
  max-height: calc(2 * var(--mg-sp-6));
}
max-height-7-m 
.max-height-7-m {
  max-height: calc(2 * var(--mg-sp-7));
}
max-height-8-m 
.max-height-8-m {
  max-height: calc(2 * var(--mg-sp-8));
}
Percentages
max-height-10-m 
.max-height-10-m {
  max-height: 10%;
}
max-height-20-m 
.max-height-20-m {
  max-height: 20%;
}
max-height-25-m 
.max-height-25-m {
  max-height: 25%;
}
max-height-30-m 
.max-height-30-m {
  max-height: 30%;
}
max-height-40-m 
.max-height-40-m {
  max-height: 40%;
}
max-height-50-m 
.max-height-50-m {
  max-height: 50%;
}
max-height-60-m 
.max-height-60-m {
  max-height: 60%;
}
max-height-70-m 
.max-height-70-m {
  max-height: 70%;
}
max-height-75-m 
.max-height-75-m {
  max-height: 75%;
}
max-height-80-m 
.max-height-80-m {
  max-height: 80%;
}
max-height-90-m 
.max-height-90-m {
  max-height: 90%;
}
max-height-100-m 
.max-height-100-m {
  max-height: 100%;
}
max-height-third-m 
.max-height-third-m {
  max-height: calc(100% / 3);
}
max-height-two-thirds-m 
.max-height-two-thirds-m {
  max-height: calc(100% / 1.5);
}
Percentages of View Height
max-height-10vh-m 
.max-height-10vh-m {
  max-height: 10vh;
}
max-height-20vh-m 
.max-height-20vh-m {
  max-height: 20vh;
}
max-height-30vh-m 
.max-height-30vh-m {
  max-height: 30vh;
}
max-height-40vh-m 
.max-height-40vh-m {
  max-height: 40vh;
}
max-height-50vh-m 
.max-height-50vh-m {
  max-height: 50vh;
}
max-height-60vh-m 
.max-height-60vh-m {
  max-height: 60vh;
}
max-height-70vh-m 
.max-height-70vh-m {
  max-height: 70vh;
}
max-height-80vh-m 
.max-height-80vh-m {
  max-height: 80vh;
}
max-height-90vh-m 
.max-height-90vh-m {
  max-height: 90vh;
}
max-height-100vh-m 
.max-height-100vh-m {
  max-height: 100vh;
}
max-height-auto-m 
.max-height-auto-m {
  max-height: auto;
}
Width
w*
Width Width
w-1-m 
.w-1-m {
  width: calc(2 * var(--mg-sp-1));
}
.w-1-m
w-2-m 
.w-2-m {
  width: calc(2 * var(--mg-sp-2));
}
.w-2-m
w-3-m 
.w-3-m {
  width: calc(2 * var(--mg-sp-3));
}
.w-3-m
w-4-m 
.w-4-m {
  width: calc(2 * var(--mg-sp-4));
}
.w-4-m
w-5-m 
.w-5-m {
  width: calc(2 * var(--mg-sp-5));
}
.w-5-m
w-6-m 
.w-6-m {
  width: calc(2 * var(--mg-sp-6));
}
.w-6-m
w-7-m 
.w-7-m {
  width: calc(2 * var(--mg-sp-7));
}
.w-7-m
w-8-m 
.w-8-m {
  width: calc(2 * var(--mg-sp-8));
}
.w-8-m
Percentages
w-10-m 
.w-10-m {
  width: 10%;
}
.w-10-m
w-20-m 
.w-20-m {
  width: 20%;
}
.w-20-m
w-25-m 
.w-25-m {
  width: 25%;
}
.w-25-m
w-30-m 
.w-30-m {
  width: 30%;
}
.w-30-m
w-40-m 
.w-40-m {
  width: 40%;
}
.w-40-m
w-50-m 
.w-50-m {
  width: 50%;
}
.w-50-m
w-60-m 
.w-60-m {
  width: 60%;
}
.w-60-m
w-70-m 
.w-70-m {
  width: 70%;
}
.w-70-m
w-75-m 
.w-75-m {
  width: 75%;
}
.w-75-m
w-80-m 
.w-80-m {
  width: 80%;
}
.w-80-m
w-90-m 
.w-90-m {
  width: 90%;
}
.w-90-m
w-100-m 
.w-100-m {
  width: 100%;
}
.w-100-m
w-third-m 
.w-third-m {
  width: calc(100% / 3);
}
.w-third-m
w-two-thirds-m 
.w-two-thirds-m {
  width: calc(100% / 1.5);
}
.w-two-thirds-m
Percentages of View Width
w-10vw-m 
.w-10vw-m {
  width: 10vw;
}
.w-10vw-m
w-20vw-m 
.w-20vw-m {
  width: 20vw;
}
.w-20vw-m
w-30vw-m 
.w-30vw-m {
  width: 30vw;
}
.w-30vw-m
w-40vw-m 
.w-40vw-m {
  width: 40vw;
}
.w-40vw-m
w-50vw-m 
.w-50vw-m {
  width: 50vw;
}
.w-50vw-m
w-60vw-m 
.w-60vw-m {
  width: 60vw;
}
.w-60vw-m
w-70vw-m 
.w-70vw-m {
  width: 70vw;
}
.w-70vw-m
w-80vw-m 
.w-80vw-m {
  width: 80vw;
}
.w-80vw-m
w-90vw-m 
.w-90vw-m {
  width: 90vw;
}
.w-90vw-m
w-100vw-m 
.w-100vw-m {
  width: 100vw;
}
.w-100vw-m
w-auto-m 
.w-auto-m {
  width: auto;
}
.w-auto-m
mw*
Width Max Width
mw-1-m 
.mw-1-m {
  max-width: calc(2 * var(--mg-sp-1));
}
mw-2-m 
.mw-2-m {
  max-width: calc(2 * var(--mg-sp-2));
}
mw-3-m 
.mw-3-m {
  max-width: calc(2 * var(--mg-sp-3));
}
mw-4-m 
.mw-4-m {
  max-width: calc(2 * var(--mg-sp-4));
}
mw-5-m 
.mw-5-m {
  max-width: calc(2 * var(--mg-sp-5));
}
mw-6-m 
.mw-6-m {
  max-width: calc(2 * var(--mg-sp-6));
}
mw-7-m 
.mw-7-m {
  max-width: calc(2 * var(--mg-sp-7));
}
mw-8-m 
.mw-8-m {
  max-width: calc(2 * var(--mg-sp-8));
}
Percentages
mw-10-m 
.mw-10-m {
  max-width: 10%;
}
mw-20-m 
.mw-20-m {
  max-width: 20%;
}
mw-25-m 
.mw-25-m {
  max-width: 25%;
}
mw-30-m 
.mw-30-m {
  max-width: 30%;
}
mw-40-m 
.mw-40-m {
  max-width: 40%;
}
mw-50-m 
.mw-50-m {
  max-width: 50%;
}
mw-60-m 
.mw-60-m {
  max-width: 60%;
}
mw-70-m 
.mw-70-m {
  max-width: 70%;
}
mw-75-m 
.mw-75-m {
  max-width: 75%;
}
mw-80-m 
.mw-80-m {
  max-width: 80%;
}
mw-90-m 
.mw-90-m {
  max-width: 90%;
}
mw-100-m 
.mw-100-m {
  max-width: 100%;
}
mw-third-m 
.mw-third-m {
  max-width: calc(100% / 3);
}
mw-two-thirds-m 
.mw-two-thirds-m {
  max-width: calc(100% / 1.5);
}
Percentages of View Width
mw-10vw-m 
.mw-10vw-m {
  max-width: 10vw;
}
mw-20vw-m 
.mw-20vw-m {
  max-width: 20vw;
}
mw-30vw-m 
.mw-30vw-m {
  max-width: 30vw;
}
mw-40vw-m 
.mw-40vw-m {
  max-width: 40vw;
}
mw-50vw-m 
.mw-50vw-m {
  max-width: 50vw;
}
mw-60vw-m 
.mw-60vw-m {
  max-width: 60vw;
}
mw-70vw-m 
.mw-70vw-m {
  max-width: 70vw;
}
mw-80vw-m 
.mw-80vw-m {
  max-width: 80vw;
}
mw-90vw-m 
.mw-90vw-m {
  max-width: 90vw;
}
mw-100vw-m 
.mw-100vw-m {
  max-width: 100vw;
}
mw-auto-m 
.mw-auto-m {
  max-width: auto;
}
minw*
Width Min Width
minw-1-m 
.minw-1-m {
  min-width: calc(2 * var(--mg-sp-1));
}
minw-2-m 
.minw-2-m {
  min-width: calc(2 * var(--mg-sp-2));
}
minw-3-m 
.minw-3-m {
  min-width: calc(2 * var(--mg-sp-3));
}
minw-4-m 
.minw-4-m {
  min-width: calc(2 * var(--mg-sp-4));
}
minw-5-m 
.minw-5-m {
  min-width: calc(2 * var(--mg-sp-5));
}
minw-6-m 
.minw-6-m {
  min-width: calc(2 * var(--mg-sp-6));
}
minw-7-m 
.minw-7-m {
  min-width: calc(2 * var(--mg-sp-7));
}
minw-8-m 
.minw-8-m {
  min-width: calc(2 * var(--mg-sp-8));
}
Percentages
minw-10-m 
.minw-10-m {
  min-width: 10%;
}
minw-20-m 
.minw-20-m {
  min-width: 20%;
}
minw-25-m 
.minw-25-m {
  min-width: 25%;
}
minw-30-m 
.minw-30-m {
  min-width: 30%;
}
minw-40-m 
.minw-40-m {
  min-width: 40%;
}
minw-50-m 
.minw-50-m {
  min-width: 50%;
}
minw-60-m 
.minw-60-m {
  min-width: 60%;
}
minw-70-m 
.minw-70-m {
  min-width: 70%;
}
minw-75-m 
.minw-75-m {
  min-width: 75%;
}
minw-80-m 
.minw-80-m {
  min-width: 80%;
}
minw-90-m 
.minw-90-m {
  min-width: 90%;
}
minw-100-m 
.minw-100-m {
  min-width: 100%;
}
minw-third-m 
.minw-third-m {
  min-width: calc(100% / 3);
}
minw-two-thirds-m 
.minw-two-thirds-m {
  min-width: calc(100% / 1.5);
}
Percentages of View Width
minw-10vw-m 
.minw-10vw-m {
  min-width: 10vw;
}
minw-20vw-m 
.minw-20vw-m {
  min-width: 20vw;
}
minw-30vw-m 
.minw-30vw-m {
  min-width: 30vw;
}
minw-40vw-m 
.minw-40vw-m {
  min-width: 40vw;
}
minw-50vw-m 
.minw-50vw-m {
  min-width: 50vw;
}
minw-60vw-m 
.minw-60vw-m {
  min-width: 60vw;
}
minw-70vw-m 
.minw-70vw-m {
  min-width: 70vw;
}
minw-80vw-m 
.minw-80vw-m {
  min-width: 80vw;
}
minw-90vw-m 
.minw-90vw-m {
  min-width: 90vw;
}
minw-100vw-m 
.minw-100vw-m {
  min-width: 100vw;
}
minw-auto-m 
.minw-auto-m {
  min-width: auto;
}