Styleguide

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 based on the Basscss framework. Custom extensions are written in Sass and preprocessed using Autoprefixer.

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. Each component is developed as a mixin that contains all required markup.

mirage
#1e1935
martinique
#413a61
violet
#6454ad
pewter
#949e9b
alto
#dddddd
white
#ffffff

Color names are inspired by Name that Color.

Typography

The typography is built using a modular scale with a base of 20px. 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.

Headlines are a slightly increased variation of the Basscss base, with an additional level 0 heading used for the landing page.

Heading Level 0
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5

This is a lead paragraph. It is bigger and can be used for introduction texts in blog posts.

This is a regular paragraph. It's used everywhere else across the whole website. It can contain bold text, italicized text, small caps and abbreviations that come with a tooltip explanation that is collapsed into text in brackets on small screens.

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.

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.

This is a (linguistic) example.

This is a label.

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.

The grid and column mixins use the Basscss flexbox grid.

full
half
half
third
third
third
quarter
quarter
quarter
quarter
eigth
eigth
eigth
eigth
eigth
eigth

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.

Buttons can be used with optional, animated left or right arrows.

no arrowleft arrowright arrow

Icons are implemented via a SVG sprite and can be included as a mixin, using their name and an optional size value.

Lists are available as bulleted, numbered, lettered and lower roman. Optionally, a start index can be defined.

  • 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

Column oneColumn twoColumn threeColumn fourColumn five
Lorem ipsumdolor sit ametconsectetur adipiscingelit quisque enimante pretium a orci
Tables are uncool but in this casethey're actually really useful.They're also responsiveAnd scrollable on mobile.Resize the browser to see it.

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

Smaller pullquotes can contain a text for tweeting, that will be linked to a Twitter share dialog. If no tweet text is specified, a regular pull quote is displayed.

This is a smaller quote for tweeting.

Code blocks use the Prism syntax highlighter. The language can be set individually, and defaults to Python.

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')

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.

Link lists are a simple and space-saving way to display a list of further links and resources inline. Their content can be provided as a list of arguments. Each link consists of an array of title, link and description.

Data Visualisation & Embeds

Blog posts on this site frequently contain visualisations and embeds from other sites. Each of these components is available as a separate mixin.

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
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" }
    ]
}

Graphs are fully SVG-based and generated dynamically using a mixin and JSON-formatted input. For more examples, see this blog post.

Who uses SaaS for NLP?
Participants using spaCy at work 22% 11%Paricipants evaluating spaCy for a work project 28% 12%Participants using spaCy to produce academic publications 20% 11%Participants using spaCy for personal projects 18% 6%uses SaaS offerings for NLPuses Google's SaaS offerings for NLP

Tweets are embedded using the Twitter embed widget and a mixin that takes the username and tweet ID. A regular blockquote is shown as the fallback option.

CodePen embeds use a custom theme and are included using a mixin that takes the pen ID, and an optional height to prevent content reflow.