Syntax¶

Description: Mixin is defined as a set of media query helpers designed to be used with the predefined query helpers.

ctr('<#selector>', {
  media: {
    query: {
      <mixin:property>: <mixin:value>
    }
    <...>: <...>
  }
})

<#selector>:
  media:
    query:
      <mixin:property>: <mixin:value>
    <...>: <...>

@media (<mixin-condition>) {
  <#selector> {
    <...>: <...>;
  }
}

Notes

• Attribution: rupture
  • You should check out rupture’s creator Jeff Escalante and his new build tool spike it deserves much more love — A+ work in my book
• At the end of the day, they make working with and reasoning about media queries a bit easier
• For the examples, I will use the predefined query helpers since I rarely use mixins with raw values

Above¶

Description: The above property creates a media query condition above the specified value.

ctr('.test', {
  width: 200px
  media: {
    query: {
      above: 'md'
    }
    width: 100px
  }
})

.test:
  width: 200px
  media:
    query:
      above: md
    width: 100px

.test {
  width: 200px;
}
@media (min-width: 800px) {
  .test {
    width: 100px;
  }
}

ctr('.test', {
  width: 200px
  media: {
    query: {
      above: 'md'
    }
    width: 100px
  }
})

.test {
  width: 200px;
}
@media (min-width: 800px) {
  .test {
    width: 100px;
  }
}

.test:
  width: 200px
  media:
    query:
      above: md
    width: 100px

Notes

• above alias: from-width
• Can be used with multiple List values
• above: <value> === (min-width: <value>)

At¶

Description: The at property creates a media query condition that is applied when the screen is less than the at value and greater than the previous query helper.

ctr('.test', {
  width: 200px
  media: {
    width: 100px
    query: {
      at: 'md'
    }
  }
})

.test:
  width: 200px
  media:
    width: 100px
    query:
      at: md

.test {
  width: 200px;
}
@media (min-width: 600px) and (max-width: 800px) {
  .test {
    width: 100px;
  }
}

ctr('.test', {
  width: 200px
  media: {
    width: 100px
    query: {
      at: 'md'
    }
  }
})

.test {
  width: 200px;
}
@media (min-width: 600px) and (max-width: 800px) {
  .test {
    width: 100px;
  }
}

.test:
  width: 200px
  media:
    width: 100px
    query:
      at: md

Notes

• Only works with query helpers, not raw values
• at: <query:helper> === (min-width: <query:helper-prv>) and (max-width: <query:helper>)

At Shorthand¶

Description: A query helper value for the query property creates an at mixin.

ctr('.test', {
  width: 200px
  media: {
    query: 'md'
    width: 100px
  }
})

.test:
  width: 200px
  media:
    query: md
    width: 100px

.test {
  width: 200px;
}
@media (min-width: 600px) and (max-width: 800px) {
  .test {
    width: 100px;
  }
}

ctr('.test', {
  width: 200px
  media: {
    query: 'md'
    width: 100px
  }
})

.test {
  width: 200px;
}
@media (min-width: 600px) and (max-width: 800px) {
  .test {
    width: 100px;
  }
}

.test:
  width: 200px
  media:
    query: md
    width: 100px

Below¶

Description: The below property creates a media query condition below the specified value.

ctr('.test', {
  width: 200px
  media: {
    query: {
      below: 'lg'
    }
    width: 100px
  }
})

.test:
  width: 200px
  media:
    query:
      below: lg
    width: 100px

.test {
  width: 200px;
}
@media (max-width: 1050px) {
  .test {
    width: 100px;
  }
}

ctr('.test', {
  width: 200px
  media: {
    query: {
      below: 'lg'
    }
    width: 100px
  }
})

.test {
  width: 200px;
}
@media (max-width: 1050px) {
  .test {
    width: 100px;
  }
}

.test:
  width: 200px
  media:
    query:
      below: lg
    width: 100px

Notes

• below alias: to-width
• Can be used with multiple List values
• below: <value> === (max-width: <value>)

Between¶

Description: The between property creates a media query condition between the first and second List value.

ctr('.test', {
  width: 200px
  media: {
    query: {
      between: 'sm' 'lg'
    }
    width: 100px
  }
})

.test:
  width: 200px
  media:
    query:
      between: [sm, lg]
    width: 100px

.test {
  width: 200px;
}
@media (min-width: 600px) and (max-width: 1050px) {
  .test {
    width: 100px;
  }
}

ctr('.test', {
  width: 200px
  media: {
    query: {
      between: 'sm' 'lg'
    }
    width: 100px
  }
})

.test {
  width: 200px;
}
@media (min-width: 600px) and (max-width: 1050px) {
  .test {
    width: 100px;
  }
}

.test:
  width: 200px
  media:
    query:
      between: [sm, lg]
    width: 100px

Notes

• between: <min:value> <max:value> === (min-width: <min:value>) and (max-width: <max:value>)

Density¶

