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

Interface elements

Here are some micro-components with little markup, but lot’s of style.

On this page

Box

→

Boxes are rectangles with visible outlines. Use them for navigational elements and to structure your contents.

There are two modes: div.box is passive, while a.box, label.box or button.box will be an active version, adding a background color and hover/focus effects.

Syntax: .box
SCSS: _box.scss
Interactive
a.box a.box
Passive
div.box
div.box
<div class="grid gap_s">
  <div class="span-6">
    <h5 class="bo-b_xs pa-b_xs">Interactive</h5>
    <div class="flex gap-no wrap-no text-mono">
      <a class="box text-clip" href="">a.box</a>
      <a class="box text-clip" href="">a.box</a>
    </div>
  </div>
  <div class="span-6">
    <h5 class="bo-b_xs pa-b_xs">Passive</h5>
    <div class="flex gap-no wrap-no text-mono">
      <div class="box text-clip">div.box</div>
      <div class="box text-clip">div.box</div>
    </div>
  </div>
</div>

Button

→

There is no UI without a button. Here is the obligatory call-to-action button. It is scientifically proven that those will skyrock your conversion rates and sales.

Add the .button class on almost any element to create a button. Optionally add an additional .prime or .ghost class for variations.

Syntax: .button
SCSS: _button.scss 
<form class="grid-auto gap_s read_l">
  <button class="button prime">.button.prime</button>
  <input type="submit" class="button" value=".button">
  <button class="button ghost">.button.ghost</button>
</form>

Active

→

This is a strong highlight class for the currently activated navigational menu item.

Syntax: .active
SCSS: _active.scss
a.box a.box.active a.box 
<div class="grid gap-no text-mono">
  <a class="span-3 box" href="#">a.box</a>
  <a class="span-6 box active" href="#">a.box.active</a>
  <a class="span-3 box" href="#">a.box</a>
</div>

Tab

→

This is an alternative active state, a simple horizontal tabbed navigation.

This fancy example includes some utility classes for the colored background container, and the border on the bottom. Only horizontal tabs are supported.

Syntax: .active-tab
SCSS: _active-tab.scss 
<nav class="pa-h_m pa-t_l bo-b_px bg-1">
  <div class="flex gap-no text-mono">
    <a class="box" href="">a.box</a>
    <a class="box active-tab" href="">a.box.active-tab</a>
    <a class="box" href="">a.box</a>
  </div>
</nav>
<div class="pa_m"></div>

Triangle

→

This adds a little triangle on the bottom of an element, available in three sizes.

The arrow is only available in a downwards poting direction currently. It will not work when the element has some overflow hidden property or when the element is not positioned relativly. The additional .active class shown in this example is not required.

Syntax: .arrow{_size?}
SCSS: _arrow.scss
.box.arrow
.box.arrow_l
.box.arrow_xl
<div class="grid gap_s text-mono">
  <div class="span-4 box active arrow">.box.arrow</div>
  <div class="span-4 box active arrow_l">.box.arrow_l</div>
  <div class="span-4 box active arrow_xl">.box.arrow_xl</div>
</div>

Mini info

→

Adds a little info on most boxy containers, most commonly used in combination with form-box or box.

Syntax: .mini-info
SCSS: _mini-info.scss
Always shown with boxes
mini-info
mini-info on focus & focus
mini-info always on
<div class="grid-auto collapse-t">
  <div class="box text-mono text-clip">
    Always shown with boxes
    <div class="mini-info">mini-info</div>
  </div>
  <div class="form-box no-label">
    <input type="text" class="input text-mono" value="Shown at hover">
    <div class="mini-info">mini-info on focus &amp; focus</div>
  </div>
  <div class="form-box no-label">
    <input type="text" class="input text-mono" value="Always shown">
    <div class="mini-info shown">mini-info always on</div>
  </div>
</div>

Striped

→

The striped class adds diagonal stripes. You can throw it at most block elements and combine it with background color classes.

