Breakpoints
Luda provides width breakpoints, aspect ratio breakpoints and resolution breakpoints by default, lean how to configure and use them in your projects.
Screen Width Breakpoints
Introduction to Width Breakpoints
Luda provides 3 screen width breakpoints by default: small, medium and large. The first letters of these breakpoints are used as classname postfixes to make components responsive. Luda is a mobile first framework, the postfixes are only necessary for middle size screens and large screens.
The width breakpoints and classname postfixes are listed in the below table.
| Breakpoint | Screen Width | Postfix | Classname Example |
|---|---|---|---|
| small | ≥ 0px | s | |
| medium | ≥ 768px | m | .m-small-m |
| large | ≥ 1200px | l | .d-block-l |
Configure Width Breakpoints in Sass
$breakpoint-width-pxs: (s: 0, m: 768px, l: 1200px) !default
You can override this variable according to your needs, make sure the value is a sass map. Except the key of the first pair in the map, all the other keys are treated as postfixes which will be added to the end of responsive components’ classnames.
Detect Screen Width in Sass
+media-width($breakpoint-postfix, $less-than-next: false)
Use this mixin to detect screen width and include styles.
If the value of the $less-than-next parameter is true,
a max-width media query rule will be added, and the max width
will be the result of next breakpoint’s value minus 1px.
Screen Aspect Ratio Breakpoints
Introduction to Aspect Ratio Breakpoints
Luda provides 2 aspect ratio breakpoints by default, portrait and landscape. Components’ classnames are not extended with these breakpoints. We use the abbreviations of these breakpoints as sass mixin parameters for responsive control.
The aspect ratio breakpoints and their abbreviations are listed in the below table.
| Breakpoint | Aspect Ratio | Abbreviation |
|---|---|---|
| portrait | ≥ 0 | p |
| landscape | ≥ 1.0001 | l |
Configure Aspect Ratio Breakpoints in Sass
$breakpoint-aspect-ratios: (p: 0, l: 1.0001) !default
Default defination of screen aspect ratio breakpoints, make sure the value is a map if you want to change it.
Detect Aspect Ratio in Sass
+media-aspect-ratio($breakpoint-abbreviation, $less-than-next: false)
Use this mixin to detect screen aspect ratio and include styles.
If the value of the $less-than-next parameter is true,
a max-aspect-ratio media query rule will be added,
and the max aspect ratio will be the result of
next breakpoint’s value minus 0.0001.
Screen Resolution Breakpoints
Introduction to Resolution Breakpoints
Luda provides 3 resolution breakpoints by default, low, high and extra high. Components’ classnames are not extended with these breakpoints. We use the abbreviations of these breakpoints as sass mixin parameters for responsive control.
The resolution breakpoints and their abbreviations are listed in the below table.
| Breakpoint | Resolution | Abbreviation |
|---|---|---|
| low | ≥ 0 | l |
| high | ≥ 105.6dpi | h |
| extra high | ≥ 201.6dpi | xh |
Configure Resolution Breakpoints in Sass
$breakpoint-resolutions: (l: 0, h: 105.6dpi, xh: 201.6dpi) !default
Default defination of screen resolution breakpoints, make sure the value is a map if you want to change it.
Detect Resolution in Sass
+media-resolution($breakpoint-abbreviation, $less-than-next: false)
Use this mixin to detect screen resolution and include styles.
If the value of the $less-than-next parameter is true,
a max-resolution media query rule will be added,
and the max resolution will be the result of
next breakpoint’s value minus 9.6dpi.