Breakpoints

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;
  }
}