Syntax: .striped
SCSS: _striped.scss 
<div class="grid gap-no height_xxl">
  <div class="span-4 striped bg-a "></div>
  <div class="span-4 striped bg-d"></div>
  <div class="span-4 striped bg-k"></div>
</div>

Loading

→

The loading class is adding some funky moving stripes on most elemnts to indicate, well, that something is loading. It’s a good practive to disable a button and add a loding class so that the user does not submits a form again.

Syntax: .loading
SCSS: _loading.scss
.box
a.box
.box.loading
a.box.loading 
<div class="grid gap_s collapse-p text-mono">
  <div class="span-2 box text-clip">.box</div>
  <a href="#" class="span-2 box text-clip">a.box</a>
  <button class="span-2 button text-clip">.button</button>
  <button class="span-2 button prime text-clip">.button.prime</button>
  <button disabled class="span-2 button prime text-clip">.button:disabled.prime</button>
  <button disabled class="span-2 button text-clip">.button:disabled</button>
</div>
<div class="grid gap_s collapse-p text-mono ma-t_s">
  <div class="span-2 box text-clip loading">.box.loading</div>
  <a href="#" class="span-2 box text-clip loading">a.box.loading</a>
  <button class="span-2 button text-clip loading">.button.loading</button>
  <button class="span-2 button prime text-clip loading">.button.prime.loading</button>
  <button disabled class="span-2 button prime text-clip loading">.button:disabled.prime.loading</button>
  <button disabled class="span-2 button text-clip loading">.button:disabled.loading</button>
</div>

Scrollable

→

Wrap content in a .scroll-h or .scroll-v container to get a “poor mans responsive website”.

In WebKit/Blink browsers an additional .show-scrollbar class will make the scrollbar always visible and styled. Also see the vertical scrollable example.

Syntax: .scroll-{direction}
SCSS: _scrollable.scss
😁
😂
🤣
😃
😄
😅
😆
😉
😊
😋
😎
😍
😘
😗
😙
😚
🙂
🤗
🤩
🤔
🤨
😐
😑
😶
🙄
😏
😣
😥
😮
🤐
😯
😪
😫
😴
😌
😛
😜
😝
🤤
😒
😓
😔
😕
🙃
🤑
😲
🙁
😖
😞
😟
😤
😢
😭
😦
😧
😨
😩
🤯
😬
😰
😱
😳
🤪
😵
😡
😠
🤬
😷
🤒
🤕
🤢
🤮
🤧
😇
🤠
🤡
🤥
🤫
🤭
🧐
🤓
<div class="scroll-h bo_xs">
  <div class="text_xxxl flex wrap-no">
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😁</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😂</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤣</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😃</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😄</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😅</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😆</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😉</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😊</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😋</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😎</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😍</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😘</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😗</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😙</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😚</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🙂</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤗</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤩</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤔</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤨</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😐</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😑</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😶</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🙄</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😏</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😣</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😥</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😮</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤐</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😯</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😪</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😫</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😴</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😌</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😛</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😜</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😝</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤤</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😒</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😓</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😔</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😕</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🙃</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤑</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😲</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🙁</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😖</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😞</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😟</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😤</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😢</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😭</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😦</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😧</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😨</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😩</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤯</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😬</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😰</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😱</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😳</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤪</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😵</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😡</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😠</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤬</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😷</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤒</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤕</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤢</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤮</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤧</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">😇</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤠</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤡</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤥</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤫</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤭</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🧐</div>
    <div class="bo-r_px pa_s span-auto text-center docs-scroll-emoji">🤓</div>
  </div>
</div>

<style>
  .docs-scroll-emoji { min-width: ; line-height:   }
</style>

Tooltip

→

Display a little text on :hover or on :focus when data-tooltip attribute is set.

Will not work when your element has hidden overflow such as with text-clip.

SCSS: _tooltip.scss 
<button class="button" data-tooltip="You are hovering!">Hover me</button>
→

A block link is link that got turned into a block element, with some default padding and :hover/:focus and :visited styling. Use it for navigational elements. It can be combined with other classes.

SCSS: _block-link.scss
.block-link 
<a href="#block-link" class="block-link">.block-link</a>