package: '@thumbtack/tp-ui-core-mixin' kit: mixins/index.mdx platform: scss url: /components/mixins/scss/ mdxType: componentApi

Responsive mixins

Helpful SCSS mixins for using media queries and setting breakpoints. These mixins are commonly used alongside variables from Thumbprint Tokens but do support arbitrary pixel values.

tp-respond-between

// Include this `import` at the top of your file.
@import '@thumbtack/tp-ui-core-mixin/_index';

@include tp-respond-between($tp-breakpoint__small, $tp-breakpoint__medium) {
    // The CSS within this block will render between the specified breakpoints.
}

tp-respond-above

// Include this `import` at the top of your file.
@import '@thumbtack/tp-ui-core-mixin/_index';

@include tp-respond-above($tp-breakpoint__small) {
    // The CSS within this block will render above specified breakpoint.
}

tp-respond-below

// Include this `import` at the top of your file.
@import '@thumbtack/tp-ui-core-mixin/_index';

@include tp-respond-below($tp-breakpoint__large) {
    // The CSS within this block will render below the specified breakpoint.
}

Preventing overlap

Media queries are inclusive, meaning that if you use the same breakpoint value for both min-width and max-width—for example, 700px—the conditions will be true for both when the viewport is exactly 700px. This can lead to undesired results.

@media (min-width: 700px) {
    color: red; /* Applies "color:red" at 700px and above */
}

@media (max-width: 700px) {
    color: blue; /* Applies "color:blue" at 700px and below*/
}

To prevent this our Sass mixin tp-respond-above adds 1 to the min-width media query so that it applies to 701px and above while the max-width stays at 700px and below. Now the code will output:

@media (min-width: 701px) {
    color: red; /* Applies "color:red" at 701px and above */
}

@media (max-width: 700px) {
    color: blue; /* Applies "color:blue" at 700px and below*/
}