Basic¶

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

Edit


ctr('.test', {
  width: 200px
  elements: {
    before: {
      content: 'Yusuke Urameshi'
      font-size: 1em
    }
    after: {
      content: 'Hiei'
      font-size: 2em
    }
    last-of-type: {
      font-size: 3em
    }
    yuyuHakusho: {
      option: {
        // will be key
        key: "nth-of-type(2)"
      }
      font-size: 4em
    }
  }
})


.test:
  width: 200px
  elements:
    before:
      content: [Yusuke, Urameshi]
      font-size: 1em
    after:
      content: Hiei
      font-size: 2em
    last-of-type:
      font-size: 3em
    yuyuHakusho:
      option:
        # will be key
        key: "nth-of-type(2)"
      font-size: 4em


.test {
  width: 200px;
}
.test::before {
  font-size: 1em;
  content: "Yusuke Urameshi";
}
.test::after {
  font-size: 2em;
  content: "Hiei";
}
.test:last-of-type {
  font-size: 3em;
}
.test:nth-of-type(2) {
  font-size: 4em;
}

ctr('.test', {
  width: 200px
  elements: {
    before: {
      content: 'Yusuke Urameshi'
      font-size: 1em
    }
    after: {
      content: 'Hiei'
      font-size: 2em
    }
    last-of-type: {
      font-size: 3em
    }
    yuyuHakusho: {
      option: {
        // will be key
        key: "nth-of-type(2)"
      }
      font-size: 4em
    }
  }
})

.test {
  width: 200px;
}
.test::before {
  font-size: 1em;
  content: "Yusuke Urameshi";
}
.test::after {
  font-size: 2em;
  content: "Hiei";
}
.test:last-of-type {
  font-size: 3em;
}
.test:nth-of-type(2) {
  font-size: 4em;
}

.test:
  width: 200px
  elements:
    before:
      content: [Yusuke, Urameshi]
      font-size: 1em
    after:
      content: Hiei
      font-size: 2em
    last-of-type:
      font-size: 3em
    yuyuHakusho:
      option:
        # will be key
        key: "nth-of-type(2)"
      font-size: 4em

Notes

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

Common Key¶

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

Edit


ctr('.test', {
  width: 200px
  elements: {
    // merged into each element
    common: {
      font-size: 1em
    }
    first-child: {
      color: red
    }
    last-child: {
      color: blue
    }
    darkTournament: {
      option: {
        // will be key
        key: 'nth-child(2)'
      }
      color: black
    }
  }
})


.test:
  width: 200px
  elements:
    # merged into each element
    common:
      font-size: 1em
    first-child:
      color: red
    last-child:
      color: blue
    darkTournament:
      option:
        # will be key
        key: nth-child(2)
      color: black


.test {
  width: 200px;
}
.test:first-child {
  color: #f00;
  font-size: 1em;
}
.test:last-child {
  color: #00f;
  font-size: 1em;
}
.test:nth-child(2) {
  color: #000;
  font-size: 1em;
}

ctr('.test', {
  width: 200px
  elements: {
    // merged into each element
    common: {
      font-size: 1em
    }
    first-child: {
      color: red
    }
    last-child: {
      color: blue
    }
    darkTournament: {
      option: {
        // will be key
        key: 'nth-child(2)'
      }
      color: black
    }
  }
})

.test {
  width: 200px;
}
.test:first-child {
  color: #f00;
  font-size: 1em;
}
.test:last-child {
  color: #00f;
  font-size: 1em;
}
.test:nth-child(2) {
  color: #000;
  font-size: 1em;
}

.test:
  width: 200px
  elements:
    # merged into each element
    common:
      font-size: 1em
    first-child:
      color: red
    last-child:
      color: blue
    darkTournament:
      option:
        # will be key
        key: nth-child(2)
      color: black

Notes

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

Omit¶

Description: A List value for the omit option property in an Object element 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', {
  width: 200px
  elements: {
    common: {
      content: false
      position: absolute
      top: 0
    }
    before: {
      size: 100px
    }
    after: {
      option: {
        // omits top
        omit: 'top'
      }
      size: 100px
      bottom: 0
    }
  }
})


.test:
  width: 200px
  elements:
    common:
      content: false
      position: absolute
      top: 0
    before:
      size: 100px
    after:
      option:
        # omits top
        omit: top
      size: 100px
      bottom: 0


.test {
  width: 200px;
}
.test::before {
  top: 0;
  width: 100px;
  content: "";
  height: 100px;
  position: absolute;
}
.test::after {
  bottom: 0;
  width: 100px;
  content: "";
  height: 100px;
  position: absolute;
}

ctr('.test', {
  width: 200px
  elements: {
    common: {
      content: false
      position: absolute
      top: 0
    }
    before: {
      size: 100px
    }
    after: {
      option: {
        // omits top
        omit: 'top'
      }
      size: 100px
      bottom: 0
    }
  }
})

