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

Web design is 95% typography

On this page

Text sizes

→

Type sizes are defined in a modular scale. The base is “1 rem”. From there it get’s smaller and bigger. There are text-size classes that are matching the headlines font-sizes. With CSS vars you can customize the ‘base’ and the ‘ratio’. All text on smaller screens get’s smaller.

Syntax: .text_{size}
SCSS: _text-sizes.scss
HTML tag CSS class

h1

 text_xxxl

h2

 text_xxl

h3

 text_xl

h4

 text_l
h5, p, td, div … text_m
(small) text_s
text_xs 
<table class="table">
  <tr class="inverted">
    <th>HTML tag</th>
    <th>CSS class</th>
  </tr>
  <tr>
    <td><h1>h1</h1></td>
    <td class="text_xxxl">text_xxxl</td>
  </tr>
  <tr>
    <td><h2>h2</h2></td>
    <td class="text_xxl">text_xxl</td>
  </tr>
  <tr>
    <td><h3>h3</h3></td>
    <td class="text_xl">text_xl</td>
  </tr>
  <tr>
    <td><h4>h4</h4></td>
    <td class="text_l">text_l</td>
  </tr>
  <tr>
    <td>h5, p, td, div …</td>
    <td class="text_m">text_m</td>
  </tr>
  <tr>
    <td><small data-tooltip="Actually 80%">(small)</small></td>
    <td class="text_s">text_s</td>
  </tr>
  <tr>
    <td></td>
    <td class="text_xs">text_xs</td>
  </tr>
</table>

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>

Hero text sizes

→

Here is some extra large hero text for the marketing genius in you. These hero text sizes are calculated, adding a viewport-size to a base size, so the size changes dynanmically with the browser window.

Syntax: text-hero_{size}
SCSS: _text-size-hero.scss
Hero l
Hero m

Headline 1

Headline 2

<div class="text-hero_l">Hero l</div>
<div class="text-hero_m">Hero m</div>
<hr class="ma-v_m">
<h1>Headline 1</h1>
<h2>Headline 2</h2>

Read widths

→

I don’t know about you. But I think Wikipedia is a terrible reading experience on a desktop browser — the text lines are too long. Something between 45-75 characters is widely regarded as a satisfactory length per line. The text-length helper classes are keeping this in an aesthetic balance.

The read-width class name is matching the text-size class name. Usually use read_l in combination with .text_l. Appearance can differ from typeface to typeface.

Syntax: .read_{size}
SCSS: _read-widths.scss

I am Posdnous; I be the new generation of slaves; Here to make papes to buy a record exec rakes; The pile of revenue I create.

I am Posdnous; I be the new generation of slaves; Here to make papes to buy a record exec rakes; The pile of revenue I create.

I am Posdnous; I be the new generation of slaves; Here to make papes to buy a record exec rakes; The pile of revenue I create.

I am Posdnous; I be the new generation of slaves; Here to make papes to buy a record exec rakes; The pile of revenue I create.

<p class="pa-v_m text_s read_s">I am Posdnous; I be the new generation of slaves; Here to make papes to buy a record exec rakes; The pile of revenue I create.</p>
<p class="pa-v_m text_m read_m">I am Posdnous; I be the new generation of slaves; Here to make papes to buy a record exec rakes; The pile of revenue I create.</p>
<p class="pa-v_m text_l read_l">I am Posdnous; I be the new generation of slaves; Here to make papes to buy a record exec rakes; The pile of revenue I create.</p>
<p class="pa-v_m text_xl read_xl">I am Posdnous; I be the new generation of slaves; Here to make papes to buy a record exec rakes; The pile of revenue I create.</p>

Code

→

There is some opinionated styling for standard <code> and <pre> code blocks going on.

SCSS: _code.scss

For inline code examples use the HTML <code> tag. 

For blocks of code use <code> wrapped in a <pre> block.
<div class="read_l">
  <p class="ma-b_s">
    For inline code examples use the HTML <code>&lt;code&gt;</code> tag.
  </p>
  <pre><code>For blocks of code use &lt;code&gt; wrapped in a &lt;pre&gt; block.</code></pre>
</div>

Syntax highlighting

→

Here is a built-in code coloring theme that likely works for your preferred syntax highlighter engine.

