Basic¶

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

Edit


ctr('.test > div', {
  width: 200px
  attributes: {
    'title~="test1"': {
      font-size: 1em
    }
    '[class|="test2"]': {
      font-size: 2em
    }
    kool: {
      key: 'class^="test3"'
      font-size: 3em
    }
    beerMe: {
      key: '[class$="test4"]'
      font-size: 4em
    }
    myName: {
      key: 'class*="te"'
      font-size: 5em
    }
    user: {
      key: '[class*="artisin"]'
      font-size: 6em
    }
  }
})


.test > div:
  width: 200px
  attributes:
    title~="test1":
      font-size: 1em
    '[class|="test2"]':
      font-size: 2em
    kool:
      key: class^="test3"
      font-size: 3em
    beerMe:
      key: '[class$="test4"]'
      font-size: 4em
    myName:
      key: class*="te"
      font-size: 5em
    user:
      key: '[class*="artisin"]'
      font-size: 6em


.test > div {
  width: 200px;
}
.test > div[title~="test1"] {
  font-size: 1em;
}
.test > div[class|="test2"] {
  font-size: 2em;
}
.test > div[class^="test3"] {
  font-size: 3em;
}
.test > div[class$="test4"] {
  font-size: 4em;
}
.test > div[class*="te"] {
  font-size: 5em;
}
.test > div[class*="artisin"] {
  font-size: 6em;
}

ctr('.test > div', {
  width: 200px
  attributes: {
    'title~="test1"': {
      font-size: 1em
    }
    '[class|="test2"]': {
      font-size: 2em
    }
    kool: {
      key: 'class^="test3"'
      font-size: 3em
    }
    beerMe: {
      key: '[class$="test4"]'
      font-size: 4em
    }
    myName: {
      key: 'class*="te"'
      font-size: 5em
    }
    user: {
      key: '[class*="artisin"]'
      font-size: 6em
    }
  }
})

.test > div {
  width: 200px;
}
.test > div[title~="test1"] {
  font-size: 1em;
}
.test > div[class|="test2"] {
  font-size: 2em;
}
.test > div[class^="test3"] {
  font-size: 3em;
}
.test > div[class$="test4"] {
  font-size: 4em;
}
.test > div[class*="te"] {
  font-size: 5em;
}
.test > div[class*="artisin"] {
  font-size: 6em;
}

.test > div:
  width: 200px
  attributes:
    title~="test1":
      font-size: 1em
    '[class|="test2"]':
      font-size: 2em
    kool:
      key: class^="test3"
      font-size: 3em
    beerMe:
      key: '[class$="test4"]'
      font-size: 4em
    myName:
      key: class*="te"
      font-size: 5em
    user:
      key: '[class*="artisin"]'
      font-size: 6em

Notes

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

Common Key¶

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

Edit


ctr('.test > div', {
  width: 200px
  attributes: {
    // merged into each attribute
    common: {
      option: {
        key: 'class*'
      }
      font-size: 2em
    }
    'te': {
      background: teal
    }
    'artisin': {
      background: red
    }
  }
})


.test > div:
  width: 200px
  attributes:
    # merged into each attribute
    common:
      option:
        key: class*
      font-size: 2em
    te:
      background: teal
    artisin:
      background: red


.test > div {
  width: 200px;
}
.test > div[class*="te"] {
  font-size: 2em;
  background: #008080;
}
.test > div[class*="artisin"] {
  font-size: 2em;
  background: #f00;
}

ctr('.test > div', {
  width: 200px
  attributes: {
    // merged into each attribute
    common: {
      option: {
        key: 'class*'
      }
      font-size: 2em
    }
    'te': {
      background: teal
    }
    'artisin': {
      background: red
    }
  }
})

.test > div {
  width: 200px;
}
.test > div[class*="te"] {
  font-size: 2em;
  background: #008080;
}
.test > div[class*="artisin"] {
  font-size: 2em;
  background: #f00;
}

.test > div:
  width: 200px
  attributes:
    # merged into each attribute
    common:
      option:
        key: class*
      font-size: 2em
    te:
      background: teal
    artisin:
      background: red

Notes

common alias: global
If you want to specify a key property in the common Object, it must be defined in the option Object
The common Object is deep merged into each attribute instance

