Basic¶

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

ctr('.test', {
  width: 200px
  states: {
    hover: {
      on: {
        opacity: 1
      }
      non: {
        opacity: 0.75
      }
    }
    active: {
      color: red
    }
    myCoolLink: {
      option: {
        // specified key
        key: 'link'
      }
      on: {
        color: green
      }
      non: {
        color: purple
      }
    }
  }
})

.test:
  width: 200px
  states:
    hover:
      on:
        opacity: 1
      non:
        opacity: 0.75
    active:
      color: red
    myCoolLink:
      option:
        # specified key
        key: link
      on:
        color: green
      non:
        color: purple

.test {
  width: 200px;
}
.test:hover {
  opacity: 1;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:hover) {
  opacity: 0.75;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:active {
  color: #f00;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: color;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:active) {
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: color;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:link {
  color: #008000;
}
.test:not(:link) {
  color: #800080;
}

ctr('.test', {
  width: 200px
  states: {
    hover: {
      on: {
        opacity: 1
      }
      non: {
        opacity: 0.75
      }
    }
    active: {
      color: red
    }
    myCoolLink: {
      option: {
        // specified key
        key: 'link'
      }
      on: {
        color: green
      }
      non: {
        color: purple
      }
    }
  }
})

.test {
  width: 200px;
}
.test:hover {
  opacity: 1;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:hover) {
  opacity: 0.75;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:active {
  color: #f00;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: color;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:active) {
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: color;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:link {
  color: #008000;
}
.test:not(:link) {
  color: #800080;
}

.test:
  width: 200px
  states:
    hover:
      on:
        opacity: 1
      non:
        opacity: 0.75
    active:
      color: red
    myCoolLink:
      option:
        # specified key
        key: link
      on:
        color: green
      non:
        color: purple

Notes

• In the states Object, you cannot use any ctr reserved keys that are not state related, such as first-child, animation, etc.

Common Key¶

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

ctr('.test', {
  width: 200px
  states: {
    hover: {
      on: {
        opacity: 1
      }
      non: {
        option: {
          duration: 0.5s
        }
        opacity: 0.75
      }
    }
    active: {
      color: red
    }
    // merged into each state
    common: {
      option: {
        duration: 1.25s
        delay: 0.25s
      }
    }
  }
})

.test:
  width: 200px
  states:
    hover:
      on:
        opacity: 1
      non:
        option:
          duration: 0.5s
        opacity: 0.75
    active:
      color: red
    # merged into each state
    common:
      option:
        duration: 1.25s
        delay: 0.25s

.test {
  width: 200px;
}
.test:hover {
  opacity: 1;
  transition-delay: 0.25s;
  transition-duration: 1.25s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:hover) {
  opacity: 0.75;
  transition-delay: 0.25s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:active {
  color: #f00;
  transition-delay: 0.25s;
  transition-property: color;
  transition-duration: 1.25s;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:active) {
  transition-delay: 0.25s;
  transition-property: color;
  transition-duration: 1.25s;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

ctr('.test', {
  width: 200px
  states: {
    hover: {
      on: {
        opacity: 1
      }
      non: {
        option: {
          duration: 0.5s
        }
        opacity: 0.75
      }
    }
    active: {
      color: red
    }
    // merged into each state
    common: {
      option: {
        duration: 1.25s
        delay: 0.25s
      }
    }
  }
})

.test {
  width: 200px;
}
.test:hover {
  opacity: 1;
  transition-delay: 0.25s;
  transition-duration: 1.25s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:hover) {
  opacity: 0.75;
  transition-delay: 0.25s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:active {
  color: #f00;
  transition-delay: 0.25s;
  transition-property: color;
  transition-duration: 1.25s;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:active) {
  transition-delay: 0.25s;
  transition-property: color;
  transition-duration: 1.25s;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

.test:
  width: 200px
  states:
    hover:
      on:
        opacity: 1
      non:
        option:
          duration: 0.5s
        opacity: 0.75
    active:
      color: red
    # merged into each state
    common:
      option:
        duration: 1.25s
        delay: 0.25s

Notes

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

Omit¶

Description: A List value for the omit option property in an Object state 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
  states: {
    common: {
      option: {
        duration: 2s
        ease: 'ease-in'
      }
      on: {
        opacity: 1
      }
    }
    hover: {
      non: {
        opacity: 0.75
      }
    }
    focus: {
      option: {
        // omits duration
        omit: 'option.duration'
      }
      on: {
        height: 400px
      }
      non: {
        opacity: 0.25
      }
    }
  }
})

.test:
  width: 200px
  states:
    common:
      option:
        duration: 2s
        ease: ease-in
      on:
        opacity: 1
    hover:
      non:
        opacity: 0.75
    focus:
      option:
        # omits duration
        omit: option.duration
      on:
        height: 400px
      non:
        opacity: 0.25

.test {
  width: 200px;
}
.test:hover {
  opacity: 1;
  transition-delay: 0s;
  transition-duration: 2s;
  transition-property: opacity;
  transition-timing-function: ease-in;
}
.test:not(:hover) {
  opacity: 0.75;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:focus {
  opacity: 1;
  height: 400px;
  transition-delay: 0s, 0s;
  transition-duration: 2s, 2s;
  transition-property: height, opacity;
  transition-timing-function: ease-in, ease-in;
}
.test:not(:focus) {
  opacity: 0.25;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

ctr('.test', {
  width: 200px
  states: {
    common: {
      option: {
        duration: 2s
        ease: 'ease-in'
      }
      on: {
        opacity: 1
      }
    }
    hover: {
      non: {
        opacity: 0.75
      }
    }
    focus: {
      option: {
        // omits duration
        omit: 'option.duration'
      }
      on: {
        height: 400px
      }
      non: {
        opacity: 0.25
      }
    }
  }
})

.test {
  width: 200px;
}
.test:hover {
  opacity: 1;
  transition-delay: 0s;
  transition-duration: 2s;
  transition-property: opacity;
  transition-timing-function: ease-in;
}
.test:not(:hover) {
  opacity: 0.75;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:focus {
  opacity: 1;
  height: 400px;
  transition-delay: 0s, 0s;
  transition-duration: 2s, 2s;
  transition-property: height, opacity;
  transition-timing-function: ease-in, ease-in;
}
.test:not(:focus) {
  opacity: 0.25;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

.test:
  width: 200px
  states:
    common:
      option:
        duration: 2s
        ease: ease-in
      on:
        opacity: 1
    hover:
      non:
        opacity: 0.75
    focus:
      option:
        # omits duration
        omit: option.duration
      on:
        height: 400px
      non:
        opacity: 0.25

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>
• You can omit from within an on, non, or common
  • Context is important, in that you can’t omit a non value from within an on Object

Pick¶

Description: A List value for the pick option property in an Object state 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
  states: {
    common: {
      option: {
        duration: 2s
        ease: 'ease-in'
      }
      on: {
        opacity: 1
      }
    }
    hover: {
      non: {
        opacity: 0.75
      }
    }
    focus: {
      option: {
        // picks on + ease
        pick: 'on' 'option.ease'
      }
      on: {
        height: 400px
      }
      non: {
        opacity: 0.25
      }
    }
  }
})

.test:
  width: 200px
  states:
    common:
      option:
        duration: 2s
        ease: ease-in
      on:
        opacity: 1
    hover:
      non:
        opacity: 0.75
    focus:
      option:
        # picks on + ease
        pick: [on, option.ease]
      on:
        height: 400px
      non:
        opacity: 0.25

.test {
  width: 200px;
}
.test:hover {
  opacity: 1;
  transition-delay: 0s;
  transition-duration: 2s;
  transition-property: opacity;
  transition-timing-function: ease-in;
}
.test:not(:hover) {
  opacity: 0.75;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:focus {
  opacity: 1;
  height: 400px;
  transition-delay: 0s, 0s;
  transition-duration: 2s, 2s;
  transition-property: height, opacity;
  transition-timing-function: ease-in, ease-in;
}
.test:not(:focus) {
  opacity: 0.25;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

ctr('.test', {
  width: 200px
  states: {
    common: {
      option: {
        duration: 2s
        ease: 'ease-in'
      }
      on: {
        opacity: 1
      }
    }
    hover: {
      non: {
        opacity: 0.75
      }
    }
    focus: {
      option: {
        // picks on + ease
        pick: 'on' 'option.ease'
      }
      on: {
        height: 400px
      }
      non: {
        opacity: 0.25
      }
    }
  }
})

.test {
  width: 200px;
}
.test:hover {
  opacity: 1;
  transition-delay: 0s;
  transition-duration: 2s;
  transition-property: opacity;
  transition-timing-function: ease-in;
}
.test:not(:hover) {
  opacity: 0.75;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:focus {
  opacity: 1;
  height: 400px;
  transition-delay: 0s, 0s;
  transition-duration: 2s, 2s;
  transition-property: height, opacity;
  transition-timing-function: ease-in, ease-in;
}
.test:not(:focus) {
  opacity: 0.25;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

.test:
  width: 200px
  states:
    common:
      option:
        duration: 2s
        ease: ease-in
      on:
        opacity: 1
    hover:
      non:
        opacity: 0.75
    focus:
      option:
        # picks on + ease
        pick: [on, option.ease]
      on:
        height: 400px
      non:
        opacity: 0.25

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>
• You can pick from within an on, non, or common
  • Context is important, in that you can’t pick a non value from within an on Object

Target¶

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

ctr('.test', {
  width: 200px
  states: {
    common: {
      option: {
        duration: 2s
        ease: 'ease-in'
        // only merges with "hover"
        target: 'hover'
      }
      on: {
        opacity: 1
      }
    }
    hover: {
      non: {
        opacity: 0.75
      }
    }
    focus: {
      on: {
        height: 400px
      }
      non: {
        opacity: 0.25
      }
    }
  }
})

.test:
  width: 200px
  states:
    common:
      option:
        duration: 2s
        ease: ease-in
        # only merges with "hover"
        target: hover
      on:
        opacity: 1
    hover:
      non:
        opacity: 0.75
    focus:
      on:
        height: 400px
      non:
        opacity: 0.25

.test {
  width: 200px;
}
.test:hover {
  opacity: 1;
  transition-delay: 0s;
  transition-duration: 2s;
  transition-property: opacity;
  transition-timing-function: ease-in;
}
.test:not(:hover) {
  opacity: 0.75;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:focus {
  height: 400px;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: height;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:focus) {
  opacity: 0.25;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

ctr('.test', {
  width: 200px
  states: {
    common: {
      option: {
        duration: 2s
        ease: 'ease-in'
        // only merges with "hover"
        target: 'hover'
      }
      on: {
        opacity: 1
      }
    }
    hover: {
      non: {
        opacity: 0.75
      }
    }
    focus: {
      on: {
        height: 400px
      }
      non: {
        opacity: 0.25
      }
    }
  }
})

.test {
  width: 200px;
}
.test:hover {
  opacity: 1;
  transition-delay: 0s;
  transition-duration: 2s;
  transition-property: opacity;
  transition-timing-function: ease-in;
}
.test:not(:hover) {
  opacity: 0.75;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:focus {
  height: 400px;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: height;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:focus) {
  opacity: 0.25;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

.test:
  width: 200px
  states:
    common:
      option:
        duration: 2s
        ease: ease-in
        # only merges with "hover"
        target: hover
      on:
        opacity: 1
    hover:
      non:
        opacity: 0.75
    focus:
      on:
        height: 400px
      non:
        opacity: 0.25

Notes

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

ctr('.test', {
  width: 200px
  states: {
    common: {
      option: {
        duration: 2s
        ease: 'ease-in'
      }
      on: {
        opacity: 1
      }
    }
    hover: {
      non: {
        opacity: 0.75
      }
    }
    // inherits common
    focus: true
  }
})

.test:
  width: 200px
  states:
    common:
      option:
        duration: 2s
        ease: ease-in
      on:
        opacity: 1
    hover:
      non:
        opacity: 0.75
    # inherits common
    focus: true

.test {
  width: 200px;
}
.test:hover {
  opacity: 1;
  transition-delay: 0s;
  transition-duration: 2s;
  transition-property: opacity;
  transition-timing-function: ease-in;
}
.test:not(:hover) {
  opacity: 0.75;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:focus {
  opacity: 1;
  transition-delay: 0s;
  transition-duration: 2s;
  transition-property: opacity;
  transition-timing-function: ease-in;
}

ctr('.test', {
  width: 200px
  states: {
    common: {
      option: {
        duration: 2s
        ease: 'ease-in'
      }
      on: {
        opacity: 1
      }
    }
    hover: {
      non: {
        opacity: 0.75
      }
    }
    // inherits common
    focus: true
  }
})

.test {
  width: 200px;
}
.test:hover {
  opacity: 1;
  transition-delay: 0s;
  transition-duration: 2s;
  transition-property: opacity;
  transition-timing-function: ease-in;
}
.test:not(:hover) {
  opacity: 0.75;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:focus {
  opacity: 1;
  transition-delay: 0s;
  transition-duration: 2s;
  transition-property: opacity;
  transition-timing-function: ease-in;
}

.test:
  width: 200px
  states:
    common:
      option:
        duration: 2s
        ease: ease-in
      on:
        opacity: 1
    hover:
      non:
        opacity: 0.75
    # inherits common
    focus: true