Just place a code element inside a pre block. span classes will styled. The highlighting magic itself — wrapping code in spans of different classes — is not included. Teutonic only provides the necessary CSS for styling code block. The syntax highlighting engines here are only included for demonstration.

Syntax: pre > code
SCSS: _code-highlight.scss

Highlight.js

function factorial(n) {
  if ((n === 0) || (n === 1))
    return 1;
  else
    return (n * factorial(n - 1));
}

Rouge & Pygment

function factorial(n) {
  if ((n === 0) || (n === 1))
    return 1;
  else
    return (n * factorial(n - 1));
}

Prism.js

function factorial(n) {
  if ((n === 0) || (n === 1))
    return 1;
  else
    return (n * factorial(n - 1));
}

Anchors

→

Helper class for text heavy pages to easily jump to deeplinks, aka hashlinks. A headline with an ID can have a visual anchor which adds a “¶” character. Linked targets are highlighted. It works for headlines and any other block elements. Just like on the pages here you can create a Table Of Contents navigation.

SCSS: _anchor.scss
↓ Link to anchor headline ↓ Link to anchor block

An anchored headline

When hovering the headline above, you'll see a reverse Pilcrow character that also links itself, so you can click and then share a deeplink. 

<div class="read_m">
  <div class="ma-b_s text_s">
    <a href="#anchor-headline" class="button text-clip pa_xs">&darr; Link to anchor headline</a>
    <a href="#anchor-block" class="button text-clip pa_xs">&darr; Link to anchor block</a>
  </div>

  <h3 id="anchor-headline">
    An anchored headline
    <a href="#anchor-headline" class="anchor"></a>
  </h3>
  <p id="anchor-block" class="ma-t_s">
    When hovering the headline above, you'll see a reverse <a href="http://www.shadycharacters.co.uk/series/the-pilcrow/">Pilcrow</a> character that also links itself, so you can click and then share a deeplink.
  </p>
</div>

Text helpers

→

Additonal helpers to make your live working with text easier and to control stuff like: alignment, font-family, weight and overflow.

SCSS: _text-helpers.scss

Weight

.text-bold makes text fat.
.text-thin makes text slim. Might not apply to all typefaces.

Overflow

.text-clip will NOT wrap over multiple lines but instead stay in one line and text-clip off with an elpisis. Most useful when in boxes or menus.
.text-keep stays together no matter what.
.text-hyphen will hyphenate. so that supercalifragilisticexpialidocious and honorificabilitudinitatibus and subdermatoglyphic are good to go.
↑ This is a horizontal ruler, by the way.

Font families

.text-sans will use the sans serif font.
.text-serif will use the serif font.
.text-mono will use the monospaced font.

Inline elements

Mark the important parts within your text with the HTML element <mark>.
Use the <abbr> element to give some hint for QWERTY words.

Text selection

.text-select-all: select all text in this line with ONE click.
.text-select-no: this text can't be selected.
.text-point-no: no pointer events allowed. Similar to the one above but different.

Alignment

