There is a newer version of Luda.

Let's go!

Breakpoints

Luda provides width breakpoints, aspect ratio breakpoints and resolution breakpoints by default, lean how to configure and use them in your projects.

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.

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.

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.