Basic¶

Description: The medias Object groups media instances together in which each child Object is treated as a separate media instance. If a query Object or property is not defined in the media instance, its Object key is used to create a mixin Object.

ctr('.test', {
  width: 200px
  medias: {
    '-sm': {
      width: 300px
    }
    md: {
      width: 400px
    }
    custom: {
      query: {
        above: 'md'
        density: 2
      }
      width: 500px
    }
  }
})

.test:
  width: 200px
  medias:
    -sm:
      width: 300px
    md:
      width: 400px
    custom:
      width: 500px
      query:
        above: md
        density: 2

.test {
  width: 200px;
}
@media (max-width: 600px) {
  .test {
    width: 300px;
  }
}
@media (min-width: 600px) and (max-width: 800px) {
  .test {
    width: 400px;
  }
}
@media (min-width: 800px) and (min-resolution: 2dppx) {
  .test {
    width: 500px;
  }
}

ctr('.test', {
  width: 200px
  medias: {
    '-sm': {
      width: 300px
    }
    md: {
      width: 400px
    }
    custom: {
      query: {
        above: 'md'
        density: 2
      }
      width: 500px
    }
  }
})

.test {
  width: 200px;
}
@media (max-width: 600px) {
  .test {
    width: 300px;
  }
}
@media (min-width: 600px) and (max-width: 800px) {
  .test {
    width: 400px;
  }
}
@media (min-width: 800px) and (min-resolution: 2dppx) {
  .test {
    width: 500px;
  }
}

.test:
  width: 200px
  medias:
    -sm:
      width: 300px
    md:
      width: 400px
    custom:
      width: 500px
      query:
        above: md
        density: 2

Notes

• In the medias Object, you cannot use any ctr reserved keys that are not media related, such as hover, animation, etc.

Common Key¶

Description: A common Object can be defined in the medias Object to specify common values used by all media instances.

ctr('.test', {
  width: 200px
  medias: {
    // merged into each media
    common: {
      query: {
        type: 'screen'
      }
      font-size: 1em
    }
    '-sm': {
      width: 300px
    }
    md: {
      width: 400px
    }
    custom: {
      query: {
        above: 'md'
        density: 2
      }
      width: 500px
    }
  }
})

.test:
  width: 200px
  medias:
    -sm:
      width: 300px
    md:
      width: 400px
    custom:
      width: 500px
      query:
        above: md
        density: 2
    # added to all
    common:
      font-size: 1em
      query:
        type: screen

.test {
  width: 200px;
}
@media only screen and (max-width: 600px) {
  .test {
    width: 300px;
    font-size: 1em;
  }
}
@media only screen and (min-width: 600px) and (max-width: 800px) {
  .test {
    width: 400px;
    font-size: 1em;
  }
}
@media only screen and (min-width: 800px) and (min-resolution: 2dppx) {
  .test {
    width: 500px;
    font-size: 1em;
  }
}

ctr('.test', {
  width: 200px
  medias: {
    // merged into each media
    common: {
      query: {
        type: 'screen'
      }
      font-size: 1em
    }
    '-sm': {
      width: 300px
    }
    md: {
      width: 400px
    }
    custom: {
      query: {
        above: 'md'
        density: 2
      }
      width: 500px
    }
  }
})

.test {
  width: 200px;
}
@media only screen and (max-width: 600px) {
  .test {
    width: 300px;
    font-size: 1em;
  }
}
@media only screen and (min-width: 600px) and (max-width: 800px) {
  .test {
    width: 400px;
    font-size: 1em;
  }
}
@media only screen and (min-width: 800px) and (min-resolution: 2dppx) {
  .test {
    width: 500px;
    font-size: 1em;
  }
}

.test:
  width: 200px
  medias:
    -sm:
      width: 300px
    md:
      width: 400px
    custom:
      width: 500px
      query:
        above: md
        density: 2
    # added to all
    common:
      font-size: 1em
      query:
        type: screen

Notes

