OOOOPS. Your browser seems to be too old for this. Please update your browser.
Teutonic CSS
Use it

Breakpoints

←

The responsive helper classes for childs: .span-half-t, .span-half-p, collapse-t and collapse-p. -t is for tablet and -p for phone screen resolutions.

Syntax: .span-third.span-half-t
SCSS: _flex-breakpoints.scss
span-third span-half-t
span-third span-half-t
span-third span-half-t
span-third span-half-t
span-third span-half-t
span-third span-half-t
span-quarter span-half-t collapse-p
span-quarter span-half-t collapse-p
span-quarter span-half-t collapse-p
span-quarter span-half-t collapse-p
span-third collapse-p
span-third collapse-p
span-third collapse-p
<div class="flex gap_s">
  <div class="span-third span-half-t text-clip">
    <div class="box text-clip text-mono bg-b">span-third span-half-t</div>
  </div>
  <div class="span-third span-half-t text-clip">
    <div class="box text-clip text-mono bg-c">span-third span-half-t</div>
  </div>
  <div class="span-third span-half-t text-clip">
    <div class="box text-clip text-mono bg-d">span-third span-half-t</div>
  </div>
  <div class="span-third span-half-t text-clip">
    <div class="box text-clip text-mono bg-e">span-third span-half-t</div>
  </div>
  <div class="span-third span-half-t text-clip">
    <div class="box text-clip text-mono bg-f">span-third span-half-t</div>
  </div>
  <div class="span-third span-half-t text-clip">
    <div class="box text-clip text-mono bg-g">span-third span-half-t</div>
  </div>
  <div class="span-quarter span-half-t collapse-p text-clip">
    <div class="box text-clip text-mono bg-h">span-quarter span-half-t collapse-p</div>
  </div>
  <div class="span-quarter span-half-t collapse-p text-clip">
    <div class="box text-clip text-mono bg-i">span-quarter span-half-t collapse-p</div>
  </div>
  <div class="span-quarter span-half-t collapse-p text-clip">
    <div class="box text-clip text-mono bg-j">span-quarter span-half-t collapse-p</div>
  </div>
  <div class="span-quarter span-half-t collapse-p text-clip">
    <div class="box text-clip text-mono bg-k">span-quarter span-half-t collapse-p</div>
  </div>
  <div class="span-third collapse-p text-clip">
    <div class="box text-clip text-mono bg-l">span-third collapse-p</div>
  </div>
  <div class="span-third collapse-p text-clip">
    <div class="box text-clip text-mono bg-m">span-third collapse-p</div>
  </div>
  <div class="span-third collapse-p text-clip">
    <div class="box text-clip text-mono bg-n">span-third collapse-p</div>
  </div>
</div>