Syntax¶

Description: media is defined as an @media at-rule.

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

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

@media (<media:query>: <value>) {
  <#selector> {
    <...>: <...>;
  }
}

Notes

• Regex Match: /^media$|^medias$|^media-/i
• Most of the Notes in the Media examples have a “Condition” that defines the @media condition in human words
• MDN @media
• MDN Using media queries

Basic¶

Description: A media Object creates an @media at-rule whose media query condition is defined by the query Object key-value pairs for the properties in the media Object at the scope level it is defined.

ctr('.test', {
  width: 200px
  media: {
    query: {
      'max-width': 800px
    }
    background: red
  }
})

.test:
  width: 200px
  media:
    query:
      max-width: 800px
    background: red

.test {
  width: 200px;
}
@media (max-width: 800px) {
  .test {
    background: #f00;
  }
}

ctr('.test', {
  width: 200px
  media: {
    query: {
      'max-width': 800px
    }
    background: red
  }
})

.test {
  width: 200px;
}
@media (max-width: 800px) {
  .test {
    background: #f00;
  }
}

.test:
  width: 200px
  media:
    query:
      max-width: 800px
    background: red

Notes

• Condition: If the window width is less than 800px, then the background of .test is red

Multiple¶

Description: Multiple key-value pairs specified in the query Object create conditional group rules. Additionally, a value can be a List to create a property with multiple conditions.

ctr('.test', {
  width: 200px
  media: {
    query: {
      'max-width': 800px
      'max-height': 800px
    }
    background: red
  }
})

.test:
  width: 200px
  media:
    query:
      max-width: 800px
      max-height: 800px
    background: red

.test {
  width: 200px;
}
@media (max-width: 800px) and (max-height: 800px) {
  .test {
    background: #f00;
  }
}

ctr('.test', {
  width: 200px
  media: {
    query: {
      'max-width': 800px
      'max-height': 800px
    }
    background: red
  }
})

.test {
  width: 200px;
}
@media (max-width: 800px) and (max-height: 800px) {
  .test {
    background: #f00;
  }
}

.test:
  width: 200px
  media:
    query:
      max-width: 800px
      max-height: 800px
    background: red

ctr('.test', {
  width: 200px
  media: {
    query: {
      'max-width': 800px 50vw
    }
    background: red
  }
})

.test:
  width: 200px
  media:
    query:
      max-width: [800px, 50vw]
    background: red

.test {
  width: 200px;
}
@media (max-width: 50vw) and (max-width: 800px) {
  .test {
    background: #f00;
  }
}

ctr('.test', {
  width: 200px
  media: {
    query: {
      'max-width': 800px 50vw
    }
    background: red
  }
})

.test {
  width: 200px;
}
@media (max-width: 50vw) and (max-width: 800px) {
  .test {
    background: #f00;
  }
}

.test:
  width: 200px
  media:
    query:
      max-width: [800px, 50vw]
    background: red

Notes

• By default, the conditional group is composed with the and logical operator
• An or logical operator can be defined through an orCondition Object
• Condition A: If the window width and height is less than 800px then the background of .test is red
• Condition B: If the window width is less than 800px and 50vw then the background of .test is red

Query Type¶

Description: A type property defined in the query Object defines a specific target media type.

ctr('.test', {
  width: 200px
  media: {
    query: {
      type: 'screen'
    }
    background: red
  }
})

.test:
  width: 200px
  media:
    query:
      type: screen
    background: red

.test {
  width: 200px;
}
@media only screen {
  .test {
    background: #f00;
  }
}

ctr('.test', {
  width: 200px
  media: {
    query: {
      type: 'screen'
    }
    background: red
  }
})

.test {
  width: 200px;
}
@media only screen {
  .test {
    background: #f00;
  }
}

.test:
  width: 200px
  media:
    query:
      type: screen
    background: red

Notes

• A not media type can be specified through the condition property
• Condition: If the media type is a screen, then the background of .test is red
• MDN Media types

Query Helpers¶

Description: Predefined media query values defined in the global options can be used as variable values in the query Object.

ctr('.test', {
  width: 200px
  media: {
    query: {
      max-width: 'md'
    }
    background: red
  }
})

.test:
  width: 200px
  media:
    query:
      max-width: md
    background: red

.test {
  width: 200px;
}
@media (max-width: 800px) {
  .test {
    background: #f00;
  }
}

ctr('.test', {
  width: 200px
  media: {
    query: {
      max-width: 'md'
    }
    background: red
  }
})

.test {
  width: 200px;
}
@media (max-width: 800px) {
  .test {
    background: #f00;
  }
}

.test:
  width: 200px
  media:
    query:
      max-width: md
    background: red

ctr('.test', {
  width: 200px
  media: {
    query: {
      max-width: 'hd'
    }
    background: red
  }
})

.test:
  width: 200px
  media:
    query:
      max-width: hd
    background: red

.test {
  width: 200px;
}
@media (max-width: 1800px) {
  .test {
    background: #f00;
  }
}

ctr('.test', {
  width: 200px
  media: {
    query: {
      max-width: 'hd'
    }
    background: red
  }
})

.test {
  width: 200px;
}
@media (max-width: 1800px) {
  .test {
    background: #f00;
  }
}

.test:
  width: 200px
  media:
    query:
      max-width: hd
    background: red

Notes

• Default media query helpers which are set in the global options
  • xs === 400px
  • sm === 600px
  • md === 800px
  • lg === 1050px
  • hd === 1800px
• Condition: If the window width is less than <query:helper>, then the background of .test is red