Comparing Breakpoints in CSS Toolkits and Frameworks

-comparing-breakpoints-in-frameworks-toolkits.md

Comparing the breakpoints in the following frameworks/toolkits:

• Boostrap 4
• Foundation
• inuitcss
• MDL
• Semantic UI
• SUITCSS

bootstrap4.md

http://v4-alpha.getbootstrap.com/layout/overview/

• 544 // Small devices (landscape phones, 34em and up)
• 768 // Medium devices (tablets, 48em and up)
• 992 // Large devices (desktops, 62em and up)
• 1200 // Extra large devices (large desktops, 75em and up)

foundation.md

http://foundation.zurb.com/sites/docs/v/5.5.3/media-queries.html

• $small-breakpoint: em-calc(640) !default;
• $medium-breakpoint: em-calc(1024) !default;
• $large-breakpoint: em-calc(1440) !default;
• $xlarge-breakpoint: em-calc(1920) !default;
• xxlarge 1920+

inuitcss.md

https://github.com/inuitcss/settings.responsive/blob/master/_settings.responsive.scss

• "palm" "screen and (max-width: 44.9375em)",
• "lap" "screen and (min-width: 45em) and (max-width: 63.9375em)",
• "lap-and-up" "screen and (min-width: 45em)",
• "portable" "screen and (max-width: 63.9375em)",
• "desk" "screen and (min-width: 64em)",
• "retina" "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)"

mdl.md

https://www.google.com/design/spec/layout/responsive-ui.html

Breakpoint (dp)	Handset / Tablet Portrait	Handset / Tablet Landscape	Window	Columns	Gutter
0	small handset		xsmall	4	16
360	medium handset		xsmall	4	16
400	large handset		xsmall	4	16
480	large handset	small handset	xsmall	4	16
600	small tablet	medium handset	small	8	16/24
720	large tablet	large handset	small	8	16/24
840	large tablet	large handset	small	12	16/24
960		small tablet	small	12	24
1024		large tablet	medium	12	24
1280		large tablet	medium	12	24
1440			large	12	24
1600			large	12	24
1920			xlarge	12	24

semantic-ui.md

https://github.com/Semantic-Org/Semantic-UI/blob/a764af62caa1fe0cced90676aa6edcdfd0858c16/src/themes/default/globals/site.variables#L183-L187

• @mobileBreakpoint : 320px;
• @tabletBreakpoint : 768px;
• @computerBreakpoint : 992px;
• @largeMonitorBreakpoint : 1200px;
• @widescreenMonitorBreakpoint : 1920px;

suitcss.md

https://github.com/suitcss/utils-offset

• 320 --sm-viewport
• 640 --md-viewport
• 960 --lg-viewport