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

Basic formarting concepts

Layout is about distributing different sized rectangles within a page — which happens also to be a rectangle. A rectangle is the most simple, universal shape.

On this page

No gap

→

The .gap-no class is a Teutonic CSS special gutter class for borderish interface elements. It emulates a collapsed-border look, just like you know from tables.

It works for all kind of boxy elements and can be applied in a stand-alone parental container or in combination with .flex, .grid or .columns. It can also be nested.

Syntax: .gap-no
SCSS: _gap-no.scss

Without grid

Vertically
stacked in a
single column

Flexbox grid

Horizontally
stacked in
rows with
Flexbox

CSS Grid grid

Horizontally
stacked in
rows with
CSS Grid

Columns

Vertically
stacked in
columns
with CSS columns
<h4 class="bo-b_xs pa-b_xs">
  Without grid
</h4>
<div class="gap-no">
  <div class="box">Vertically</div>
  <div class="box">stacked in a</div>
  <div class="box">single column</div>
</div>
<h4 class="bo-b_xs pa-b_xs ma-t_m">
  Flexbox grid
</h4>
<div class="flex wrap-no gap-no">
  <div class="span-quarter box text-clip">Horizontally</div>
  <div class="span-quarter box text-clip">stacked in</div>
  <div class="span-quarter box text-clip">rows with</div>
  <div class="span-quarter box text-clip">Flexbox</div>
</div>
<h4 class="bo-b_xs pa-b_xs ma-t_m">
  CSS Grid grid
</h4>
<div class="grid gap-no">
  <div class="span-3 box text-clip">Horizontally</div>
  <div class="span-3 box text-clip">stacked in</div>
  <div class="span-3 box text-clip">rows with</div>
  <div class="span-3 box text-clip">CSS Grid</div>
</div>
<h4 class="bo-b_xs pa-b_xs ma-t_m">
  Columns
</h4>
<div class="columns gap-no">
  <div class="box">Vertically</div>
  <div class="box">stacked in</div>
  <div class="box">columns</div>
  <div class="box">with CSS columns</div>
</div>

Gaps

→

The universal gap size class can be applied to Flexbox, CSS Grid, Columns and like shown here, stand-alone. In this case the gutter applies not in rows, but on vertically stacked items.

Syntax: .gap_{size}
SCSS: _gaps.scss
Medium
.gap_m
CSS is awesome
CSS is awesome
CSS is awesome
Small
.gap_s
CSS is awesome
CSS is awesome
CSS is awesome
Extra small
.gap_xs
CSS is awesome
CSS is awesome
CSS is awesome
Custom
.gap-custom
CSS is awesome
CSS is awesome
CSS is awesome
<div class="grid gap_s"><div class="span-3 span-2-t">
    <h5 class="flex wrap-no ma-b_xs">
      <div class="text-clip">Medium</div>
      <div class="span-auto text-thin text-mono">.gap_m</div>
    </h5>
    <div class="gap_m text-mono">
      <div class="box text-clip bg-b">CSS is awesome</div>
      <div class="box text-clip bg-c">CSS is awesome</div>
      <div class="box text-clip bg-d">CSS is awesome</div>
    </div>
  </div><div class="span-3 span-2-t">
    <h5 class="flex wrap-no ma-b_xs">
      <div class="text-clip">Small</div>
      <div class="span-auto text-thin text-mono">.gap_s</div>
    </h5>
    <div class="gap_s text-mono">
      <div class="box text-clip bg-b">CSS is awesome</div>
      <div class="box text-clip bg-c">CSS is awesome</div>
      <div class="box text-clip bg-d">CSS is awesome</div>
    </div>
  </div><div class="span-3 span-2-t">
    <h5 class="flex wrap-no ma-b_xs">
      <div class="text-clip">Extra small</div>
      <div class="span-auto text-thin text-mono">.gap_xs</div>
    </h5>
    <div class="gap_xs text-mono">
      <div class="box text-clip bg-b">CSS is awesome</div>
      <div class="box text-clip bg-c">CSS is awesome</div>
      <div class="box text-clip bg-d">CSS is awesome</div>
    </div>
  </div>
  <div class="span-3 span-2-t">
    <h5 class="flex wrap-no ma-b_xs">
      <div class="text-clip">Custom</div>
      <div class="span-auto text-thin text-mono">.gap-custom</div>
    </h5>
    <div class="gap-custom text-mono">
      <div class="box text-clip bg-b">CSS is awesome</div>
      <div class="box text-clip bg-c">CSS is awesome</div>
      <div class="box text-clip bg-d">CSS is awesome</div>
    </div>
  </div>
