Responsive mixin - LuccaSA/lucca-ui GitHub Wiki

LuccaUI comes with a list of breakpoints, defined (and overridable) in core/definitions/_breakpoints.less. Defaults are "mobile", "tablet", "desktop" and "large".

You can use two mixins to take advantage of these breakpoints:

Screens larger than @breakpoint

In order to apply properties to your element if the screen size is larger than one of the defined breakpoints, use the .lui_screens_larger_than(@breakpoint; @ruleset);.

Screens smaller than @breakpoint

In order to apply properties to your element if the screen size is smaller than one of the defined breakpoints, use the .lui_screens_smaller_than(@breakpoint; @ruleset);.

Example

#responsive-heading {
    &:before, &:after { display: block; }
    &:before {
        .lui_screens_larger_than(mobile, { content: "Larger than mobile: this is at least a tablet sized screen"; });
    }
    &:after {
        .lui_screens_smaller_than(tablet, { content: "Smaller than tablet: this is a mobile sized screen"; });
    }
}