Skip to content

Instantly share code, notes, and snippets.

@Gameghostify

Gameghostify/breakpoints.md

Last active December 1, 2018 15:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Gameghostify/282d8af3d546a3579480ae7c0dc68139 to your computer and use it in GitHub Desktop.
Save Gameghostify/282d8af3d546a3579480ae7c0dc68139 to your computer and use it in GitHub Desktop.
Download ZIP
Sass breakpoints
Raw
breakpoints.md

Breakpoint collection

Bootstrap 4 breakpoints

breakpoints used in bootstrap 4

$breakpoints: (
	xs: 0px,
	sm: 576px,
	md: 768px,
	lg: 992px,
	xl: 1200px
);

Bulma breakpoints

breakpoints used in bulma

$breakpoints: (
	mobile: 0px,
	tablet: 769px,
	desktop: 1024px,
	widescreen: 1216px,
	fullhd: 1408px
);

"The 100% correct way to do CSS breakpoints"-breakpoints

taken from an article about css breakpoints

$breakpoints: (
	phone: 0px,
	tablet-portrait: 600px,
	tablet-landscape: 900px,
	desktop: 1200px,
	big-desktop: 1800px
);

rebassjs/grid breakpoints

a mobile-first approach used in a react grid library

$breakpoints: (
	sm: 40em,
	md: 52em,
	lg: 64em,
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment