Global

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

Edit
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

Instance

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

Edit
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.

Edit
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