Responsive design

The LiSA Library layouts are responsive to the width of the library's host element. Following the mobile-first approach, the layouts are based on a mobile-compatible version of a show item. As a result the minimum width of a show item is 256px with a default spacing of 1rem.

In CSS rem stands for root em, a unit of measurement that represents the font size of the root element. This means that 1rem equals the font size of the html element, which for most browsers has a default value of 16px. Using rem can help ensure consistency of font size and spacing throughout your UI.

According to the W3C spec the definition for one rem unit is:

Equal to the computed value of font-size on the root element. When specified on the font-size property of the root element, the rem units refer to the property’s initial value.

Layout breakpoints

LiSA Library implements the following break-points to adjust the rendered layout.

min-width: 576px min-width: 864px min-width: 1152px min-width: 1440px

Note: Don't confuse these break-points with CSS media query break-points. LiSA Library uses these break-points to adjust its layout to the library's host element — not the browser's viewport. This is due to the fact that — for the majority of impementations — the library's host element does not expand over the entire width of the browsers viewport.