Global¶

Description: The predefined media query size helpers can be changed globally through the global options.

ctrSetOption({
  media: {
    // default === 400px
    xs: 250px
    // default === 600px
    sm: 400px
  }
})

ctr('.test', {
  width: 200px
  media: {
    'xs': {
      height: 100px
    }
    'sm': {
      height: 200px
    }
    '+sm': {
      height: 300px
    }
  }
})

ctr:::setOption:
  media:
    # default === 400px
    xs: 250px
    # default === 600px
    sm: 400px

.test:
  width: 200px
  media:
    xs:
      height: 100px
    sm:
      height: 200px
    +sm:
      height: 300px

.test {
  width: 200px;
}
@media (max-width: 250px) {
  .test {
    height: 100px;
  }
}
@media (min-width: 250px) and (max-width: 400px) {
  .test {
    height: 200px;
  }
}
@media (min-width: 400px) {
  .test {
    height: 300px;
  }
}

ctrSetOption({
  media: {
    // default === 400px
    xs: 250px
    // default === 600px
    sm: 400px
  }
})

ctr('.test', {
  width: 200px
  media: {
    'xs': {
      height: 100px
    }
    'sm': {
      height: 200px
    }
    '+sm': {
      height: 300px
    }
  }
})

.test {
  width: 200px;
}
@media (max-width: 250px) {
  .test {
    height: 100px;
  }
}
@media (min-width: 250px) and (max-width: 400px) {
  .test {
    height: 200px;
  }
}
@media (min-width: 400px) {
  .test {
    height: 300px;
  }
}

ctr:::setOption:
  media:
    # default === 400px
    xs: 250px
    # default === 600px
    sm: 400px

.test:
  width: 200px
  media:
    xs:
      height: 100px
    sm:
      height: 200px
    +sm:
      height: 300px

Notes

• Default media global option values
  • xs === 400px
  • sm === 600px
  • md === 800px
  • lg === 1050px
  • hd === 1800px
• As of right now, I recomend you stick with the five above size helpers and change them as need be
  • You can add additional size helpers, but I cannot make any promises on the logic, it should work, fingers crossed

Instance¶

Description: The predefined media query size helpers can be changed in a ctr instance through the root option Object.

ctr('.test', {
  option: {
    media: {
      // default === 400px
      xs: 250px
      // default === 600px
      sm: 400px
    }
  }
  width: 200px
  media: {
    'xs': {
      height: 100px
    }
    'sm': {
      height: 200px
    }
    '+sm': {
      height: 300px
    }
  }
})

.test:
  option:
    media:
      # default === 400px
      xs: 250px
      # default === 600px
      sm: 400px
  width: 200px
  media:
    xs:
      height: 100px
    sm:
      height: 200px
    +sm:
      height: 300px

.test {
  width: 200px;
}
@media (max-width: 250px) {
  .test {
    height: 100px;
  }
}
@media (min-width: 250px) and (max-width: 400px) {
  .test {
    height: 200px;
  }
}
@media (min-width: 400px) {
  .test {
    height: 300px;
  }
}

ctr('.test', {
  option: {
    media: {
      // default === 400px
      xs: 250px
      // default === 600px
      sm: 400px
    }
  }
  width: 200px
  media: {
    'xs': {
      height: 100px
    }
    'sm': {
      height: 200px
    }
    '+sm': {
      height: 300px
    }
  }
})

.test {
  width: 200px;
}
@media (max-width: 250px) {
  .test {
    height: 100px;
  }
}
@media (min-width: 250px) and (max-width: 400px) {
  .test {
    height: 200px;
  }
}
@media (min-width: 400px) {
  .test {
    height: 300px;
  }
}

.test:
  option:
    media:
      # default === 400px
      xs: 250px
      # default === 600px
      sm: 400px
  width: 200px
  media:
    xs:
      height: 100px
    sm:
      height: 200px
    +sm:
      height: 300px

queueMedia¶

Description: By default, all media queries are queued and rendered last at the scope level they are defined. Why? Well, it’s not called cascading style sheets for nothing. Hence, the queueMedia option property better ensures media queries work as expected.

ctr('.test', {
  option: {
    global: {
      queueMedia: false
    }
  }
  width: 200px
  // now processed in the order, it's received
  media--md: {
    background: blue
  }
  comp-div: {
    width: 400px
  }
})

.test:
  option:
    global:
      queueMedia: false
  width: 200px
  # now processed in the order, its received
  media--md:
    background: blue
  comp-div:
    width: 400px

.test {
  width: 200px;
}
@media (max-width: 800px) {
  .test {
    background: #00f;
  }
}
.test > div {
  width: 400px;
}

ctr('.test', {
  option: {
    global: {
      queueMedia: false
    }
  }
  width: 200px
  // now processed in the order, it's received
  media--md: {
    background: blue
  }
  comp-div: {
    width: 400px
  }
})

.test {
  width: 200px;
}
@media (max-width: 800px) {
  .test {
    background: #00f;
  }
}
.test > div {
  width: 400px;
}

.test:
  option:
    global:
      queueMedia: false
  width: 200px
  # now processed in the order, its received
  media--md:
    background: blue
  comp-div:
    width: 400px

Notes

• The default value is true, and I recommend you not change this option unless you know what you’re doing, and why you’re doing it
• Like most options, queueMedia can be set globally or on an instance basis