Breakpoints

Component status:Ready

Standardized values for media queries.

Values

Min Width	Breakpoint	Grid class	Sass Variable
0px	sm	@sm	$bp-sm
640px	md	@md	$bp-md
960px	lg	@lg	$bp-lg
1216px	xl	@xl	$bp-xl

Grid usage

Breakpoint-based grid class suffixes can be used to set cell widths per breakpoint. See Setting cell widths per breakpoint within the Grid documentation for usage instructions.

Breakpoint mixin usage

When using BUX Sass directly in your project, you will have access to the breakpoint mixin.

In this example, the sample-div element will have a dark-scarlet background with white text at a window width of 960px and above.

@include breakpoint(lg) {
  .sample-div {
    background-color: $scarlet-dark-40;
    color: $white;
  }
}

The breakpoint mixin can also be used within a css rule. In this example, the sample-div element has a background color of black at a window width of 1279px and below, but switches to a dark scarlet at 1280px and above.

.sample-div {
  background-color: $black;
  color: $white;

  @include breakpoint(xl) {
    background-color: $scarlet-dark-40;
  }
}