Styleguide

Code & Design Standards and Documentation

Introduction

This styleguide is loosely based on the concept and principles of Atomic Design. The templates consist of small elements (atoms) which are combined and connected to form larger molecules and full components. CSS is written in Sass and preprocessed using Autoprefixer. It follows the principles of Object Oriented CSS (OOCSS) and uses BEM-oriented naming conventions with UI namespaces.

The site is compiled using Harp, a static web server with built-in preprocessing. Templates are written entirely in Jade (aka. Pug), a clean, whitespace-sensitive templating language that compiles to HTML.


Colors

denim
#1e1935

bone
#dddddd

white
#ffffff

The logo comes with two optional hover animations – a 360 degree rotation and an explosion particle effect.

No hover animation
Rotating hover animation
Explosion hover animation
Usage (Jade)
!=partial("_includes/_logo", { classname: "js-explosion" })
The logo is included as a partial and can take an string containing the classname to be added to the SVG. Multiple names can be added as part of the same string and separated by spaces.

Typography

The typography is built using a modular scale with a base of 17px and a ratio of 1.275. The body text and headings are set in Type Dynamic's Sailec, Font Bureau's Input Mono Compressed is used for labels, buttons and code.

Heading Level 1 Sailec bold, 1.2755 rem (57.3 px)

Heading Level 2 Sailec bold, 1.2753 rem (35.2 px)

Heading Level 3 Sailec bold, 1.2752 rem (27.6 px)

Heading Level 4 Sailec bold, 1.2751 rem (21.7 px)

Heading Level 5 Sailec bold, 1.2750 rem (17 px)
Usage (Jade)
+h(level, id) Headline
level can be a headline level betweeen 1 and 5. If a unique id is specified, the headline becomes a permalink.

This is a lead paragraph. It is bigger and can be used for introduction texts in blog posts.
Sailec, 1.2752 rem (27.6 px)

This is a regular paragraph. It's used everywhere else across the whole website. It can contain bold text and of course italicized text as well.
Sailec, 1.2751 rem (21.7 px)

This is a small text paragraph. It's mainly used for teasers and descriptions. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum luctus faucibus tortor, quis malesuada tellus venenatis quis. Nam a velit leo. Ut sollicitudin elit justo, sit amet congue enim finibus a.
Sailec, 1.2750 rem (17 px)

This is a very small text paragraph. It's mainly used for notes, captions and asides. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum luctus faucibus tortor, quis malesuada tellus venenatis quis.
Sailec, 1.275-1 rem (13.3 px)

This is a (linguistic) example.
Input Mono Compressed, 1.2752 rem (27.6 px)

This is a label.
Input Mono Compressed, 1.2750 rem (17 px)

Usage (Jade)
p Regular
+p("large") Lead
+p("medium") Teaser
+p("small") Note
+example Example
+label Label

Grid

full
half
half
third
third
third
Usage (Jade)
+grid
    +col(ratio)
The column ratio can be "full", "half", "third" or "two-thirds".

Components

The site uses a collection of Jade mixins to make it easy to use complex content elements across templates and blog posts. To read more about the concept of modular markup components, check out our blog post on the subject.

Links

This is a link to Google. If inserted via the mixin, links are opened in a new window, while preventing it from accessing the referrer's window object (more info on this here). The CSS-based underline hack is adapted from this demo by Jonathan Neal.

Usage (Jade)
+a(url, trusted) Link text
url takes a string of the link. If trusted is set to true, rel="nofollow noopener" is added.

Buttons

Button without arrowButton with right arrowButton with left arrowUsage (Jade)
+button(url, arrow, trusted) Button text
The arrow argument is optional and can be "left" or "right". See links for url and trusted.

Icons

Usage (Jade)
+icon(name, size)
name takes the name of the icon, size the icon size in px (optional, defaults to 24).

