Syntax

Description: Responsive text is defined as a set of helper utilities that generate responsive property styles for font-size, line-height, and letter-spacing.

ctr('<#selector>', {
<responsive:property>: responsive
})
<#selector>:
<responsive:property>: responsive
<#selector> {
<responsive:property>: <responsive:value>;
}
@media only screen and (max-width: <default min-width>) {
<#selector> {
<responsive:property>: <responsive:value>;
}
}
@media only screen and (min-width: <default max-width>) {
<#selector> {
<responsive:property>: <responsive:value>;
}
}

Notes

Default

Description: The value of 'responsive' creates responsive style values for the property it is defined for.

Edit
ctr('.test', {
width: 200px
font-size: 'responsive'
})
.test:
width: 200px
font-size: responsive
.test {
width: 200px;
font-size: calc(12px + 9 * ((100vw - 400px) / 1400));
}
@media only screen and (max-width: 400px) {
.test {
font-size: 12px;
}
}
@media only screen and (min-width: 1800px) {
.test {
font-size: 21px;
}
}
ctr('.test', {
  width: 200px
  font-size: 'responsive'
})
.test {
  width: 200px;
  font-size: calc(12px + 9 * ((100vw - 400px) / 1400));
}
@media only screen and (max-width: 400px) {
  .test {
    font-size: 12px;
  }
}
@media only screen and (min-width: 1800px) {
  .test {
    font-size: 21px;
  }
}
.test:
  width: 200px
  font-size: responsive
Edit
ctr('.test', {
width: 200px
line-height: 'responsive'
})
.test:
width: 200px
line-height: responsive
.test {
width: 200px;
line-height: calc(1rem + 1 * ((100vw - 25rem) / 87.5));
}
@media only screen and (max-width: 400px) {
.test {
line-height: 1rem;
}
}
@media only screen and (min-width: 1800px) {
.test {
line-height: 2rem;
}
}
ctr('.test', {
  width: 200px
  line-height: 'responsive'
})
.test {
  width: 200px;
  line-height: calc(1rem + 1 * ((100vw - 25rem) / 87.5));
}
@media only screen and (max-width: 400px) {
  .test {
    line-height: 1rem;
  }
}
@media only screen and (min-width: 1800px) {
  .test {
    line-height: 2rem;
  }
}
.test:
  width: 200px
  line-height: responsive
Edit
ctr('.test', {
width: 200px
letter-spacing: 'responsive'
})
.test:
width: 200px
letter-spacing: responsive
.test {
width: 200px;
letter-spacing: calc(3px + 7 * ((100vw - 400px) / 1400));
}
@media only screen and (max-width: 400px) {
.test {
letter-spacing: 3px;
}
}
@media only screen and (min-width: 1800px) {
.test {
letter-spacing: 10px;
}
}
ctr('.test', {
  width: 200px
  letter-spacing: 'responsive'
})
.test {
  width: 200px;
  letter-spacing: calc(3px + 7 * ((100vw - 400px) / 1400));
}
@media only screen and (max-width: 400px) {
  .test {
    letter-spacing: 3px;
  }
}
@media only screen and (min-width: 1800px) {
  .test {
    letter-spacing: 10px;
  }
}
.test:
  width: 200px
  letter-spacing: responsive

Custom Size

Description: The minimum and maximum unit size value for responsive properties can be changed through the min-<property> and max-<property> properties.

Edit
ctr('.test', {
min-font-size: 10px
max-font-size: 30px
font-size: 'responsive'
})
.test:
min-font-size: 10px
max-font-size: 30px
font-size: responsive
.test {
font-size: calc(10px + 20 * ((100vw - 400px) / 1400));
}
@media only screen and (max-width: 400px) {
.test {
font-size: 10px;
}
}
@media only screen and (min-width: 1800px) {
.test {
font-size: 30px;
}
}
ctr('.test', {
  min-font-size: 10px
  max-font-size: 30px
  font-size: 'responsive'
})
.test {
  font-size: calc(10px + 20 * ((100vw - 400px) / 1400));
}
@media only screen and (max-width: 400px) {
  .test {
    font-size: 10px;
  }
}
@media only screen and (min-width: 1800px) {
  .test {
    font-size: 30px;
  }
}
.test:
  min-font-size: 10px
  max-font-size: 30px
  font-size: responsive
Edit
ctr('.test', {
min-line-height: 10px
max-line-height: 30px
line-height: 'responsive'
})
.test:
min-line-height: 10px
max-line-height: 30px
line-height: responsive
.test {
line-height: calc(10px + 20 * ((100vw - 400px) / 1400));
}
@media only screen and (max-width: 400px) {
.test {
line-height: 10px;
}
}
@media only screen and (min-width: 1800px) {
.test {
line-height: 30px;
}
}
ctr('.test', {
  min-line-height: 10px
  max-line-height: 30px
  line-height: 'responsive'
})
.test {
  line-height: calc(10px + 20 * ((100vw - 400px) / 1400));
}
@media only screen and (max-width: 400px) {
  .test {
    line-height: 10px;
  }
}
@media only screen and (min-width: 1800px) {
  .test {
    line-height: 30px;
  }
}
.test:
  min-line-height: 10px
  max-line-height: 30px
  line-height: responsive