Description: The density property creates a media query condition below the specified density value.

ctr('.test', {
  width: 200px
  media: {
    query: {
      density: 2
    }
    width: 100px
  }
})

.test:
  width: 200px
  media:
    width: 100px
    query:
      density: 2

.test {
  width: 200px;
}
@media (min-resolution: 2dppx) {
  .test {
    width: 100px;
  }
}

ctr('.test', {
  width: 200px
  media: {
    query: {
      density: 2
    }
    width: 100px
  }
})

.test {
  width: 200px;
}
@media (min-resolution: 2dppx) {
  .test {
    width: 100px;
  }
}

.test:
  width: 200px
  media:
    width: 100px
    query:
      density: 2

ctr('.test', {
  width: 200px
  media: {
    query: {
      density: '3dpi'
    }
    width: 100px
  }
})

.test:
  width: 200px
  media:
    query:
      density: 3dpi
    width: 100px

.test {
  width: 200px;
}
@media (min-resolution: 3dpi) {
  .test {
    width: 100px;
  }
}

ctr('.test', {
  width: 200px
  media: {
    query: {
      density: '3dpi'
    }
    width: 100px
  }
})

.test {
  width: 200px;
}
@media (min-resolution: 3dpi) {
  .test {
    width: 100px;
  }
}

.test:
  width: 200px
  media:
    query:
      density: 3dpi
    width: 100px

Notes

• If the value does not have a resolution unit, it defaults to dppx
• density: <value> === (min-resolution: <value>)
• MDN resolution

Device Width¶

Description: The value of true for the device property creates device-specific media query conditions.

ctr('.test', {
  width: 200px
  media: {
    query: {
      between: 'md' 'lg'
      device: true
    }
    width: 100px
  }
})

.test:
  width: 200px
  media:
    query:
      between: [md, lg]
      device: true
    width: 100px

.test {
  width: 200px;
}
@media (min-device-width: 800px) and (max-device-width: 1050px) {
  .test {
    width: 100px;
  }
}

ctr('.test', {
  width: 200px
  media: {
    query: {
      between: 'md' 'lg'
      device: true
    }
    width: 100px
  }
})

.test {
  width: 200px;
}
@media (min-device-width: 800px) and (max-device-width: 1050px) {
  .test {
    width: 100px;
  }
}

.test:
  width: 200px
  media:
    query:
      between: [md, lg]
      device: true
    width: 100px

Notes

• Only works with the following properties
  • min-width
  • max-width
  • min-height
  • max-height
• Deprecated in Media Queries Level 4

Landscape¶

Description: The value of true for the landscape property creates a landscape-specific media query condition.

ctr('.test', {
  width: 200px
  media: {
    query: {
      landscape: true
    }
    height: 300px
  }
})

.test:
  width: 200px
  media:
    query:
      landscape: true
    height: 300px

.test {
  width: 200px;
}
@media (orientation: landscape) {
  .test {
    height: 300px;
  }
}

ctr('.test', {
  width: 200px
  media: {
    query: {
      landscape: true
    }
    height: 300px
  }
})

.test {
  width: 200px;
}
@media (orientation: landscape) {
  .test {
    height: 300px;
  }
}

.test:
  width: 200px
  media:
    query:
      landscape: true
    height: 300px

Notes

• landscape: true === (orientation: landscape)

Portrait¶

Description: The value of true for the portrait property creates a portrait-specific media query condition.

ctr('.test', {
  width: 200px
  media: {
    query: {
      portrait: true
    }
    height: 300px
  }
})

.test:
  width: 200px
  media:
    query:
      portrait: true
    height: 300px

.test {
  width: 200px;
}
@media (orientation: portrait) {
  .test {
    height: 300px;
  }
}

ctr('.test', {
  width: 200px
  media: {
    query: {
      portrait: true
    }
    height: 300px
  }
})

.test {
  width: 200px;
}
@media (orientation: portrait) {
  .test {
    height: 300px;
  }
}

.test:
  width: 200px
  media:
    query:
      portrait: true
    height: 300px

Notes

• portrait: true === (orientation: portrait)

Multiple¶

Description: Multiple mixins can be used together.

ctr('.test', {
  width: 200px
  media: {
    query: {
      density: 2
      above: '300px'
    }
    width: 100px
  }
})

.test:
  width: 200px
  media:
    width: 100px
    query:
      density: 2
      above: 300px

.test {
  width: 200px;
}
@media (min-width: 300px) and (min-resolution: 2dppx) {
  .test {
    width: 100px;
  }
}

ctr('.test', {
  width: 200px
  media: {
    query: {
      density: 2
      above: '300px'
    }
    width: 100px
  }
})

.test {
  width: 200px;
}
@media (min-width: 300px) and (min-resolution: 2dppx) {
  .test {
    width: 100px;
  }
}

.test:
  width: 200px
  media:
    width: 100px
    query:
      density: 2
      above: 300px