Basic¶

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

ctr('.test', {
  width: 200px
  nons: {
    notThe: {
      key: '.the'
      font-size: 1em
    }
    '#BlackSwan': {
      font-size: 2em
    }
    '.phenomenon': {
      font-size: 3em
    }
  }
})

.test:
  width: 200px
  nons:
    notThe:
      key: .the
      font-size: 1em
    '#BlackSwan':
      font-size: 2em
    .phenomenon:
      font-size: 3em

.test {
  width: 200px;
}
.test:not(.the) {
  font-size: 1em;
}
.test:not(#BlackSwan) {
  font-size: 2em;
}
.test:not(.phenomenon) {
  font-size: 3em;
}

ctr('.test', {
  width: 200px
  nons: {
    notThe: {
      key: '.the'
      font-size: 1em
    }
    '#BlackSwan': {
      font-size: 2em
    }
    '.phenomenon': {
      font-size: 3em
    }
  }
})

.test {
  width: 200px;
}
.test:not(.the) {
  font-size: 1em;
}
.test:not(#BlackSwan) {
  font-size: 2em;
}
.test:not(.phenomenon) {
  font-size: 3em;
}

.test:
  width: 200px
  nons:
    notThe:
      key: .the
      font-size: 1em
    '#BlackSwan':
      font-size: 2em
    .phenomenon:
      font-size: 3em

Notes

• In the nons object, you cannot use ctr reserved keys that are not non related, such as hover, animation, etc.

Common Key¶

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

ctr('.test', {
  width: 200px
  nons: {
    '.pentagon': {
      font-size: 1em
    }
    '.nonagon': {
      font-size: 2em
    }
    '#pentadecagon': {
      font-size: 3em
    }
    common: {
      border-radius: 4px
    }
  }
})

.test:
  width: 200px
  nons:
    .pentagon:
      font-size: 1em
    .nonagon:
      font-size: 2em
    '#pentadecagon':
      font-size: 3em
    common:
      border-radius: 4px

.test {
  width: 200px;
}
.test:not(.pentagon) {
  font-size: 1em;
  border-radius: 4px;
}
.test:not(.nonagon) {
  font-size: 2em;
  border-radius: 4px;
}
.test:not(#pentadecagon) {
  font-size: 3em;
  border-radius: 4px;
}

ctr('.test', {
  width: 200px
  nons: {
    '.pentagon': {
      font-size: 1em
    }
    '.nonagon': {
      font-size: 2em
    }
    '#pentadecagon': {
      font-size: 3em
    }
    common: {
      border-radius: 4px
    }
  }
})

.test {
  width: 200px;
}
.test:not(.pentagon) {
  font-size: 1em;
  border-radius: 4px;
}
.test:not(.nonagon) {
  font-size: 2em;
  border-radius: 4px;
}
.test:not(#pentadecagon) {
  font-size: 3em;
  border-radius: 4px;
}

.test:
  width: 200px
  nons:
    .pentagon:
      font-size: 1em
    .nonagon:
      font-size: 2em
    '#pentadecagon':
      font-size: 3em
    common:
      border-radius: 4px

Notes

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

Omit¶

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

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

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

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

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

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

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

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

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

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

.test:
  width: 200px
  nons:
    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 non instances to merge with.

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

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

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

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

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

.test:
  width: 200px
  nons:
    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 non 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 non instance inherits the common Object value.

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

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

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

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

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

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