Edit
ctr('.test', {
min-letter-spacing: 10px
max-letter-spacing: 30px
letter-spacing: 'responsive'
})
.test:
min-letter-spacing: 10px
max-letter-spacing: 30px
letter-spacing: responsive
.test {
letter-spacing: calc(10px + 20 * ((100vw - 400px) / 1400));
}
@media only screen and (max-width: 400px) {
.test {
letter-spacing: 10px;
}
}
@media only screen and (min-width: 1800px) {
.test {
letter-spacing: 30px;
}
}
ctr('.test', {
  min-letter-spacing: 10px
  max-letter-spacing: 30px
  letter-spacing: 'responsive'
})
.test {
  letter-spacing: calc(10px + 20 * ((100vw - 400px) / 1400));
}
@media only screen and (max-width: 400px) {
  .test {
    letter-spacing: 10px;
  }
}
@media only screen and (min-width: 1800px) {
  .test {
    letter-spacing: 30px;
  }
}
.test:
  min-letter-spacing: 10px
  max-letter-spacing: 30px
  letter-spacing: responsive

Notes

Custom Range

Description: The minimum and maximum media query range for responsive properties can be changed through the min-<property>-range and max-<property>-range properties.

Edit
ctr('.test', {
min-font-size-range: 300px
max-font-size-range: 900px
font-size: 'responsive'
})
.test:
min-font-size-range: 300px
max-font-size-range: 900px
font-size: responsive
.test {
font-size: calc(12px + 9 * ((100vw - 300px) / 600));
}
@media only screen and (max-width: 300px) {
.test {
font-size: 12px;
}
}
@media only screen and (min-width: 900px) {
.test {
font-size: 21px;
}
}
ctr('.test', {
  min-font-size-range: 300px
  max-font-size-range: 900px
  font-size: 'responsive'
})
.test {
  font-size: calc(12px + 9 * ((100vw - 300px) / 600));
}
@media only screen and (max-width: 300px) {
  .test {
    font-size: 12px;
  }
}
@media only screen and (min-width: 900px) {
  .test {
    font-size: 21px;
  }
}
.test:
  min-font-size-range: 300px
  max-font-size-range: 900px
  font-size: responsive
Edit
ctr('.test', {
min-line-height-range: 300px
max-line-height-range: 900px
line-height: 'responsive'
})
.test:
min-line-height-range: 300px
max-line-height-range: 900px
line-height: responsive
.test {
line-height: calc(1rem + 1 * ((100vw - 18.75rem) / 37.5));
}
@media only screen and (max-width: 300px) {
.test {
line-height: 1rem;
}
}
@media only screen and (min-width: 900px) {
.test {
line-height: 2rem;
}
}
ctr('.test', {
  min-line-height-range: 300px
  max-line-height-range: 900px
  line-height: 'responsive'
})
.test {
  line-height: calc(1rem + 1 * ((100vw - 18.75rem) / 37.5));
}
@media only screen and (max-width: 300px) {
  .test {
    line-height: 1rem;
  }
}
@media only screen and (min-width: 900px) {
  .test {
    line-height: 2rem;
  }
}
.test:
  min-line-height-range: 300px
  max-line-height-range: 900px
  line-height: responsive
Edit
ctr('.test', {
min-letter-spacing-range: 300px
max-letter-spacing-range: 900px
letter-spacing: 'responsive'
})
.test:
min-letter-spacing-range: 300px
max-letter-spacing-range: 900px
letter-spacing: responsive
.test {
letter-spacing: calc(3px + 7 * ((100vw - 300px) / 600));
}
@media only screen and (max-width: 300px) {
.test {
letter-spacing: 3px;
}
}
@media only screen and (min-width: 900px) {
.test {
letter-spacing: 10px;
}
}
ctr('.test', {
  min-letter-spacing-range: 300px
  max-letter-spacing-range: 900px
  letter-spacing: 'responsive'
})
.test {
  letter-spacing: calc(3px + 7 * ((100vw - 300px) / 600));
}
@media only screen and (max-width: 300px) {
  .test {
    letter-spacing: 3px;
  }
}
@media only screen and (min-width: 900px) {
  .test {
    letter-spacing: 10px;
  }
}
.test:
  min-letter-spacing-range: 300px
  max-letter-spacing-range: 900px
  letter-spacing: responsive

Notes

Shorthand

Description: Custom responsive size and range values have List shorthand notation.

