Animation

Description: animation can be used in a component.

Edit
ctr('.test', {
width: 200px
component: {
key: 'section'
font-size: 1em
// animation
animation: {
name: 'stellar-moves'
timeline: {
'50%': {
color: red
}
}
}
}
})
.test:
width: 200px
component:
key: section
font-size: 1em
# animation
animation:
name: stellar-moves
timeline:
50%:
color: red
.test {
width: 200px;
}
.test > section {
font-size: 1em;
animation-delay: 0s;
animation-duration: 0.5s;
animation-fill-mode: none;
animation-direction: normal;
animation-iteration-count: 1;
animation-play-state: running;
animation-name: stellar-moves;
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes stellar-moves {
50% {
color: #f00;
}
}
ctr('.test', {
  width: 200px
  component: {
    key: 'section'
    font-size: 1em
    // animation
    animation: {
      name: 'stellar-moves'
      timeline: {
        '50%': {
          color: red
        }
      }
    }
  }
})
.test {
  width: 200px;
}
.test > section {
  font-size: 1em;
  animation-delay: 0s;
  animation-duration: 0.5s;
  animation-fill-mode: none;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-play-state: running;
  animation-name: stellar-moves;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes stellar-moves {
  50% {
    color: #f00;
  }
}
.test:
  width: 200px
  component:
    key: section
    font-size: 1em
    # animation
    animation:
      name: stellar-moves
      timeline:
        50%:
          color: red

Attribute

Description: attribute can be used in a component.

Edit
ctr('.test', {
width: 200px
component: {
key: 'section'
font-size: 1em
// attribute
attribute: {
key: '[data-role="test"]'
color: blue
}
}
})
.test:
width: 200px
component:
key: section
font-size: 1em
# attribute
attribute:
key: '[data-role="test"]'
color: blue
.test {
width: 200px;
}
.test > section {
font-size: 1em;
}
.test > section[data-role="test"] {
color: #00f;
}
ctr('.test', {
  width: 200px
  component: {
    key: 'section'
    font-size: 1em
    // attribute
    attribute: {
      key: '[data-role="test"]'
      color: blue
    }
  }
})
.test {
  width: 200px;
}
.test > section {
  font-size: 1em;
}
.test > section[data-role="test"] {
  color: #00f;
}
.test:
  width: 200px
  component:
    key: section
    font-size: 1em
    # attribute
    attribute:
      key: '[data-role="test"]'
      color: blue

Element

Description: element can be used in a component.

Edit
ctr('.test', {
width: 200px
component: {
key: 'section'
font-size: 1em
// element
before: {
content: 'test'
}
}
})
.test:
width: 200px
component:
key: section
font-size: 1em
# element
before:
content: test
.test {
width: 200px;
}
.test > section {
font-size: 1em;
}
.test > section::before {
content: "test";
}
ctr('.test', {
  width: 200px
  component: {
    key: 'section'
    font-size: 1em
    // element
    before: {
      content: 'test'
    }
  }
})
.test {
  width: 200px;
}
.test > section {
  font-size: 1em;
}
.test > section::before {
  content: "test";
}
.test:
  width: 200px
  component:
    key: section
    font-size: 1em
    # element
    before:
      content: test

Grid

Description: element can be used in a component.

Edit
ctr('.test', {
width: 200px
component: {
key: 'section'
font-size: 1em
// grid
grid: {
column: '1/2'
}
}
})
.test:
width: 200px
component:
key: section
font-size: 1em
# grid
grid:
column: 1/2
.test {
width: 200px;
}
.test > section {
font-size: 1em;
flex: 0 0 auto;
width: calc(99.9% * 1 / 2 - (30px - 30px * 1 / 2));
}
.test > section:nth-child(1n) {
margin-right: 30px;
}
.test > section:last-child {
margin-right: 0;
}
.test > section:nth-child(2n) {
float: right;
margin-right: 0;
}
ctr('.test', {
  width: 200px
  component: {
    key: 'section'
    font-size: 1em
    // grid
    grid: {
      column: '1/2'
    }
  }
})
.test {
  width: 200px;
}
.test > section {
  font-size: 1em;
  flex: 0 0 auto;
  width: calc(99.9% * 1 / 2 - (30px - 30px * 1 / 2));
}
.test > section:nth-child(1n) {
  margin-right: 30px;
}
.test > section:last-child {
  margin-right: 0;
}
.test > section:nth-child(2n) {
  float: right;
  margin-right: 0;
}
.test:
  width: 200px
  component:
    key: section
    font-size: 1em
    # grid
    grid:
      column: 1/2

Media

Description: media can be used in a component.

Edit
ctr('.test', {
width: 200px
component: {
key: 'section'
font-size: 1em
// media
media-lg: {
font-size: 1.5em
}
}
})
.test:
width: 200px
component:
key: section
font-size: 1em
# media
media-lg:
font-size: 1.5em
.test {
width: 200px;
}
.test > section {
font-size: 1em;
}
@media (min-width: 800px) and (max-width: 1050px) {
.test > section {
font-size: 1.5em;
}
}
ctr('.test', {
  width: 200px
  component: {
    key: 'section'
    font-size: 1em
    // media
    media-lg: {
      font-size: 1.5em
    }
  }
})
.test {
  width: 200px;
}
.test > section {
  font-size: 1em;
}
@media (min-width: 800px) and (max-width: 1050px) {
  .test > section {
    font-size: 1.5em;
  }
}
.test:
  width: 200px
  component:
    key: section
    font-size: 1em
    # media
    media-lg:
      font-size: 1.5em

Non

Description: non can be used in a component.

Edit
ctr('.test', {
width: 200px
component: {
key: 'section'
font-size: 1em
// non
non-span: {
height: 400px
}
}
})
.test:
width: 200px
component:
key: section
font-size: 1em
# non
non-span:
height: 400px
.test {
width: 200px;
}
.test > section {
font-size: 1em;
}
.test > section:not(span) {
height: 400px;
}
ctr('.test', {
  width: 200px
  component: {
    key: 'section'
    font-size: 1em
    // non
    non-span: {
      height: 400px
    }
  }
})
.test {
  width: 200px;
}
.test > section {
  font-size: 1em;
}
.test > section:not(span) {
  height: 400px;
}
.test:
  width: 200px
  component:
    key: section
    font-size: 1em
    # non
    non-span:
      height: 400px

State

Description: state can be used in a component.

Edit
ctr('.test', {
width: 200px
component: {
key: 'section'
font-size: 1em
// state
hover-on: {
font-size: 2em
}
}
})
.test:
width: 200px
component:
key: section
font-size: 1em
# state
hover-on:
font-size: 2em
.test {
width: 200px;
}
.test > section {
font-size: 1em;
}
.test > section:hover {
font-size: 2em;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: font-size;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
ctr('.test', {
  width: 200px
  component: {
    key: 'section'
    font-size: 1em
    // state
    hover-on: {
      font-size: 2em
    }
  }
})
.test {
  width: 200px;
}
.test > section {
  font-size: 1em;
}
.test > section:hover {
  font-size: 2em;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: font-size;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:
  width: 200px
  component:
    key: section
    font-size: 1em
    # state
    hover-on:
      font-size: 2em

Transition

Description: transition can be used in a component.

Edit
ctr('.test', {
width: 200px
component: {
key: 'section'
font-size: 1em
// transition
transition: {
background: black
}
}
})
.test:
width: 200px
component:
key: section
font-size: 1em
# transition
transition:
background: black
.test {
width: 200px;
}
.test > section {
font-size: 1em;
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
  component: {
    key: 'section'
    font-size: 1em
    // transition
    transition: {
      background: black
    }
  }
})
.test {
  width: 200px;
}
.test > section {
  font-size: 1em;
  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
  component:
    key: section
    font-size: 1em
    # transition
    transition:
      background: black