Basic¶

Description: The components Object groups component instances together in which each child Object is treated as a separate component instance. If the key property is not defined in the component instance, its Object key is used as the <identifier>.

ctr('.test', {
  width: 200px
  components: {
    'span': {
      font-size: 1em
    }
    '#for': {
      font-size: 2em
    }
    '.linus': {
      selector: '+'
      font-size: 3em
    }
    random: {
      // specified key
      key: 'li'
      font-size: 4em
    }
  }
})

.test:
  width: 200px
  components:
    span:
      font-size: 1em
    '#for':
      font-size: 2em
    .linus:
      selector: +
      font-size: 3em
    random:
      # specified key
      key: li
      font-size: 4em

.test {
  width: 200px;
}
.test > span {
  font-size: 1em;
}
.test > #for {
  font-size: 2em;
}
.test + .linus {
  font-size: 3em;
}
.test > li {
  font-size: 4em;
}

ctr('.test', {
  width: 200px
  components: {
    'span': {
      font-size: 1em
    }
    '#for': {
      font-size: 2em
    }
    '.linus': {
      selector: '+'
      font-size: 3em
    }
    random: {
      // specified key
      key: 'li'
      font-size: 4em
    }
  }
})

.test {
  width: 200px;
}
.test > span {
  font-size: 1em;
}
.test > #for {
  font-size: 2em;
}
.test + .linus {
  font-size: 3em;
}
.test > li {
  font-size: 4em;
}

.test:
  width: 200px
  components:
    span:
      font-size: 1em
    '#for':
      font-size: 2em
    .linus:
      selector: +
      font-size: 3em
    random:
      # specified key
      key: li
      font-size: 4em

Notes

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

Common Key¶

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

ctr('.test', {
  width: 200px
  components: {
    // merged into each component
    common: {
      selector: '~'
      background: red
    }
    '.99Bottles': {
      font-size: 1em
    }
    '#ofBeer': {
      font-size: 2em
    }
    '.onTheWall': {
      font-size: 3em
    }
    random: {
      // specified key
      key: 'li + .takeOneDown'
      font-size: 4em
    }
  }
})

'.test':
  width: 200px
  components:
    # merged into each component
    common:
      selector: '~'
      background: red
    '.99Bottles':
      font-size: 1em
    '#ofBeer':
      font-size: 2em
    '.onTheWall':
      font-size: 3em
    random:
      # specified key
      key: 'li + .takeOneDown'
      font-size: 4em

.test {
  width: 200px;
}
.test ~ .99Bottles {
  font-size: 1em;
  background: #f00;
}
.test ~ #ofBeer {
  font-size: 2em;
  background: #f00;
}
.test ~ .onTheWall {
  font-size: 3em;
  background: #f00;
}
.test ~ li + .takeOneDown {
  font-size: 4em;
  background: #f00;
}

ctr('.test', {
  width: 200px
  components: {
    // merged into each component
    common: {
      selector: '~'
      background: red
    }
    '.99Bottles': {
      font-size: 1em
    }
    '#ofBeer': {
      font-size: 2em
    }
    '.onTheWall': {
      font-size: 3em
    }
    random: {
      // specified key
      key: 'li + .takeOneDown'
      font-size: 4em
    }
  }
})

.test {
  width: 200px;
}
.test ~ .99Bottles {
  font-size: 1em;
  background: #f00;
}
.test ~ #ofBeer {
  font-size: 2em;
  background: #f00;
}
.test ~ .onTheWall {
  font-size: 3em;
  background: #f00;
}
.test ~ li + .takeOneDown {
  font-size: 4em;
  background: #f00;
}

'.test':
  width: 200px
  components:
    # merged into each component
    common:
      selector: '~'
      background: red
    '.99Bottles':
      font-size: 1em
    '#ofBeer':
      font-size: 2em
    '.onTheWall':
      font-size: 3em
    random:
      # specified key
      key: 'li + .takeOneDown'
      font-size: 4em

Notes

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

Omit¶

Description: A List value for the omit option property in an Object component 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
  components: {
    common: {
      font-size: 2em
      height: 400px
    }
    '.one': {
      opacity: 1
    }
    '.two': {
      option: {
        // omits font-size
        omit: 'font-size'
      }
      opacity: 0.5
    }
  }
})

.test:
  width: 200px
  components:
    common:
      font-size: 2em
      height: 400px
    .one:
      opacity: 1
    .two:
      option:
        # omits font-size
        omit: font-size
      opacity: 0.5

.test {
  width: 200px;
}
.test > .one {
  opacity: 1;
  height: 400px;
  font-size: 2em;
}
.test > .two {
  opacity: 0.5;
  height: 400px;
}