ctr('<#selector>', {
<property>: 'responsive' <min> <max>
<property>-range: <min> <max>
})
<#selector>:
<property>: [responsive, <min>, <max>]
<property>-range: [<min>, <max>]
Edit
ctr('.test', {
font-size: 'responsive' 10px 30px
font-size-range: 300px 900px
})
.test:
font-size: [responsive, 10px, 30px]
font-size-range: [300px, 900px]
.test {
font-size: calc(10px + 20 * ((100vw - 300px) / 600));
}
@media only screen and (max-width: 300px) {
.test {
font-size: 10px;
}
}
@media only screen and (min-width: 900px) {
.test {
font-size: 30px;
}
}
ctr('.test', {
  font-size: 'responsive' 10px 30px
  font-size-range: 300px 900px
})
.test {
  font-size: calc(10px + 20 * ((100vw - 300px) / 600));
}
@media only screen and (max-width: 300px) {
  .test {
    font-size: 10px;
  }
}
@media only screen and (min-width: 900px) {
  .test {
    font-size: 30px;
  }
}
.test:
  font-size: [responsive, 10px, 30px]
  font-size-range: [300px, 900px]
Edit
ctr('.test', {
line-height: 'responsive' 10px 30px
line-height-range: 300px 900px
})
.test:
line-height: [responsive, 10px, 30px]
line-height-range: [300px, 900px]
.test {
line-height: calc(10px + 20 * ((100vw - 300px) / 600));
}
@media only screen and (max-width: 300px) {
.test {
line-height: 10px;
}
}
@media only screen and (min-width: 900px) {
.test {
line-height: 30px;
}
}
ctr('.test', {
  line-height: 'responsive' 10px 30px
  line-height-range: 300px 900px
})
.test {
  line-height: calc(10px + 20 * ((100vw - 300px) / 600));
}
@media only screen and (max-width: 300px) {
  .test {
    line-height: 10px;
  }
}
@media only screen and (min-width: 900px) {
  .test {
    line-height: 30px;
  }
}
.test:
  line-height: [responsive, 10px, 30px]
  line-height-range: [300px, 900px]
Edit
ctr('.test', {
letter-spacing: 'responsive' 10px 30px
letter-spacing-range: 300px 900px
})
.test:
letter-spacing: [responsive, 10px, 30px]
letter-spacing-range: [300px, 900px]
.test {
letter-spacing: calc(10px + 20 * ((100vw - 300px) / 600));
}
@media only screen and (max-width: 300px) {
.test {
letter-spacing: 10px;
}
}
@media only screen and (min-width: 900px) {
.test {
letter-spacing: 30px;
}
}
ctr('.test', {
  letter-spacing: 'responsive' 10px 30px
  letter-spacing-range: 300px 900px
})
.test {
  letter-spacing: calc(10px + 20 * ((100vw - 300px) / 600));
}
@media only screen and (max-width: 300px) {
  .test {
    letter-spacing: 10px;
  }
}
@media only screen and (min-width: 900px) {
  .test {
    letter-spacing: 30px;
  }
}
.test:
  letter-spacing: [responsive, 10px, 30px]
  letter-spacing-range: [300px, 900px]

Notes

Em and Rem

Description: The value for responsive size units em and rem are calculated from a base root-size.

Edit
ctr('.test', {
width: 200px
font-size: 'responsive' 1em 3em
line-height: 'responsive' 1.5rem 4rem
})
.test:
width: 200px
font-size: [responsive, 1em, 3em]
line-height: [responsive, 1.5rem, 4rem]
.test {
width: 200px;
font-size: calc(1em + 2 * ((100vw - 25em) / 87.5));
line-height: calc(1.5rem + 2.5 * ((100vw - 25rem) / 87.5));
}
@media only screen and (max-width: 400px) {
.test {
font-size: 1em;
line-height: 1.5rem;
}
}
@media only screen and (min-width: 1800px) {
.test {
font-size: 3em;
line-height: 4rem;
}
}
ctr('.test', {
  width: 200px
  font-size: 'responsive' 1em 3em
  line-height: 'responsive' 1.5rem 4rem
})
.test {
  width: 200px;
  font-size: calc(1em + 2 * ((100vw - 25em) / 87.5));
  line-height: calc(1.5rem + 2.5 * ((100vw - 25rem) / 87.5));
}
@media only screen and (max-width: 400px) {
  .test {
    font-size: 1em;
    line-height: 1.5rem;
  }
}
@media only screen and (min-width: 1800px) {
  .test {
    font-size: 3em;
    line-height: 4rem;
  }
}
.test:
  width: 200px
  font-size: [responsive, 1em, 3em]
  line-height: [responsive, 1.5rem, 4rem]
