Hologram Logo

Making Widgets Scale

Because users can resize widgets any size they wish (within a widget's constraints and/or the dimensions of their computer screen), it's important that the developer write CSS that allows a widget to scale. Here are some tips.

Use CSS ems or Percentages

The best way to allow a widget to change size gracefully is to use CSS ems for font sizes, border widths, shadows, or any attributes that need to grow or shrink when a widget is resized. Using percentages can also also graceful scaling.

CSS Min and Max

Even though using ems solves most widget scaling problems, when a widget is scaled very large or very small, font sizes or other elements may still exhibit some rendering problems. You can usually solve this by using the CSS min, max, and clamp functions:

.too-small {
    /* Prevent the font size from becoming smaller than 14px */
    font-size: max(1em, 14px);
}

.too-big {
    /* Prevent the font size from becoming larger than 50px */
    font-size: min(1em, 50px);
}

.bordered {
    /* You can also use min and max for other properties like borders */
    /* This prevents the border from becoming smaller than 1 pixel */
    border: max(1em, 1px) solid firebrick;
}