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

• Attribution: PostCSS Responsive Type
  • The creator, Sean King, is someone you should be following, he’s also the creator of rucksack

Default¶

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

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

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

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.

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

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

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

• Can be used in conjunction with custom ranges

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.

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

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

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

• Can be used in conjunction with custom sizes

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>]

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]

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]

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

• You can use the default keyword to use the default value

Em and Rem¶

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

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]

// 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

• The default root-size is 16px but you can alter this value globally, locally, or on an individual scope level as demonstrated in the examples
  • font-size === font-size-root
  • line-height === line-height-root
  • letter-spacing === letter-spacing-root
  • root-size === all of the above
• em and rem can also be used with letter-spacing; I just omitted it for brevity

Option¶

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

// 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

// 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

• Set defaults can be changed locally or globally and camelCase is a must
  • rootSize: 16px
  • fontSize
    • minSize: 12px
    • maxSize: 21px
    • minWidth: media[xs] === 400px
    • maxWidth: media[hd] === 1800px
  • lineHeight
    • minSize: 1rem
    • maxSize: 2rem
    • minWidth: media[xs] === 400px
    • maxWidth: media[hd] === 1800px
  • letterSpacing
    • minSize: 3px
    • maxSize: 10px
    • minWidth: media[xs] === 400px
    • maxWidth: media[hd] === 1800px
• Options can also be changed for both line-height and letter-spacing; I just omitted them for brevity