Layout
Flexible grid
SeMI’s overall grid is a 12-column grid with a nested 12-column subgrid for the main content area. The grid’s gutter is set at 1em.
Responsive breakpoints
Five breakpoints are defined for the responsive layout shift. These are not defined towards specific current devices, but rather come in effect when the layout threatens to break for a particular breakpoint.
- 34em & below
- 42em – 48em
- 48em – 56em
- 56em – 80em
- 80em & above
Negative space
Negative, or white, space is used to provide way-finding throughout the SeMI site and its content.
Modular scaling
Vertical rhythm is established by a modular scale. A modular scale defines meaningful ratios of related proportions between page elements in order to create a unified visual rhythm and consistency. The $scale-base variable is the base scale measurement. The modular scale is derived from the variable $scale-interval. This can provide an infinite number of measurements that adhere to a consistent rhythm. Editing the base variable measurement results in a proportional change throughout all variables.
The modular scale is used for dimensions (margins, padding, width, height, etc.), typographic scale, etc. The same rhythm is also used for animation speed, opacity levels, and such.