Edit
// individualy set
ctr('.test', {
width: 200px
font-size: 'responsive' 1em 3em
font-size-root: 10px
line-height: 'responsive' 1.5rem 4rem
line-height-root: 20px
})
# individualy set
.test:
width: 200px
font-size: [responsive, 1em, 3em]
font-size-root: 10px
line-height: [responsive, 1.5rem, 4rem]
line-height-root: 20px
.test {
width: 200px;
font-size: calc(1em + 2 * ((100vw - 40em) / 140));
line-height: calc(1.5rem + 2.5 * ((100vw - 20rem) / 70));
}
@media only screen and (max-width: 400px) {
.test {
font-size: 1em;
line-height: 1.5rem;
}
}
@media only screen and (min-width: 1800px) {
.test {
font-size: 3em;
line-height: 4rem;
}
}
// individualy set
ctr('.test', {
  width: 200px
  font-size: 'responsive' 1em 3em
  font-size-root: 10px
  line-height: 'responsive' 1.5rem 4rem
  line-height-root: 20px
})
.test {
  width: 200px;
  font-size: calc(1em + 2 * ((100vw - 40em) / 140));
  line-height: calc(1.5rem + 2.5 * ((100vw - 20rem) / 70));
}
@media only screen and (max-width: 400px) {
  .test {
    font-size: 1em;
    line-height: 1.5rem;
  }
}
@media only screen and (min-width: 1800px) {
  .test {
    font-size: 3em;
    line-height: 4rem;
  }
}
# individualy set
.test:
  width: 200px
  font-size: [responsive, 1em, 3em]
  font-size-root: 10px
  line-height: [responsive, 1.5rem, 4rem]
  line-height-root: 20px

Notes

Option

Description: Default values can be changed globally and in individual ctr instances.

Edit
// global option
ctrSetOption({
type: {
rootSize: 18px
fontSize: {
minSize: 1em
maxSize: 3em
minWidth: 300px
maxWidth: 900px
}
}
})
ctr('.test', {
width: 200px
font-size: 'responsive'
})
# global option
ctr:::setOption:
type:
rootSize: 18px
fontSize:
minSize: 1em
maxSize: 3em
minWidth: 300px
maxWidth: 900px
.test:
width: 200px
font-size: responsive
.test {
width: 200px;
font-size: calc(1em + 2 * ((100vw - 16.667em) / 33.333));
}
@media only screen and (max-width: 300px) {
.test {
font-size: 1em;
}
}
@media only screen and (min-width: 900px) {
.test {
font-size: 3em;
}
}
// global option
ctrSetOption({
  type: {
    rootSize: 18px
    fontSize: {
      minSize: 1em
      maxSize: 3em
      minWidth: 300px
      maxWidth: 900px
    }
  }
})

ctr('.test', {
  width: 200px
  font-size: 'responsive'
})
.test {
  width: 200px;
  font-size: calc(1em + 2 * ((100vw - 16.667em) / 33.333));
}
@media only screen and (max-width: 300px) {
  .test {
    font-size: 1em;
  }
}
@media only screen and (min-width: 900px) {
  .test {
    font-size: 3em;
  }
}
# global option
ctr:::setOption:
  type:
    rootSize: 18px
    fontSize:
      minSize: 1em
      maxSize: 3em
      minWidth: 300px
      maxWidth: 900px

.test:
  width: 200px
  font-size: responsive
Edit
// instance based
ctr('.test', {
option: {
type: {
rootSize: 18px
fontSize: {
minSize: 1em
maxSize: 3em
minWidth: 300px
maxWidth: 900px
}
}
}
width: 200px
font-size: 'responsive'
})
# instance based
.test:
option:
type:
rootSize: 18px
fontSize:
minSize: 1em
maxSize: 3em
minWidth: 300px
maxWidth: 900px
width: 200px
font-size: responsive
.test {
width: 200px;
font-size: calc(1em + 2 * ((100vw - 16.667em) / 33.333));
}
@media only screen and (max-width: 300px) {
.test {
font-size: 1em;
}
}
@media only screen and (min-width: 900px) {
.test {
font-size: 3em;
}
}
// instance based
ctr('.test', {
  option: {
    type: {
      rootSize: 18px
      fontSize: {
        minSize: 1em
        maxSize: 3em
        minWidth: 300px
        maxWidth: 900px
      }
    }
  }
  width: 200px
  font-size: 'responsive'
})
.test {
  width: 200px;
  font-size: calc(1em + 2 * ((100vw - 16.667em) / 33.333));
}
@media only screen and (max-width: 300px) {
  .test {
    font-size: 1em;
  }
}
@media only screen and (min-width: 900px) {
  .test {
    font-size: 3em;
  }
}
# instance based
.test:
  option:
    type:
      rootSize: 18px
      fontSize:
        minSize: 1em
        maxSize: 3em
        minWidth: 300px
        maxWidth: 900px
  width: 200px
  font-size: responsive

Notes