Omit¶

Description: A List value for the omit option property in an Object attribute 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.

Edit


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


.test > div:
  width: 200px
  attributes:
    common:
      option:
        key: class*
      font-size: 2em
      height: 400px
    one:
      opacity: 1
    two:
      option:
        # omits font-size
        omit: font-size
      opacity: 0.5


.test > div {
  width: 200px;
}
.test > div[class*="one"] {
  opacity: 1;
  height: 400px;
  font-size: 2em;
}
.test > div[class*="two"] {
  opacity: 0.5;
  height: 400px;
}

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

.test > div {
  width: 200px;
}
.test > div[class*="one"] {
  opacity: 1;
  height: 400px;
  font-size: 2em;
}
.test > div[class*="two"] {
  opacity: 0.5;
  height: 400px;
}

.test > div:
  width: 200px
  attributes:
    common:
      option:
        key: class*
      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 attribute 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.

Edit


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


.test > div:
  width: 200px
  attributes:
    common:
      option:
        key: class*
      font-size: 2em
      height: 400px
    one:
      opacity: 1
    two:
      option:
        # only picks height
        pick: height
      opacity: 0.5


.test > div {
  width: 200px;
}
.test > div[class*="one"] {
  opacity: 1;
  height: 400px;
  font-size: 2em;
}
.test > div[class*="two"] {
  opacity: 0.5;
  height: 400px;
}

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

.test > div {
  width: 200px;
}
.test > div[class*="one"] {
  opacity: 1;
  height: 400px;
  font-size: 2em;
}
.test > div[class*="two"] {
  opacity: 0.5;
  height: 400px;
}

.test > div:
  width: 200px
  attributes:
    common:
      option:
        key: class*
      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 attribute instances to merge with.

Edit


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


.test > div:
  width: 200px
  attributes:
    common:
      option:
        key: class*
        # only merges with "two"
        target: two
      font-size: 2em
      height: 400px
    one:
      opacity: 1
    two:
      opacity: 0.5


.test > div {
  width: 200px;
}
.test > div[class*="one"] {
  opacity: 1;
}
.test > div[class*="two"] {
  opacity: 0.5;
  height: 400px;
  font-size: 2em;
}

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

.test > div {
  width: 200px;
}
.test > div[class*="one"] {
  opacity: 1;
}
.test > div[class*="two"] {
  opacity: 0.5;
  height: 400px;
  font-size: 2em;
}

.test > div:
  width: 200px
  attributes:
    common:
      option:
        key: class*
        # 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 attribute 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 attribute instance inherits the common Object value.

Edit


ctr('.test > div', {
  width: 200px
  attributes: {
    common: {
      option: {
        key: 'class*'
      }
      font-size: 2em
      height: 400px
    }
    one: {
      opacity: 1
    }
    // inherits common
    two: true
  }
})


.test > div:
  width: 200px
  attributes:
    common:
      option:
        key: class*
      font-size: 2em
      height: 400px
    one:
      opacity: 1
    # inherits common
    two: true


.test > div {
  width: 200px;
}
.test > div[class*="one"] {
  opacity: 1;
  height: 400px;
  font-size: 2em;
}
.test > div[class*="two"] {
  height: 400px;
  font-size: 2em;
}

ctr('.test > div', {
  width: 200px
  attributes: {
    common: {
      option: {
        key: 'class*'
      }
      font-size: 2em
      height: 400px
    }
    one: {
      opacity: 1
    }
    // inherits common
    two: true
  }
})

.test > div {
  width: 200px;
}
.test > div[class*="one"] {
  opacity: 1;
  height: 400px;
  font-size: 2em;
}
.test > div[class*="two"] {
  height: 400px;
  font-size: 2em;
}

.test > div:
  width: 200px
  attributes:
    common:
      option:
        key: class*
      font-size: 2em
      height: 400px
    one:
      opacity: 1
    # inherits common
    two: true

Basic¶

Common Key¶

Omit¶

Pick¶

Target¶

True Value¶

Compile Status: valid

Help

Resourses

Account

Basic¶

Common Key¶

Omit¶

Pick¶

Target¶

True Value¶

Compile Status: valid

Social

Help

Resourses

Account