Breakpoints
Component status:Ready
Standardized values for media queries.
#
ValuesMin 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 usageBreakpoint-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 usageWhen 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;
}
}