Skip to main content

Breakpoints

Component status:Ready
Standardized values for media queries.

Values#

Min WidthBreakpointGrid classSass Variable
0pxsm@sm$bp-sm
640pxmd@md$bp-md
960pxlg@lg$bp-lg
1280pxxl@xl$bp-xl
1440pxxxl@xxl$bp-xxl

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