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 triangles above the Slider. Depending on the framework in use, the slider and its default breakpoints are colored red, purple or grayish blue. Red represents Materialize, purple for Bootstrap and grayish blue for Foundation. A Frameworkless project shows a bright blue slider with no default breakpoints. A white triangle, 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 triangle turns from a solid 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.