Text & Font

Overview

Example incoming …

Files

https://github.com/davidbrooksio/cwf-lite/blob/master/style/utilities/typography.css

• Directorystyle

  • Directoryutilities

    • typography.css

Stylesheet

@layer cwf-utilities {
  @each $value in serif, sans-serif, monospace, cursive, emoji {
    .font-family--$(value) {
      font-family: var(--font-family-$(value), $(value)) !important;
    }
  }

  @each $value in left, right, center, justify {
    .text-align--$(value) {
      text-align: $(value) !important;
    }

    @media (min-width: 320px) {
      .text-align--xs-$(value) {
        text-align: $(value) !important;
      }
    }

    @media (min-width: 576px) {
      .text-align--sm-$(value) {
        text-align: $(value) !important;
      }
    }

    @media (min-width: 768px) {
      .text-align--md-$(value) {
        text-align: $(value) !important;
      }
    }

    @media (min-width: 1024px) {
      .text-align--rg-$(value) {
        text-align: $(value) !important;
      }
    }

    @media (min-width: 1216px) {
      .text-align--lg-$(value) {
        text-align: $(value) !important;
      }
    }

    @media (min-width: 1408px) {
      .text-align--xl-$(value) {
        text-align: $(value) !important;
      }
    }
  }

  @each $value in uppercase, lowercase, capitalize, none {
    .text-transform--$(value) {
      text-transform: $(value) !important;
    }

    @media (min-width: 320px) {
      .text-transform--xs-$(value) {
        text-transform: $(value) !important;
      }
    }

    @media (min-width: 576px) {
      .text-transform--sm-$(value) {
        text-transform: $(value) !important;
      }
    }

    @media (min-width: 768px) {
      .text-transform--md-$(value) {
        text-transform: $(value) !important;
      }
    }

    @media (min-width: 1024px) {
      .text-transform--rg-$(value) {
        text-transform: $(value) !important;
      }
    }

    @media (min-width: 1216px) {
      .text-transform--lg-$(value) {
        text-transform: $(value) !important;
      }
    }

    @media (min-width: 1408px) {
      .text-transform--xl-$(value) {
        text-transform: $(value) !important;
      }
    }
  }

  @each $value in normal, nowrap {
    .white-space--$(value) {
      white-space: $(value) !important;
    }

    @media (min-width: 320px) {
      .white-space--xs-$(value) {
        white-space: $(value) !important;
      }
    }

    @media (min-width: 576px) {
      .white-space--sm-$(value) {
        white-space: $(value) !important;
      }
    }

    @media (min-width: 768px) {
      .white-space--md-$(value) {
        white-space: $(value) !important;
      }
    }

    @media (min-width: 1024px) {
      .white-space--rg-$(value) {
        white-space: $(value) !important;
      }
    }

    @media (min-width: 1216px) {
      .white-space--lg-$(value) {
        white-space: $(value) !important;
      }
    }

    @media (min-width: 1408px) {
      .white-space--xl-$(value) {
        white-space: $(value) !important;
      }
    }
  }

  @each $value in 100, 300, 400, 500, 600, 700, 800, 900 {
    .font-weight--$(value) {
      font-weight: $(value) !important;
    }

    @media (min-width: 320px) {
      .font-weight--xs-$(value) {
        font-weight: $(value) !important;
      }
    }

    @media (min-width: 576px) {
      .font-weight--sm-$(value) {
        font-weight: $(value) !important;
      }
    }

    @media (min-width: 768px) {
      .font-weight--md-$(value) {
        font-weight: $(value) !important;
      }
    }

    @media (min-width: 1024px) {
      .font-weight--rg-$(value) {
        font-weight: $(value) !important;
      }
    }

    @media (min-width: 1216px) {
      .font-weight--lg-$(value) {
        font-weight: $(value) !important;
      }
    }

    @media (min-width: 1408px) {
      .font-weight--xl-$(value) {
        font-weight: $(value) !important;
      }
    }
  }

  @each $value in italic, oblique, normal {
    .font-style--$(value) {
      font-style: $(value) !important;
    }

    @media (min-width: 320px) {
      .font-style--xs-$(value) {
        font-style: $(value) !important;
      }
    }

    @media (min-width: 576px) {
      .font-style--sm-$(value) {
        font-style: $(value) !important;
      }
    }

    @media (min-width: 768px) {
      .font-style--md-$(value) {
        font-style: $(value) !important;
      }
    }

    @media (min-width: 1024px) {
      .font-style--rg-$(value) {
        font-style: $(value) !important;
      }
    }

    @media (min-width: 1216px) {
      .font-style--lg-$(value) {
        font-style: $(value) !important;
      }
    }

    @media (min-width: 1408px) {
      .font-style--xl-$(value) {
        font-style: $(value) !important;
      }
    }
  }
}