Skip to main content

Breakpoints

Media queries presets​

Concrete makes use of media queries easy by providing a set of breakpoints media presets for your styles.

Breakpoints are

  • desktop (1296em)
  • tablet (1024em)
  • smallTablet (768em)
  • phone (600em)

Breakpoint object has 2 presets for media queries. below and above If we want a media query that apply on media with screen size bellow tablets, you should use breakpoints.below.tablet preset.

Example​

@media (${breakpoints.below.tablet}) {
  padding: 32px;
}

Becomes

@media (max-width: 64em) {
  padding: 32px;
}

Hooks​

useResponsiveType​

Returns the current breakpoint of the screen. Default value can be passed as parameter.

useResponsiveType("phone"); // => desktop