</div>

Media

→

Here is the basic media container. It’s size is defined by the outer layout and the media itself. Images without a set height and width will be resposnive, occupying 100% of the width and taking as much height, as needed.

Syntax: .media
SCSS: _media.scss
Photo via picsum.photos
Image

A good programmer looks both ways before crossing a one-way street.

—Unknown

Text
<div class="grid gap_s collapse-p">
  <div class="span-6">
    <figure class="media">
      <img src="//picsum.photos/800/450/?random" alt="Photo via picsum.photos">
      <div class="text-mono mini-info">Image</div>
    </figure>
  </div>
  <div class="span-6">
    <figure class="media">
      <blockquote class="text-serif text-italic pa_m">
        <p class="text_xl">A good programmer looks both ways before crossing a one-way street.</p>
        <p class="text_s ma-t_s">—Unknown</p>
      </blockquote>
      <div class="text-mono mini-info">Text</div>
    </figure>
  </div>
</div>

Aspect ratio

→

Here is an addition to the media container. The aspect ratio classes are reserving space in the page layout. This is handy for iframes or any situation you want to have full control about the media size, or have a height for a media container while the media is still loading. It comes with a set of predefined ratios. Put in any kind of content, customize it with the CSS Vars --ar-x and --ar-y.

Resize your browser to see that quote-text get’s cropped. Examine how you can change the default background color and work with unkown or not exactly fitting images, using the extra .cover class. The funny faces are making use of the special radius modifier class .r-circle.

Syntax: ar_{ratio}
SCSS: _aspect-ratio.scss

Different media types

↑ This an embbeded video

Java is, in many ways, C++??.

—Unknown

↑ This is text

Photo via picsum.photos

↑ This an image

Aspect ratio presets

Photo via picsum.photos
ar-1-2
Photo via picsum.photos
ar-9-16
Photo via picsum.photos
ar-2-3
Photo via picsum.photos
ar-3-4
Photo via picsum.photos
ar-1-1
Photo via picsum.photos
ar-4-3
Photo via picsum.photos
ar-3-2
Photo via picsum.photos
ar-16-9
Photo via picsum.photos
ar-2-1
Photo via adorable.io/avatars
Photo via adorable.io/avatars

Covered background image

Cropped image

↑ Larger background-image cut out to fit into content

Covered image

Cropped image

↑ Larger image cut out to fit into content

Custom aspect ratio

Photo via picsum.photos
1100:300

↑ Aspect ratio works with any image size, with locally scoped CSS Vars. 

<h3 class="ma-b_xs">
  Different media types
</h3>
<div class="grid gap_s ">
  <div class="span-4">
    <figure class="ar-16-9 media bo_px">
      <iframe src="https://www.youtube.com/embed/FZ1KCIZCenw?showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </figure>
    <p class="text_s ma-t_xs">
      &uarr; This an embbeded video
    </p>
  </div>
  <div class="span-4">
    <figure class="ar-16-9 media bo_px">
      <blockquote class="text-serif text-italic pa_m">
        <p class="text_xl">Java is, in many ways, C++??.</p>
        <p class="text_s ma-t_s">—Unknown</p>
      </blockquote>
    </figure>
    <p class="text_s ma-t_xs">
      &uarr; This is text
    </p>
  </div>
  <div class="span-4">
    <figure class="ar-16-9 media bo_px">
      <img src="//picsum.photos/800/450/?random" alt="Photo via picsum.photos">
    </figure>
    <p class="text_s ma-t_xs">
      &uarr; This an image
    </p>
  </div>
</div>

<h3 class="ma-t_l ma-b_xs">
  Aspect ratio presets
