Utilities

Media queries

Mixins for consistent media queries that take px values and convert them to ems.

Min and max width

These mixins take a px value breakpoint and set of style rules and converts them to the corresponding min or max width media query.

.respond-to-min(@bp, @rules);

.respond-to-max(@bp, @rules);

Ex.

.respond-to-min( @bp-sm-min, {
    .title {
        font-size: 2em;
    }
} );

// Compiles to

@media only all and (min-width: 37.5625em) {
    .title {
        font-size: 2em;
    }
}

Range

This mixin takes both min and max px values and a set of style rules and converts them to the corresponding min and max media query.

.respond-to-range(@bp1, @bp2, @rules);

Ex.

.respond-to-range( @bp-sm-min, @bp-sm-max, {
    .title {
        font-size: 2em;
    }
} );

// Compiles to

@media only all and (min-width: 37.5625em) and (max-width: 56.25em) {
    .title {
        font-size: 2em;
    }
}

Dpi

This mixin allows us to easily write styles that target high-resolution screens, such as Apple retina screens

// The following LESS...
.example {
    background: url(regular-resolution-image.png);
    .respond-to-dpi(2, {
        background-image: url(retina-image.png);
    });
}

// ...Exports to
.example {
    background: url(regular-resolution-image.png);
}
@media (min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .example {
        background-image: url(retina-image.png);
    }
}

Print

This mixin allows us to easily write styles that target both @media print and .print.

// The following LESS...
.example {
    color: @gray;
    .respond-to-print({
        color: @black;
    });
}

// ...Exports to
.example {
    color: #75787B;
}
@media print {
    .example {
        color: #101820;
    }
}
.print .example {
    color: #101820;
}
Edit page