Breakpoints

Breakpoints are the secret weapon of responsive web design. They are the places where layout or style changes are being made. They are represented by the little dots or ‘points’ above the Slider. Depending on the framework in use default breakpoints are colored either pink, purple or blue. Pink represents Materialize, purple for Bootstrap and blue for Foundation. A white dot, however, is a custom breakpoint, extra ones that you inject where you see fit.

Default breakpoints by framework

Foundation framework

Bootstrap framework

Materialize framework

Frameworkless

Why breakpoints exist

Desktop monitors have grown a lot over the years and offer lots of space, allowing for a wide multi-content layout with large fonts and imagery. However, for content to be readable and usable on narrow screens such as mobile phones and tablets, a smaller but taller content structure is needed. With breakpoints the same content can be presented in optimal form across the entire range of device sizes and screen widths.

Following each breakpoint a specific set of style rules is delivered, so the site seems to ‘respond’ to the size of the display device. Layouts, widths, font sizes and other design elements are revised where needed to keep the content in focus and pleasant to consume. This feels really dynamic, that’s why we started calling these breakpoint induced changes responsive actions.

Reading an active breakpoint

A breakpoint is active when the dot turns from a solid triangular shape to the carrot icon. The breakpoints are pointing towards the direction of the workflow. For example, if it is pointing to the right, your style and layout changes will apply to that specific size and higher. A breakpoint becomes active when the slider is placed on the right of it and until the next breakpoint is reached.

Adding and removing breakpoints

Custom breakpoints can be added by clicking on the breakpoint bar or with the plus icon on the left. They can be removed by selecting one — click on it — and hitting the minus icon. When selected they can also be moved left and right with the keyboard arrow keys.