</h3>
<div class="grid gap_s">
  <div class="span-2 span-4-t span-6-p">
    <figure class="ar-1-2 media">
      <img src="//picsum.photos/450/900/?random&asd=23" alt="Photo via picsum.photos">
      <div class="text-mono mini-info">ar-1-2</div>
    </figure>
  </div>
  <div class="span-2 span-4-t span-6-p">
    <figure class="ar-9-16 media">
      <img src="//picsum.photos/450/800/?random&asd=23" alt="Photo via picsum.photos">
      <div class="text-mono mini-info">ar-9-16</div>
    </figure>
  </div>
  <div class="span-2 span-4-t span-6-p">
    <figure class="ar-2-3 media">
      <img src="//picsum.photos/450/675/?random&asd=23" alt="Photo via picsum.photos">
      <div class="text-mono mini-info">ar-2-3</div>
    </figure>
  </div>
  <div class="span-2 span-4-t span-6-p">
    <figure class="ar-3-4 media">
      <img src="//picsum.photos/450/600/?random&asd=23" alt="Photo via picsum.photos">
      <div class="text-mono mini-info">ar-3-4</div>
    </figure>
  </div>
  <div class="span-2 span-4-t span-6-p">
    <figure class="ar-1-1 media">
      <img src="//picsum.photos/450/450/?random&asd=23" alt="Photo via picsum.photos">
      <div class="text-mono mini-info">ar-1-1</div>
    </figure>
  </div>
  <div class="span-2 span-4-t span-6-p">
    <figure class="ar-4-3 media">
      <img src="//picsum.photos/600/450/?random&asd=23" alt="Photo via picsum.photos">
      <div class="text-mono mini-info">ar-4-3</div>
    </figure>
  </div>
  <div class="span-2 span-4-t span-6-p">
    <figure class="ar-3-2 media">
      <img src="//picsum.photos/450/300/?random&asd=23" alt="Photo via picsum.photos">
      <div class="text-mono mini-info">ar-3-2</div>
    </figure>
  </div>
  <div class="span-2 span-4-t span-6-p">
    <figure class="ar-16-9 media">
      <img src="//picsum.photos/640/360/?random&asd=23" alt="Photo via picsum.photos">
      <div class="text-mono mini-info">ar-16-9</div>
    </figure>
  </div>
  <div class="span-2 span-4-t span-6-p">
    <figure class="ar-2-1 media">
      <img src="//picsum.photos/800/400/?random&asd=23" alt="Photo via picsum.photos">
      <div class="text-mono mini-info">ar-2-1</div>
    </figure>
  </div>
  <div class="span-1 span-2-t span-3-p">
    <img class="ar-1-1 ra-circle media" src="//api.adorable.io/avatars/300/assffsdf.png" alt="Photo via adorable.io/avatars">
  </div><div class="span-1 span-2-t span-3-p">
    <img class="ar-1-1 ra-circle media" src="//api.adorable.io/avatars/300/21eequwo.png" alt="Photo via adorable.io/avatars">
  </div></div>

<div class="grid gap_s ma-t_l">
  <div class="span-4">
    <h3 class="ma-b_xs text-clip">
      Covered background image
    </h3>
    <figure class="ar-2-1 cover" style="background-image: url('//picsum.photos/400/400/?random')">
      <div class="text-mono mini-info">Cropped image</div>
    </figure>
    <p class="text_s ma-t_xs">
      &uarr; Larger background-image cut out to fit into content
    </p>

  </div>
  <div class="span-4">
    <h3 class="ma-b_xs text-clip">
      Covered image
    </h3>
    <figure class="ar-2-1 cover">
      <img class="cover" src="//picsum.photos/450/450/?random" alt="">
      <div class="text-mono mini-info">Cropped image</div>
    </figure>
    <p class="text_s ma-t_xs">
      &uarr; Larger image cut out to fit into content
    </p>

  </div>
  <div class="span-4">
    <h3 class="ma-b_xs text-clip">
      Custom aspect ratio
    </h3><figure class="ar-custom">
      <img src="//picsum.photos/1100/300/?random&asd=223" alt="Photo via picsum.photos">
      <div class="text-mono mini-info">1100:300</div>
    </figure>
    <p class="text_s ma-t_xs">
      &uarr; Aspect ratio works with any image size, with locally scoped CSS Vars.
    </p>

  </div>
</div>