ctr('.test', {
  width: 200px
  components: {
    common: {
      font-size: 2em
      height: 400px
    }
    '.one': {
      opacity: 1
    }
    '.two': {
      option: {
        // omits font-size
        omit: 'font-size'
      }
      opacity: 0.5
    }
  }
})

.test {
  width: 200px;
}
.test > .one {
  opacity: 1;
  height: 400px;
  font-size: 2em;
}
.test > .two {
  opacity: 0.5;
  height: 400px;
}

.test:
  width: 200px
  components:
    common:
      font-size: 2em
      height: 400px
    .one:
      opacity: 1
    .two:
      option:
        # omits font-size
        omit: font-size
      opacity: 0.5

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 component 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
  components: {
    common: {
      font-size: 2em
      height: 400px
    }
    '.one': {
      opacity: 1
    }
    '.two': {
      option: {
        // only picks height
        pick: 'height'
      }
      opacity: 0.5
    }
  }
})

.test:
  width: 200px
  components:
    common:
      font-size: 2em
      height: 400px
    .one:
      opacity: 1
    .two:
      option:
        # only picks height
        pick: height
      opacity: 0.5

.test {
  width: 200px;
}
.test > .one {
  opacity: 1;
  height: 400px;
  font-size: 2em;
}
.test > .two {
  opacity: 0.5;
  height: 400px;
}

ctr('.test', {
  width: 200px
  components: {
    common: {
      font-size: 2em
      height: 400px
    }
    '.one': {
      opacity: 1
    }
    '.two': {
      option: {
        // only picks height
        pick: 'height'
      }
      opacity: 0.5
    }
  }
})

.test {
  width: 200px;
}
.test > .one {
  opacity: 1;
  height: 400px;
  font-size: 2em;
}
.test > .two {
  opacity: 0.5;
  height: 400px;
}

.test:
  width: 200px
  components:
    common:
      font-size: 2em
      height: 400px
    .one:
      opacity: 1
    .two:
      option:
        # only picks height
        pick: height
      opacity: 0.5

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 component instances to merge with.

ctr('.test', {
  width: 200px
  components: {
    common: {
      option: {
        // only merges with "two"
        target: '.two'
      }
      font-size: 2em
      height: 400px
    }
    '.one': {
      opacity: 1
    }
    '.two': {
      opacity: 0.5
    }
  }
})

.test:
  width: 200px
  components:
    common:
      option:
        # only merges with "two"
        target: .two
      font-size: 2em
      height: 400px
    .one:
      opacity: 1
    .two:
      opacity: 0.5

.test {
  width: 200px;
}
.test > .one {
  opacity: 1;
}
.test > .two {
  opacity: 0.5;
  height: 400px;
  font-size: 2em;
}

ctr('.test', {
  width: 200px
  components: {
    common: {
      option: {
        // only merges with "two"
        target: '.two'
      }
      font-size: 2em
      height: 400px
    }
    '.one': {
      opacity: 1
    }
    '.two': {
      opacity: 0.5
    }
  }
})

.test {
  width: 200px;
}
.test > .one {
  opacity: 1;
}
.test > .two {
  opacity: 0.5;
  height: 400px;
  font-size: 2em;
}

.test:
  width: 200px
  components:
    common:
      option:
        # only merges with "two"
        target: .two
      font-size: 2em
      height: 400px
    .one:
      opacity: 1
    .two:
      opacity: 0.5

Notes

• An instance is defined by its Object key
• The intended purpose is to aid in debugging
• If an component 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 component instance inherits the common Object value.

ctr('.test', {
  width: 200px
  components: {
    common: {
      font-size: 2em
      height: 400px
    }
    '.one': {
      opacity: 1
    }
    // inherits common
    '.two': true
  }
})

.test:
  width: 200px
  components:
    common:
      font-size: 2em
      height: 400px
    .one:
      opacity: 1
    # inherits common
    .two: true

.test {
  width: 200px;
}
.test > .one {
  opacity: 1;
  height: 400px;
  font-size: 2em;
}
.test > .two {
  height: 400px;
  font-size: 2em;
}

ctr('.test', {
  width: 200px
  components: {
    common: {
      font-size: 2em
      height: 400px
    }
    '.one': {
      opacity: 1
    }
    // inherits common
    '.two': true
  }
})

.test {
  width: 200px;
}
.test > .one {
  opacity: 1;
  height: 400px;
  font-size: 2em;
}
.test > .two {
  height: 400px;
  font-size: 2em;
}

.test:
  width: 200px
  components:
    common:
      font-size: 2em
      height: 400px
    .one:
      opacity: 1
    # inherits common
    .two: true