Teutonic CSS

Text size containers

←

Add a resize-all-text-class on a parent conainer element to scale all text within there. So all differently sized text within there get’s bigger or smaller, from your headlines, to individual text-size-classes.

Size needs to be given and can be: s, l or xl.

Syntax: .text-all_{size}

SCSS: _text-size-all.scss

.text-all_s

text_xxxl

text_xxl

text_xl

text_l

text_m

text_s

text_xs

Default

text_xxxl

text_xxl

text_xl

text_l

text_m

text_s

text_xs

.text-all_l

text_xxxl

text_xxl

text_xl

text_l

text_m

text_s

text_xs

.text-all_xl

text_xxxl

text_xxl

text_xl

text_l

text_m

text_s

text_xs

<div class="grid gap_s collapse-p">
  <div class="text-clip span-3 span-6-t">
    <h4 class="bo-b_xs pa_s inverted text-mono">.text-all_s</h4>
    <div class="text-all_s pa_s bg-0">
      <div class="text_xxxl">text_xxxl</div>
      <div class="text_xxl">text_xxl</div>
      <div class="text_xl">text_xl</div>
      <div class="text_l">text_l</div>
      <div class="text_m">text_m</div>
      <div class="text_s">text_s</div>
      <div class="text_xs">text_xs</div>
    </div>
  </div>
  <div class="text-clip span-3 span-6-t">
    <h4 class="bo-b_xs pa_s inverted text-mono text-thin ma-no">Default</h4>
    <div class="text-all_default pa_s bg-3">
      <div class="text_xxxl">text_xxxl</div>
      <div class="text_xxl">text_xxl</div>
      <div class="text_xl">text_xl</div>
      <div class="text_l">text_l</div>
      <div class="text_m">text_m</div>
      <div class="text_s">text_s</div>
      <div class="text_xs">text_xs</div>
    </div>
  </div>
  <div class="text-clip span-3 span-6-t">
    <h4 class="bo-b_xs pa_s inverted text-mono">.text-all_l</h4>
    <div class="text-all_l pa_s bg-0">
      <div class="text_xxxl">text_xxxl</div>
      <div class="text_xxl">text_xxl</div>
      <div class="text_xl">text_xl</div>
      <div class="text_l">text_l</div>
      <div class="text_m">text_m</div>
      <div class="text_s">text_s</div>
      <div class="text_xs">text_xs</div>
    </div>
  </div>
  <div class="text-clip span-3 span-6-t">
    <h4 class="bo-b_xs pa_s inverted text-mono">.text-all_xl</h4>
    <div class="text-all_xl pa_s bg-0">
      <div class="text_xxxl">text_xxxl</div>
      <div class="text_xxl">text_xxl</div>
      <div class="text_xl">text_xl</div>
      <div class="text_l">text_l</div>
      <div class="text_m">text_m</div>
      <div class="text_s">text_s</div>
      <div class="text_xs">text_xs</div>
    </div>
  </div>
</div>