.test {
  width: 200px;
}
.test::before {
  top: 0;
  width: 100px;
  content: "";
  height: 100px;
  position: absolute;
}
.test::after {
  bottom: 0;
  width: 100px;
  content: "";
  height: 100px;
  position: absolute;
}

.test:
  width: 200px
  elements:
    common:
      content: false
      position: absolute
      top: 0
    before:
      size: 100px
    after:
      option:
        # omits top
        omit: top
      size: 100px
      bottom: 0

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 element 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', {
  width: 200px
  elements: {
    common: {
      content: false
      position: absolute
      top: 0
    }
    before: {
      size: 100px
    }
    after: {
      option: {
        // picks position + content
        pick: 'position' 'content'
      }
      size: 100px
      bottom: 0
    }
  }
})


.test:
  width: 200px
  elements:
    common:
      content: false
      position: absolute
      top: 0
    before:
      size: 100px
    after:
      option:
        # picks position + content
        pick: [position, content]
      size: 100px
      bottom: 0


.test {
  width: 200px;
}
.test::before {
  top: 0;
  width: 100px;
  content: "";
  height: 100px;
  position: absolute;
}
.test::after {
  bottom: 0;
  width: 100px;
  content: "";
  height: 100px;
  position: absolute;
}

ctr('.test', {
  width: 200px
  elements: {
    common: {
      content: false
      position: absolute
      top: 0
    }
    before: {
      size: 100px
    }
    after: {
      option: {
        // picks position + content
        pick: 'position' 'content'
      }
      size: 100px
      bottom: 0
    }
  }
})

.test {
  width: 200px;
}
.test::before {
  top: 0;
  width: 100px;
  content: "";
  height: 100px;
  position: absolute;
}
.test::after {
  bottom: 0;
  width: 100px;
  content: "";
  height: 100px;
  position: absolute;
}

.test:
  width: 200px
  elements:
    common:
      content: false
      position: absolute
      top: 0
    before:
      size: 100px
    after:
      option:
        # picks position + content
        pick: [position, content]
      size: 100px
      bottom: 0

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

Edit


ctr('.test', {
  width: 200px
  elements: {
    common: {
      option: {
        // only merges with "after"
        target: 'after'
      }
      content: false
      position: absolute
      top: 0
    }
    before: {
      size: 100px
    }
    after: {
      size: 100px
      bottom: 0
    }
  }
})


.test:
  width: 200px
  elements:
    common:
      option:
        # only merges with "after"
        target: after
      content: false
      position: absolute
      top: 0
    before:
      size: 100px
    after:
      size: 100px
      bottom: 0


.test {
  width: 200px;
}
.test::before {
  width: 100px;
  height: 100px;
}
.test::after {
  top: 0;
  bottom: 0;
  width: 100px;
  content: "";
  height: 100px;
  position: absolute;
}

ctr('.test', {
  width: 200px
  elements: {
    common: {
      option: {
        // only merges with "after"
        target: 'after'
      }
      content: false
      position: absolute
      top: 0
    }
    before: {
      size: 100px
    }
    after: {
      size: 100px
      bottom: 0
    }
  }
})

.test {
  width: 200px;
}
.test::before {
  width: 100px;
  height: 100px;
}
.test::after {
  top: 0;
  bottom: 0;
  width: 100px;
  content: "";
  height: 100px;
  position: absolute;
}

.test:
  width: 200px
  elements:
    common:
      option:
        # only merges with "after"
        target: after
      content: false
      position: absolute
      top: 0
    before:
      size: 100px
    after:
      size: 100px
      bottom: 0

Notes

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

Edit


ctr('.test', {
  width: 200px
  elements: {
    common: {
      content: false
      position: absolute
      top: 0
    }
    before: {
      size: 100px
    }
    // inherits common
    after: true
  }
})


.test:
  width: 200px
  elements:
    common:
      content: false
      position: absolute
      top: 0
    before:
      size: 100px
    # inherits common
    after: true


.test {
  width: 200px;
}
.test::before {
  top: 0;
  width: 100px;
  content: "";
  height: 100px;
  position: absolute;
}
.test::after {
  top: 0;
  content: "";
  position: absolute;
}

ctr('.test', {
  width: 200px
  elements: {
    common: {
      content: false
      position: absolute
      top: 0
    }
    before: {
      size: 100px
    }
    // inherits common
    after: true
  }
})

.test {
  width: 200px;
}
.test::before {
  top: 0;
  width: 100px;
  content: "";
  height: 100px;
  position: absolute;
}
.test::after {
  top: 0;
  content: "";
  position: absolute;
}

.test:
  width: 200px
  elements:
    common:
      content: false
      position: absolute
      top: 0
    before:
      size: 100px
    # inherits common
    after: 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