• common alias: global
• The common Object is deep merged into each media instance

Omit¶

Description: A List value for the omit option property in an Object media instance omits specific common values from being merged into the instance. The omit value is defined by the property path relative to the common Object.

ctr('.test', {
  width: 200px
  medias: {
    common: {
      query: {
        type: 'screen'
        'max-height': 400px
      }
      height: 222px
    }
    sm: {
      width: 300px
    }
    md: {
      option: {
        // omits type
        omit: 'query.type'
      }
      width: 400px
    }
  }
})

.test:
  width: 200px
  medias:
    common:
      query:
        type: screen
        max-height: 400px
      height: 222px
    sm:
      width: 300px
    md:
      option:
        # omits type
        omit: query.type
      width: 400px

.test {
  width: 200px;
}
@media only screen and (min-width: 400px) and (max-width: 600px) and (max-height: 400px) {
  .test {
    width: 300px;
    height: 222px;
  }
}
@media (min-width: 600px) and (max-width: 800px) and (max-height: 400px) {
  .test {
    width: 400px;
    height: 222px;
  }
}

ctr('.test', {
  width: 200px
  medias: {
    common: {
      query: {
        type: 'screen'
        'max-height': 400px
      }
      height: 222px
    }
    sm: {
      width: 300px
    }
    md: {
      option: {
        // omits type
        omit: 'query.type'
      }
      width: 400px
    }
  }
})

.test {
  width: 200px;
}
@media only screen and (min-width: 400px) and (max-width: 600px) and (max-height: 400px) {
  .test {
    width: 300px;
    height: 222px;
  }
}
@media (min-width: 600px) and (max-width: 800px) and (max-height: 400px) {
  .test {
    width: 400px;
    height: 222px;
  }
}

.test:
  width: 200px
  medias:
    common:
      query:
        type: screen
        max-height: 400px
      height: 222px
    sm:
      width: 300px
    md:
      option:
        # omits type
        omit: query.type
      width: 400px

Notes

• Only omit values are excluded
• Conversely, the pick option property is the inverse, in that only pick values are merged
• Lookup is performed through the lodash _.get Function via dot notation: <path>.<to>.<omit>.<property>

Pick¶

Description: A List value for the pick option property in an Object media instance picks specific common values to be merged into the instance. The pick value is defined by the property path relative to the common Object.

ctr('.test', {
  width: 200px
  medias: {
    common: {
      query: {
        type: 'screen'
        'max-height': 400px
      }
      height: 222px
    }
    sm: {
      width: 300px
    }
    md: {
      option: {
        // picks type height + max-height
        pick: 'height' 'query.max-height'
      }
      width: 400px
    }
  }
})

.test:
  width: 200px
  medias:
    common:
      query:
        type: screen
        max-height: 400px
      height: 222px
    sm:
      width: 300px
    md:
      option:
        # picks type height + max-height
        pick: [height, query.max-height]
      width: 400px

.test {
  width: 200px;
}
@media only screen and (min-width: 400px) and (max-width: 600px) and (max-height: 400px) {
  .test {
    width: 300px;
    height: 222px;
  }
}
@media (min-width: 600px) and (max-width: 800px) and (max-height: 400px) {
  .test {
    width: 400px;
    height: 222px;
  }
}

ctr('.test', {
  width: 200px
  medias: {
    common: {
      query: {
        type: 'screen'
        'max-height': 400px
      }
      height: 222px
    }
    sm: {
      width: 300px
    }
    md: {
      option: {
        // picks type height + max-height
        pick: 'height' 'query.max-height'
      }
      width: 400px
    }
  }
})

.test {
  width: 200px;
}
@media only screen and (min-width: 400px) and (max-width: 600px) and (max-height: 400px) {
  .test {
    width: 300px;
    height: 222px;
  }
}
@media (min-width: 600px) and (max-width: 800px) and (max-height: 400px) {
  .test {
    width: 400px;
    height: 222px;
  }
}