Usually text is left aligned.
.text-center stays in the middle.
.text-right is right aligned. 
<div class="text-all_l">
  <h4 class="ma-b_xs">
    Weight
  </h4>
  <div class="text-bold">
    <code>.text-bold</code> makes text fat.
  </div>
  <div class="text-thin ma-t_s">
    <code>.text-thin</code> makes text slim. Might not apply to all typefaces.
  </div>

  <h4 class="ma-t_m ma-b_xs">
    Overflow
  </h4>
  <div class="text-clip">
    <code>.text-clip</code> will NOT wrap over multiple lines but instead stay in one line and text-clip off with an elpisis. Most useful when in boxes or menus.
  </div>
  <div class="text-keep ma-t_s m-l-s- box" style="width:220px">
    <code>.text-keep</code> stays together no matter what.
  </div>
  <div class="text-hyphen ma-t_s">
    <code>.text-hyphen</code> will hyphenate. so that supercalifragilisticexpialidocious and honorificabilitudinitatibus and subdermatoglyphic are good to go.
  </div>

  <hr class="ma-t_l ma-b_xs">
  <div class="m-b-l text_s">
    &uarr; This is a horizontal ruler, by the way.
  </div>

  <h4 class="ma-t_m ma-b_xs">
    Font families
  </h4>
  <div class="text-sans">
    <code>.text-sans</code> will use the sans serif font.
  </div>
  <div class="text-serif ma-t_s">
    <code>.text-serif</code> will use the serif font.
  </div>
  <div class="text-mono ma-t_s">
    <code>.text-mono</code> will use the monospaced font.
  </div>
  <h4 class="ma-t_m ma-b_xs">
    Inline elements
  </h4>
  <div>
    Mark the <mark>important parts</mark> within your text with the HTML element <code>&lt;mark&gt;</code>. <br>
    Use the <code>&lt;abbr&gt;</code> element to give some hint for <abbr title="QWERTY is a keyboard design for Latin-script alphabets.">QWERTY</abbr> words.
  </div>
  <h4 class="ma-t_m ma-b_xs">
    Text selection
  </h4>
  <div class="text-select-all">
    <code>.text-select-all</code>: select all text in this line with ONE click.
  </div>
  <div class="text-select-no ma-t_s">
    <code>.text-select-no</code>: this text can't be selected.
  </div>
  <div class="text-point-no ma-t_s">
    <code>.text-point-no</code>: no pointer events allowed. Similar to the one above but different.
  </div>
  <h4 class="ma-t_m ma-b_xs">
    Alignment
  </h4>
  <div>
    Usually text is left aligned.
  </div>
  <div class="text-center pa-t_xs ma-v_xs bo-t_px">
    <code>.text-center</code> stays in the middle.
  </div>
  <div class="text-right pa-t_xs ma-v_xs bo-t_px">
    <code>.text-right</code> is right aligned.
  </div>
</div>
→

The .link class sets some default behaviour for links. It’s like an optional reset. Most importantly, it uses the prime color instead of the browser default blue. It’s optional, so you need to add the class, unless used in context, like in an article. Beside the :hover state, :visited will also be styled, so your users know where they have been already.

Syntax: .link
SCSS: _link.scss
I link. 
<a href="#link" class="link">I link</a>.

Article

→

This is a single wrapper class to handle WYSIWYG or Markdown generated content, where only HTML tags are available and no CSS classes can be set. Use it for articles, blog posts, docs …

PRO TIP: Combining the .article class with text size containers and read widths enables different sizes of articles.

Syntax: .article
SCSS: _article.scss

The .article wrapper class gives you reading-optimized styling for articles and blog posts. It’s made for Markdown generated content like from Jekyll or Grav, but it will also work with any CMS. —Inside here:

  1. Text is optimized for readability
  2. Headlines have more spacing
  • Lists have a hanging punctuation
    • Nested lists work as well

p, ol, ol, dl, table, blockquote, a, img, hr, pre, code, i — all work well

Tables Are Cool
col 3 is right-aligned $1600
col 2 is centered $12

h1: Headline level 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi vitae dicta amet nobis porro laudantium accusantium, velit minima vel, aliquam veniam atque perferendis maxime earum autem dolor, dolore fugit iure?

Pasting code from the Internet into production code is like chewing gum found in the street.

h2: Headline level 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque odio assumenda, veritatis tempora enim nemo ipsum quidem, porro et voluptate animi minus ad commodi architecto recusandae eveniet, accusamus rem. Dolor!

# Never execute:
$ rmf *

h3: Headline level 3 This is a slightly longer headline to demonstrate that this also looks good

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores molestias dolore eaque recusandae, tempora iusto consequuntur sint consectetur, quisquam cumque ducimus, voluptates. Mollitia dolores explicabo quibusdam magnam asperiores accusamus, cumque.

h4: Headline level 4 This is a slightly longer headline to demonstrate that this also looks good

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores molestias dolore eaque recusandae, tempora iusto consequuntur sint consectetur, quisquam cumque ducimus, voluptates. Mollitia dolores explicabo quibusdam magnam asperiores accusamus, cumque.

h5: Headline level 5 This is a slightly longer headline to demonstrate that this also looks good

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores molestias dolore eaque recusandae, tempora iusto consequuntur sint consectetur, quisquam cumque ducimus, voluptates. Mollitia dolores explicabo quibusdam magnam asperiores accusamus, cumque.

That’s all she wrote.