Breakpoints | poly-web-ui Documentation

$Breakpoints (Map)

scss

$breakpoints: (
  small: 0px,
  phone: 320px,
  phablet: 480px,
  tablet: 768px,
  laptop: 992px,
  desktop: 1200px,
  screen: 1400px,
  wide: 1600px,
) !default;

Polynorm Web UI default breakpoints

Concept

Foundation ships with 5 predefined breakpoints from small to xxlarge
and defines them as:

$breakpoints: (
  small: 0,
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
);

So we have a very precise desktop range from “large to xxlarge”, but the whole mobile range is reduced to “small to medium”. In reality we often have to deal with small phones, larger phones and tablets. Furthermore the most details are in the mobile range: Here we have to deal with 1, 2 or 3 columns side by side while the whole desktop range is typically always 4 columns wide.

Because of these considerations we redefined the foundation breakpoints to put more value on the mobile range and also renamed them to be more descriptive for their targeting audience.