Lists

  • I am a bulleted list
  • I have nice bullets
  • Lorem ipsum dolor
  • consectetur adipiscing elit
  1. I am an ordered list
  2. I have nice numbers
  3. Lorem ipsum dolor
  4. consectetur adipiscing elit
  1. I am an numbered list
  2. with a custom start number
  3. Lorem ipsum dolor
  4. consectetur adipiscing elit
  1. I am an ordered list
  2. I have uppercase letters
  3. Lorem ipsum dolor
  4. consectetur adipiscing elit
  1. I am an ordered list
  2. with a custom start letter
  3. Lorem ipsum dolor
  4. consectetur adipiscing elit
  1. I am an ordered list
  2. I have roman numerals
  3. Lorem ipsum dolor
  4. consectetur adipiscing elit
Usage (Jade)
+list(type, start)
    +item ...
    +item ...
Possible values for type are "numbers" (default), "letters" and "roman". start is an integer and defines the starting point of the list (optional, defaults to 0).

Quotes

This is a blockquote. It stands out from the rest of the content. It can be used all over the site but its main purpose is displaying quotes in the blog posts.

This is a source link

This is a smaller quote for tweeting.

Usage (Jade)
+quote(source, link) Text here
+pullquote No tweet link
+pullquote(tweet)
A regular quote can take a source and full link to the source (both optional). A pullquote either needs a tweet argument of 98 characters or less, or should be followed by the text to be used without a tweet button.

Code Blocks

This is a label# This is an example of a regular code block. It supports syntax highlighting.

import spacy
en_nlp = spacy.load('en', vectors='en_glove_cc_300_1m_vectors')
de_nlp = spacy.load('de')
Usage (Jade)
+code(language, label).
    ...
language defaults to "python", see Prism.js for more options. label takes a string (optional). Important: The dot after the mixin call preserves whitespace and prevents code from being interpreted.

Tables

Column oneColumn twoColumn threeColumn fourColumn five
This is a tableIt displays dataand even code!I'm highlightedMe too
Tables are uncool but in this casethey're actually really useful.They're also responsiveAnd scrollable on mobile.Resize the browser to see it.
Usage (Jade)
+table(head)
    +row
        +cell ...
        +cell("highlight") ...
head takes an array of strings containing the column heading names (optional, otherwise table is displayed without headings).

Info Boxes

This is a label

This is an infobox. It can be used to add notes,updates or warnings to blog articles or docs sections. It comes with an optional label or headline that's displayed at the top.
Usage (Jade)
+infobox(label) Text here
label takes a string (optional).

Newsletter Signup

The signup form is included as a partial. Depending on the context, a light and a dark version of the signup form is available.

Join our mailing list

Stay in the loop!

Join our mailing list

Stay in the loop!

Usage (Jade)
!=partial("path/to/_newsletter", { dark: true })
Partials require relative paths and allow variables to be passed through. If dark is set to true, the dark version is used.

Alerts

Alerts are mostly used to display newsletter signup messages. They can also be used to present updates and news, or

This is an alert message (regular).
This is an alert message (success).
This is an alert message (error).
Usage (Jade)
+alert(...style) Text here
style arguments can be regular, success or error, as well as close to display a close button and add an onclick event that closes the alert.

displaCy Dependency Visualisation

This mixin is based on the new version of displaCy.js and generates an inline SVG graphic that can be styled and customized using CSS. For more info, see our blog post.

TheyPRPateVBDthe pizzaNNwithINanchoviesNNSnsubjdobjpreppobjprep
Usage (Jade)
+displacy(arguments)
The mixin renders the arguments, a JSON-formatted object of arcs and words. See example below for reference.
Example arguments{
    arcs: [
        { dir: "left", start: 0, end: 1, label: "nsubj" },
        { dir: "right", start: 1, end: 2, label: "dobj" },
        { dir: "right", start: 1, end: 3, label: "prep", style: "incorrect" },
        { dir: "right", start: 3, end: 4, label: "pobj" },
        { dir: "left", start: 2, end: 3, label: "prep", style: "correct" }
    ],
    words: [
        { tag: "PRP", text: "They" },
        { tag: "VBD", text: "ate" },
        { tag: "NN", text: "the pizza" },
        { tag: "IN", text: "with" },
        { tag: "NNS", text: "anchovies" }
    ]
}

The style key can be added manually and is translated into a CSS class name on the respective arc. The arc color can be changed via the color property, for example .c-displacy .correct { color: green }.