.test:
  width: 200px
  medias:
    common:
      query:
        type: screen
        max-height: 400px
      height: 222px
    sm:
      width: 300px
    md:
      option:
        # picks type height + max-height
        pick: [height, query.max-height]
      width: 400px

Notes

• Only pick values are merged and all other values are excluded
• Conversely, the omit option property is the inverse, in that only omit values are exculed from the merge
• Lookup is performed through the lodash _.get Function via dot notation: <path>.<to>.<pick>.<property>

Target¶

Description: A List value for the target option property in the common Object specifies specific media instances to merge with.

ctr('.test', {
  width: 200px
  medias: {
    common: {
      option: {
        // only merges with "md"
        target: 'md'
      }
      query: {
        type: 'screen'
        'max-height': 400px
      }
      height: 222px
    }
    sm: {
      width: 300px
    }
    md: {
      width: 400px
    }
  }
})

.test:
  width: 200px
  medias:
    common:
      option:
        # only merges with "md"
        target: md
      query:
        type: screen
        max-height: 400px
      height: 222px
    sm:
      width: 300px
    md:
      width: 400px

.test {
  width: 200px;
}
@media (min-width: 400px) and (max-width: 600px) {
  .test {
    width: 300px;
  }
}
@media only screen and (min-width: 600px) and (max-width: 800px) and (max-height: 400px) {
  .test {
    width: 400px;
    height: 222px;
  }
}

ctr('.test', {
  width: 200px
  medias: {
    common: {
      option: {
        // only merges with "md"
        target: 'md'
      }
      query: {
        type: 'screen'
        'max-height': 400px
      }
      height: 222px
    }
    sm: {
      width: 300px
    }
    md: {
      width: 400px
    }
  }
})

.test {
  width: 200px;
}
@media (min-width: 400px) and (max-width: 600px) {
  .test {
    width: 300px;
  }
}
@media only screen and (min-width: 600px) and (max-width: 800px) and (max-height: 400px) {
  .test {
    width: 400px;
    height: 222px;
  }
}

.test:
  width: 200px
  medias:
    common:
      option:
        # only merges with "md"
        target: md
      query:
        type: screen
        max-height: 400px
      height: 222px
    sm:
      width: 300px
    md:
      width: 400px

Notes

• An instance is defined by its Object key
• The intended purpose is to aid in debugging
• If an media instance is not defined in the List, it’s not merged with the common Object

True Value¶

Description: A true Boolean value for an Object media instance inherits the common Object value.

ctr('.test', {
  width: 200px
  medias: {
    common: {
      query: {
        type: 'screen'
        'max-height': 400px
      }
      height: 222px
    }
    sm: {
      width: 300px
    }
    // inherits common
    md: true
  }
})

.test:
  width: 200px
  medias:
    common:
      query:
        type: screen
        max-height: 400px
      height: 222px
    sm:
      width: 300px
    # inherits common
    md: true

.test {
  width: 200px;
}
@media only screen and (min-width: 400px) and (max-width: 600px) and (max-height: 400px) {
  .test {
    width: 300px;
    height: 222px;
  }
}
@media only screen and (min-width: 600px) and (max-width: 800px) and (max-height: 400px) {
  .test {
    height: 222px;
  }
}

ctr('.test', {
  width: 200px
  medias: {
    common: {
      query: {
        type: 'screen'
        'max-height': 400px
      }
      height: 222px
    }
    sm: {
      width: 300px
    }
    // inherits common
    md: true
  }
})

.test {
  width: 200px;
}
@media only screen and (min-width: 400px) and (max-width: 600px) and (max-height: 400px) {
  .test {
    width: 300px;
    height: 222px;
  }
}
@media only screen and (min-width: 600px) and (max-width: 800px) and (max-height: 400px) {
  .test {
    height: 222px;
  }
}

.test:
  width: 200px
  medias:
    common:
      query:
        type: screen
        max-height: 400px
      height: 222px
    sm:
      width: 300px
    # inherits common
    md: true