Animation¶

Description: animation can be used in an element.

ctr('.test', {
  width: 200px
  first-child: {
    height: 400px
    // animation
    animation: {
      name: 'my-cool-animation'
      timeline: {
        '50%': {
          color: red
        }
      }
    }
  }
})

.test:
  width: 200px
  first-child:
    height: 400px
    # animation
    animation:
      name: my-cool-animation
      timeline:
        50%:
          color: red

.test {
  width: 200px;
}
.test:first-child {
  height: 400px;
  animation-delay: 0s;
  animation-duration: 0.5s;
  animation-fill-mode: none;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-play-state: running;
  animation-name: my-cool-animation;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes my-cool-animation {
  50% {
    color: #f00;
  }
}

ctr('.test', {
  width: 200px
  first-child: {
    height: 400px
    // animation
    animation: {
      name: 'my-cool-animation'
      timeline: {
        '50%': {
          color: red
        }
      }
    }
  }
})

.test {
  width: 200px;
}
.test:first-child {
  height: 400px;
  animation-delay: 0s;
  animation-duration: 0.5s;
  animation-fill-mode: none;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-play-state: running;
  animation-name: my-cool-animation;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes my-cool-animation {
  50% {
    color: #f00;
  }
}

.test:
  width: 200px
  first-child:
    height: 400px
    # animation
    animation:
      name: my-cool-animation
      timeline:
        50%:
          color: red

Attribute¶

Description: attribute can be used in an element.

ctr('.test', {
  width: 200px
  first-child: {
    height: 400px
    // attribute
    attribute: {
      key: '[data-role="test"]'
      font-size: 1em
    }
  }
})

.test:
  width: 200px
  first-child:
    height: 400px
    # attribute
    attribute:
      key: '[data-role="test"]'
      font-size: 1em

.test {
  width: 200px;
}
.test:first-child {
  height: 400px;
}
.test:first-child[data-role="test"] {
  font-size: 1em;
}

ctr('.test', {
  width: 200px
  first-child: {
    height: 400px
    // attribute
    attribute: {
      key: '[data-role="test"]'
      font-size: 1em
    }
  }
})

.test {
  width: 200px;
}
.test:first-child {
  height: 400px;
}
.test:first-child[data-role="test"] {
  font-size: 1em;
}

.test:
  width: 200px
  first-child:
    height: 400px
    # attribute
    attribute:
      key: '[data-role="test"]'
      font-size: 1em

Component¶

Description: component can be used in an element.

ctr('.test', {
  width: 200px
  first-child: {
    height: 400px
    // component
    component-span: {
      font-size: 1em
    }
  }
})

.test:
  width: 200px
  first-child:
    height: 400px
    # component
    component-span:
      font-size: 1em

.test {
  width: 200px;
}
.test:first-child {
  height: 400px;
}
.test:first-child > span {
  font-size: 1em;
}

ctr('.test', {
  width: 200px
  first-child: {
    height: 400px
    // component
    component-span: {
      font-size: 1em
    }
  }
})

.test {
  width: 200px;
}
.test:first-child {
  height: 400px;
}
.test:first-child > span {
  font-size: 1em;
}

.test:
  width: 200px
  first-child:
    height: 400px
    # component
    component-span:
      font-size: 1em

Grid¶

Description: grid can be used in an element.

ctr('.test', {
  width: 200px
  first-child: {
    height: 400px
    // grid
    grid: {
      column: '1/2'
    }
  }
})

.test:
  width: 200px
  first-child:
    height: 400px
    # grid
    grid:
      column: 1/2

.test {
  width: 200px;
}
.test:first-child {
  height: 400px;
  flex: 0 0 auto;
  width: calc(99.9% * 1 / 2 - (30px - 30px * 1 / 2));
}
.test:first-child:nth-child(1n) {
  margin-right: 30px;
}
.test:first-child:last-child {
  margin-right: 0;
}
.test:first-child:nth-child(2n) {
  float: right;
  margin-right: 0;
}

ctr('.test', {
  width: 200px
  first-child: {
    height: 400px
    // grid
    grid: {
      column: '1/2'
    }
  }
})

.test {
  width: 200px;
}
.test:first-child {
  height: 400px;
  flex: 0 0 auto;
  width: calc(99.9% * 1 / 2 - (30px - 30px * 1 / 2));
}
.test:first-child:nth-child(1n) {
  margin-right: 30px;
}
.test:first-child:last-child {
  margin-right: 0;
}
.test:first-child:nth-child(2n) {
  float: right;
  margin-right: 0;
}

.test:
  width: 200px
  first-child:
    height: 400px
    # grid
    grid:
      column: 1/2

Media¶

Description: media can be used in an element.

ctr('.test', {
  width: 200px
  first-child: {
    height: 400px
    // media
    media-lg: {
      font-size: 1.5em
    }
  }
})

.test:
  width: 200px
  first-child:
    height: 400px
    # media
    media-lg:
      font-size: 1.5em

.test {
  width: 200px;
}
.test:first-child {
  height: 400px;
}
@media (min-width: 800px) and (max-width: 1050px) {
  .test:first-child {
    font-size: 1.5em;
  }
}

ctr('.test', {
  width: 200px
  first-child: {
    height: 400px
    // media
    media-lg: {
      font-size: 1.5em
    }
  }
})

.test {
  width: 200px;
}
.test:first-child {
  height: 400px;
}
@media (min-width: 800px) and (max-width: 1050px) {
  .test:first-child {
    font-size: 1.5em;
  }
}

.test:
  width: 200px
  first-child:
    height: 400px
    # media
    media-lg:
      font-size: 1.5em

Non¶

Description: non can be used in an element.

ctr('.test', {
  width: 200px
  first-child: {
    height: 400px
    // non
    non-span: {
      font-size: 1em
    }
  }
})

.test:
  width: 200px
  first-child:
    height: 400px
    # non
    non-span:
      font-size: 1em

.test {
  width: 200px;
}
.test:first-child {
  height: 400px;
}
.test:first-child:not(span) {
  font-size: 1em;
}

ctr('.test', {
  width: 200px
  first-child: {
    height: 400px
    // non
    non-span: {
      font-size: 1em
    }
  }
})

.test {
  width: 200px;
}
.test:first-child {
  height: 400px;
}
.test:first-child:not(span) {
  font-size: 1em;
}

.test:
  width: 200px
  first-child:
    height: 400px
    # non
    non-span:
      font-size: 1em

State¶

Description: state can be used in an element.

ctr('.test', {
  width: 200px
  before: {
    content: 'test'
    // state
    hover: {
      on: {
        opacity: 1
      }
      non: {
        opacity: 0.5
      }
    }
  }
})

.test:
  width: 200px
  before:
    content: test
    # state
    hover:
      on:
        opacity: 1
      non:
        opacity: 0.5

.test {
  width: 200px;
}
.test::before {
  content: "test";
}
.test:hover::before {
  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)::before {
  opacity: 0.5;
  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
  before: {
    content: 'test'
    // state
    hover: {
      on: {
        opacity: 1
      }
      non: {
        opacity: 0.5
      }
    }
  }
})

.test {
  width: 200px;
}
.test::before {
  content: "test";
}
.test:hover::before {
  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)::before {
  opacity: 0.5;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

.test:
  width: 200px
  before:
    content: test
    # state
    hover:
      on:
        opacity: 1
      non:
        opacity: 0.5

ctr('.test', {
  width: 200px
  first-child: {
    height: 400px
    // state
    hover: {
      on: {
        opacity: 1
      }
      non: {
        opacity: 0.5
      }
    }
  }
})

.test:
  width: 200px
  first-child:
    height: 400px
    # state
    hover:
      on:
        opacity: 1
      non:
        opacity: 0.5

.test {
  width: 200px;
}
.test:first-child {
  height: 400px;
}
.test:first-child: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:first-child:not(:hover) {
  opacity: 0.5;
  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
  first-child: {
    height: 400px
    // state
    hover: {
      on: {
        opacity: 1
      }
      non: {
        opacity: 0.5
      }
    }
  }
})

.test {
  width: 200px;
}
.test:first-child {
  height: 400px;
}
.test:first-child: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:first-child:not(:hover) {
  opacity: 0.5;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

.test:
  width: 200px
  first-child:
    height: 400px
    # state
    hover:
      on:
        opacity: 1
      non:
        opacity: 0.5

Notes

• after and before attach to the state while other element selectors such as first-child attach to the selector

Transition¶

Description: transition can be used in an element.

ctr('.test', {
  width: 200px
  first-child: {
    height: 400px
    // transition
    transition: {
      background: black
    }
  }
})

.test:
  width: 200px
  first-child:
    height: 400px
    # transition
    transition:
      background: black

.test {
  width: 200px;
}
.test:first-child {
  height: 400px;
  background: #000;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: background;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

ctr('.test', {
  width: 200px
  first-child: {
    height: 400px
    // transition
    transition: {
      background: black
    }
  }
})

.test {
  width: 200px;
}
.test:first-child {
  height: 400px;
  background: #000;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: background;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

.test:
  width: 200px
  first-child:
    height: 400px
    # transition
    transition:
      background: black