Breakpoints
When building a component you should be thinking "mobile first". When taking this approach you will often need to set breakpoints for you component to change according to the increasing screen real-estate it gets.
We provide you with a predefined set of breakpoints you can call in your code. You should start at the "mobile" state first, and modify your component as the screen size increases.
By using the predefined scale, a lot of components will adapt to the screen in a uniform manor.
Notes:
If your component is some what complex, the predefined scale may not cover all your needs.
In this instance you can declare
a custom size by passing in a pixel value into the mixin,
@include breakpoint(800px).
| Breakpoint | Size |
|---|---|
breakpoint("xxsmall")
|
@media (min-width: 320px) |
breakpoint("xsmall")
|
@media (min-width: 481px) |
breakpoint("small")
|
@media (min-width: 769px) |
breakpoint("medium")
|
@media (min-width: 1025px) |
breakpoint("large")
|
@media (min-width: 1281px) |
breakpoint("xlarge")
|
@media (min-width: 1441px) |
breakpoint("xxlarge")
|
@media (min-width: 1681px) |
breakpoint("xxxlarge")
|
@media (min-width: 1920px) |
breakpoint(npx)
|
@media (min-width: npx) |