diff --git a/Dockerfile b/Dockerfile
index eed00f53..0a9425d7 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -3,11 +3,6 @@ EXPOSE 3000
 
 ENV BASE_URL '/'
 
-# Will unfortunately have to keep this as long as
-# we have git deps in package.json
-RUN apt-get update && apt-get install -y --no-install-recommends git \
-	&& rm -rf /var/lib/apt/lists/*
-
 RUN mkdir -p /usr/src/app
 WORKDIR /usr/src/app
 
diff --git a/docs/api/index.hbs b/docs/api/index.hbs
index 94efdb4e..cafb7dfe 100644
--- a/docs/api/index.hbs
+++ b/docs/api/index.hbs
@@ -8,11 +8,58 @@ order: -1
 {{#> page}}
   {{#*inline "content"}}
 
-    <div class="alert alert-info" role="alert" style="margin: 50px 0;">
-      <p><strong>Heads up!</strong> This page is being rewritten
-      in order to make understanding the API of the AXA Web Toolkit
-      as easy as possible. Come back again in a couple of days!</p>
-    </div>
+    {{#with menu.sassdoc}}
+      {{#each childrenArray}}
+        {{#with file}}
+          <h2 class="h3" id="{{slug}}">{{comment.context.name}}</h2>
+          <p class="lead">{{comment.description}}</p>
+
+          <p>Type: <span class="label label-primary">{{comment.context.type}}</span></p>
+
+          {{#if comment.context.code}}
+          <div>
+            <h3 class="h4">Source:</h3>
+            <pre>{{comment.context.code}}</pre>
+          </div>
+          {{/if}}
+
+          {{#if comment.context.value}}
+          <div>
+            <h3 class="h4">Source</h3>
+            <pre>{{comment.context.value}}</pre>
+          </div>
+          {{/if}}
+
+          {{#if comment.parameter}}
+            <h3 class="h4">Parameters</h3>
+            <dl>
+              {{#each comment.parameter}}
+                <dt>{{name}} ({{type}} - Default: {{default}})</dt>
+                <dd>{{description}}</dd>
+              {{/each}}
+            <dl>
+          {{/if}}
+
+          {{#if comment.see}}
+            <h3 class="h4">See</h3>
+            <ul>
+              {{#each comment.see}}
+                <li><code>{{name}}</code></li>
+              {{/each}}
+            </ul>
+          {{/if}}
+
+          {{#if comment.example}}
+            {{#each comment.example}}
+              <div>
+                <h3 class="h4">Example {{@index}}: {{description}} ({{type}})</h3>
+                <pre>{{code}}</pre>
+              </div>
+            {{/each}}
+          {{/if}}
+        {{/with}}
+      {{/each}}
+    {{/with}}
 
   {{/inline}}
 {{/page}}
diff --git a/docs/hbs-partials/sassdoc-template.hbs b/docs/hbs-partials/sassdoc-template.hbs
deleted file mode 100644
index 22e08c3c..00000000
--- a/docs/hbs-partials/sassdoc-template.hbs
+++ /dev/null
@@ -1,36 +0,0 @@
-{{#> page}}
-  {{#*inline "content"}}
-    <h1>{{comment.context.name}}</h1>
-    <p>{{comment.description}}</p>
-    <p>Type: {{comment.context.type}}</p>
-    {{#if comment.context.code}}
-    <div>
-      <h2>Source:</h2>
-      <pre>{{comment.context.code}}</pre>
-    </div>
-    {{/if}}
-    {{#if comment.context.value}}
-    <div>
-      <h2>Source:</h2>
-      <pre>{{comment.context.value}}</pre>
-    </div>
-    {{/if}}
-    {{#if comment.parameter}}
-      <h2>Parameters:</h2>
-      {{#each comment.parameter}}
-        <dl>
-          <dt>{{name}} ({{type}} - Default: {{default}})</dt>
-          <dd>{{description}}</dd>
-        <dl>
-      {{/each}}
-    {{/if}}
-    {{#if comment.example}}
-      {{#each comment.example}}
-        <div>
-          <h2>Example {{@index}}: {{description}} ({{type}})</h2>
-          <pre>{{code}}</pre>
-        </div>
-      {{/each}}
-    {{/if}}
-  {{/inline}}
-{{/page}}
diff --git a/lib/build-docs.js b/lib/build-docs.js
index 99a9a379..1878162c 100644
--- a/lib/build-docs.js
+++ b/lib/build-docs.js
@@ -1,15 +1,10 @@
 import path from 'path'
-import marked from 'marked'
 import _ from 'lodash'
 import fs from 'fs'
 import handlebars from 'handlebars'
 
-import highlight from 'highlight.js'
 import Metalsmith from 'metalsmith'
-import collections from 'metalsmith-collections'
 import layouts from 'metalsmith-layouts'
-import pug from 'metalsmith-pug'
-import markdown from 'metalsmith-markdown'
 import branch from 'metalsmith-branch'
 import define from 'metalsmith-define'
 import drafts from 'metalsmith-drafts'
@@ -22,9 +17,6 @@ import watch from 'metalsmith-watch'
 import inplace from 'metalsmith-in-place'
 
 import packageJson from '../package.json'
-import sampleJadeFilter from './jade-filter-sample'
-import highlightCodeJadeFilter from './jade-filter-highlightcode'
-import markedRenderer from './marked-renderer'
 import nav from './metalsmith-nav'
 import searchIndexData from './metalsmith-search-index'
 import log from './metalsmith-log'
@@ -38,24 +30,6 @@ import hbsHighlight from './handlebars-highlight'
 const cwd = path.join(__dirname, '../')
 const metalsmithSource = './docs'
 
-// basedir for include paths
-const pugBaseDir = path.join(cwd, metalsmithSource)
-
-// Pug filters
-const pugFilters = {
-  sample: sampleJadeFilter,
-  highlight: highlightCodeJadeFilter,
-}
-
-// Configure marked
-marked.setOptions({
-  renderer: markedRenderer,
-  langPrefix: '',
-  highlight(code, lang) {
-    return highlight.getLanguage(lang) ? highlight.highlight(lang, code).value : undefined
-  },
-})
-
 handlebars.registerHelper('relative', hbsRelative)
 handlebars.registerHelper('eq', hbsEquals)
 handlebars.registerHelper('get', hbsGet)
@@ -92,7 +66,7 @@ metalsmith.use(drafts())
 metalsmith.use(log('Excluded draft pages'))
 
 metalsmith.use(
-  branch(['**/*.hbs', '**/*.pug', '!layouts/**', '**/*.md', '!_*/**/*.md', '!**/snippets/**'])
+  branch(['**/*.hbs', '**/*.json', '!layouts/**', '!**/snippets/**'])
     .use(drafts())
     .use(nav())
   )
@@ -103,11 +77,7 @@ metalsmith.use(define({
   icons: fs.readdirSync(path.join(cwd, 'icons')).map(file => ({
     name: file.replace(/\.svg$/, ''),
   })),
-  readme: fs.readFileSync(path.join(cwd, 'README.md'), 'utf8'),
   package: packageJson,
-  marked,
-  // basedir for layout files
-  basedir: pugBaseDir,
   process: {
     env: process.env,
   },
@@ -122,22 +92,13 @@ metalsmith.use(
 
 metalsmith.use(log('Prepared the html pages'))
 
-// Do the markdown pages
-metalsmith.use(
-  branch(['**/*.md', '!_*/**/*.md'])
-    .use(relative())
-    .use(markdown({
-      useMetadata: true,
-      marked,
-    }))
-)
-metalsmith.use(log('Compiled the markdown pages'))
-
 metalsmith.use(
   branch(['**/snippets/**/*.hbs'])
     .use(filepath({}))
+    // eslint-disable-next-line no-shadow
     .use((files, metalsmith, done) => {
-      _.forEach(files, file => {
+      _.forEach(files, (file) => {
+        // eslint-disable-next-line no-param-reassign
         file.link = file.link.replace('.hbs', '.html')
       })
       return done()
@@ -147,9 +108,11 @@ metalsmith.use(
       partials: 'docs/hbs-partials',
       rename: true,
     }))
+    // eslint-disable-next-line no-shadow
     .use((files, metalsmith, done) => {
       const metadata = metalsmith.metadata()
       metadata.snippets = {}
+      // eslint-disable-next-line no-shadow
       _.forEach((files, file) => {
         const name = file.link.substring(0, file.link.length - 5)
         metadata.snippets[name] = file.contents.toString()
@@ -165,8 +128,10 @@ metalsmith.use(
     '!**/snippets/**/*.hbs',
   ])
     .use(filepath({}))
+    // eslint-disable-next-line no-shadow
     .use((files, metalsmith, done) => {
-      _.forEach(files, file => {
+      _.forEach(files, (file) => {
+        // eslint-disable-next-line no-param-reassign
         file.link = file.link.replace('.hbs', '.html')
       })
       return done()
@@ -178,36 +143,6 @@ metalsmith.use(
     })))
 metalsmith.use(log('Compiled all handlebars pages'))
 
-metalsmith.use(log('Baking a cake...'))
-// Do the Pug pages
-metalsmith.use(
-  branch(['**/*.pug', '!layouts/**'])
-    .use(filepath({
-      absolute: true,
-    }))
-    .use((files, metalsmith, done) => {
-      _.forEach(files, file => {
-        file.link = file.link.replace('.pug', '.html')
-      })
-      return done()
-    })
-    .use(relative())
-    .use(collections({
-      navigation: {
-        sortBy: 'order',
-        refer: false,
-      },
-    }))
-    .use(pug({
-      useMetadata: true,
-      locals: metalsmith.metadata(),
-      pretty: true,
-      basedir: pugBaseDir,
-      filters: pugFilters,
-    }))
-)
-metalsmith.use(log('Compiled all pug pages'))
-
 // Duplicate snippets to be used as demo pages (will be wrapped with templates below)
 metalsmith.use(
   branch(['**/*.html'])
@@ -269,7 +204,10 @@ metalsmith.destination('./dist/docs/')
 // Function to run the magic
 metalsmith.build((err) => {
   if (err) {
-    console.log((new Date()).toLocaleTimeString(), 'Failed!', err)
+    // eslint-disable-next-line no-console
+    console.error((new Date()).toLocaleTimeString(), 'Failed!', err)
   }
-  console.log((new Date()).toLocaleTimeString(), 'Done!')
+
+  // eslint-disable-next-line no-console
+  console.info((new Date()).toLocaleTimeString(), 'Done!')
 })
diff --git a/lib/handlebars-highlight.js b/lib/handlebars-highlight.js
index 38d354c4..50b8fb93 100644
--- a/lib/handlebars-highlight.js
+++ b/lib/handlebars-highlight.js
@@ -1,7 +1,7 @@
 import handlebars from 'handlebars'
 import hljs from 'highlight.js'
 
-const highlight = function(opts) {
+function highlight(opts) {
   const markup = opts.fn(this).trim()
   const highlighted = hljs.highlight('html', markup)
 
diff --git a/lib/jade-filter-highlightcode.js b/lib/jade-filter-highlightcode.js
deleted file mode 100644
index 027637fe..00000000
--- a/lib/jade-filter-highlightcode.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import hljs from 'highlight.js'
-import pug from 'pug'
-import fm from 'front-matter'
-import handlebars from 'handlebars'
-
-const highlightCode = (text, options)  => {
-  const relative = to => to
-
-  if (options.renderPug) {
-    text = fm(text).body
-    text = pug.render(text, {
-      relative: relative,
-      filename: options.filename,
-      pretty: true,
-    })
-  }
-  if (options.renderHandlebars) {
-    const fmData = fm(text)
-    let template = handlebars.compile(fmData.body)
-    const context = {
-      filename: options.filename
-    }
-    Object.assign(context, fmData.attributes)
-    text = template(context)
-  }
-
-  return hljs.highlightAuto(text).value
-}
-
-export default highlightCode
diff --git a/lib/jade-filter-ignorefrontmatter.js b/lib/jade-filter-ignorefrontmatter.js
deleted file mode 100644
index 40a9e746..00000000
--- a/lib/jade-filter-ignorefrontmatter.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import fm from 'front-matter'
-import path from 'path'
-
-// Simple 'fallback' for metalsmith-relative
-const relative = to => to
-
-// basedir for includes
-const basedir = path.join(__dirname, '../docs')
-
-const ignoreFrontMatter = (jadeLang) =>
-  (text) => {
-    // Remove front matter
-    const file = fm(text)
-
-    // Render
-    const html = jadeLang.render(file.body, {
-      pretty: true,
-      relative,
-      basedir,
-    })
-
-    return html
-  }
-
-export default ignoreFrontMatter
diff --git a/lib/jade-filter-sample.js b/lib/jade-filter-sample.js
deleted file mode 100644
index 673e3045..00000000
--- a/lib/jade-filter-sample.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import highlightCode from './jade-filter-highlightcode'
-
-// Simple 'fallback' for metalsmith-relative
-const relative = to => to
-
-const template = `.example!= sample
-.highlight
-  pre.highlight__listing.hljs: code(class=lang)!= htmlSource`
-
-const sample = (jadeLang, jadeRuntime, jadeFilters) => {
-  let sampleIndex = 0
-
-  return (text, options) => {
-    sampleIndex++
-
-    const sampleNonPretty = jadeLang.render(text, {
-      pretty: false,
-      relative,
-    })
-
-    const htmlSource = highlightCode(jadeLang, jadeRuntime, jadeFilters)(text)
-
-    return jadeLang.render(template, {
-      pretty: true,
-      index: sampleIndex,
-      sample: sampleNonPretty,
-      htmlSource,
-      lang: options.lang,
-    })
-  }
-}
-
-export default sample
diff --git a/lib/marked-renderer.js b/lib/marked-renderer.js
deleted file mode 100644
index ca189c49..00000000
--- a/lib/marked-renderer.js
+++ /dev/null
@@ -1,141 +0,0 @@
-// See "https://github.com/chjj/marked" for possible hooks
-
-import marked from 'marked'
-
-const renderer = new marked.Renderer()
-
-/* eslint-disable no-underscore-dangle */
-renderer._slugify = function (text) {
-  const lower = text.toLowerCase()
-  return lower.replace(/[^\w]+/g, '-')
-}
-
-renderer._relative = function (link) {
-  return this.options.relative ?
-    this.options.relative(link) :
-    link
-}
-
-renderer.heading = function (text, level) {
-  const slug = this._slugify(text)
-  const l = 1 + parseInt(level, 10)
-  const classes = []
-
-  if (l === 2) {
-    classes.push('heading', 'heading--secondary')
-  }
-  if (l === 3) {
-    classes.push('heading', 'heading--tertiary')
-  }
-
-  const joinedClasses = classes.join(' ')
-
-  return `<h${l} id="${slug}" class="${joinedClasses}">
-      ${text}
-    </h${l}>`
-}
-
-renderer.hr = function () {
-  return '<hr class="hr" />'
-}
-
-renderer.image = function (href, title, text) {
-  return `<img
-  alt="${text}"
-  src="${this._relative(href)}"
-  title="${title}"
-  class="image image--responsive image--docs" />`
-}
-
-renderer.link = function (href, title, text) {
-  const isLocal = href.match(/^https?:\/\//i) === null
-  const url = isLocal ? this._relative(href) : href
-
-  return `<a
-      href="${url}"
-      class="link"
-      title="${title}">
-      ${text}
-    </a>`
-}
-
-renderer.blockquote = function (quote) {
-  return `<blockquote class="blockquote">
-    ${quote}
-  </blockquote>`
-}
-
-renderer.table = function (header, body) {
-  return `<table class="table table--docs">
-    <thead>
-      ${header}
-    </thead>
-    <tbody class="table__content">
-      ${body}
-    </tbody>
-  </table>`
-}
-
-renderer.tablerow = function (content, flags) {
-  const tagType = flags.header ? 'header' : 'row'
-
-  return `<tr class="table__${tagType}">
-      ${content}
-    </tr>`
-}
-
-renderer.tablecell = function (content, flags) {
-  // Attention: We ignore "flags.align"
-
-  if (flags.header) {
-    return `<th class="table__header__item">
-        ${content}
-      </th>`
-  }
-
-  return `<td class="table__row__item">
-      <div class="table__row__item__content">
-        ${content}
-      </div>
-    </td>`
-}
-
-renderer.paragraph = function (text) {
-  return `<p class="paragraph">${text}</p>`
-}
-
-renderer.list = function (body, ordered) {
-  const type = ordered ? 'ol' : 'ul'
-  const cls = ordered ? 'ordered' : 'unordered'
-
-  return `<${type} class="list list--${cls}">
-      ${body}
-    </${type}>`
-}
-
-renderer.listitem = function (text) {
-  return `<li class="list__item">
-    ${text}
-  </li>`
-}
-
-renderer.code = function (code, lang) {
-  const highlight = this.options.highlight
-
-  let out = highlight(code, lang)
-
-  if (!lang || !out) {
-    out = code
-
-    return `<pre class="highlight"><code class="highlight__listing hljs">${out}</code></pre>`
-  }
-
-  return `<pre class="highlight"><code class="highlight__listing hljs ${this.options.langPrefix}${lang}">${out}</code></pre>`
-}
-
-renderer.codespan = function (code) {
-  return `<code class="code">${code}</code>`
-}
-
-
-export default renderer
diff --git a/lib/metalsmith-sassdoc.js b/lib/metalsmith-sassdoc.js
index 73ec3a2f..141e6bea 100644
--- a/lib/metalsmith-sassdoc.js
+++ b/lib/metalsmith-sassdoc.js
@@ -20,26 +20,25 @@ function sassdocPlugin() {
       const fileComments = sassdocParser.parse(sass)
 
       _.forEach(fileComments, (comment) => {
-        const nameSlug = slug(comment.context.name, { lower: true })
-
         // Simplify interpolation from #{$var} to {var}
         // eslint-disable-next-line no-param-reassign
         comment.context.name = comment.context.name.replace(/#{\$(.*)}/, '{$1}')
 
+        const nameSlug = slug(comment.context.name, { lower: true })
+
         data.comments[comment.context.name] = comment
 
         // Add file to metalsmith so it will be processed in the
         // normal handlebars build
         // Content of the file will just be an include of
         // the partial sassdoc-template, which renders the comment
-        files[`api/${nameSlug}.hbs`] = {  // eslint-disable-line no-param-reassign
+        files[`api/${nameSlug}.json`] = { // eslint-disable-line no-param-reassign
           comment,
-          // TODO: Remove this property as soon as SassDoc/scss-comment-parser#24
-          // is merged
-          draft: true,
+          slug: nameSlug,
           title: comment.context.name,
-          nav: `side/api/${nameSlug}`,
-          contents: new Buffer('{{>sassdoc-template}}'),
+          nav: [`sassdoc/${nameSlug}`, `side/api/${nameSlug}`],
+          link: `/api/#${nameSlug}`,
+          contents: new Buffer(JSON.stringify(comment)),
         }
       })
     })
diff --git a/package.json b/package.json
index 6629c4fe..13ead468 100644
--- a/package.json
+++ b/package.json
@@ -91,17 +91,11 @@
     "babel-preset-es2015": "^6.1.18",
     "babel-preset-react": "^6.11.1",
     "babel-register": "^6.14.0",
-    "babelify": "^7.3.0",
     "better-npm-run": "0.0.11",
-    "browser-resolve": "^1.11.2",
     "browser-sync": "^2.16.0",
-    "browserify": "^13.0.1",
-    "browserify-incremental": "^3.1.1",
-    "browserify-shim": "^3.8.11",
     "cheet.js": "^0.3.3",
     "clean-webpack-plugin": "^0.1.10",
     "colors": "^1.1.2",
-    "concat-stream": "^1.5.2",
     "concurrently": "^2.2.0",
     "css-loader": "^0.25.0",
     "css-mqpacker": "^5.0.1",
@@ -112,9 +106,7 @@
     "eslint-plugin-import": "^1.14.0",
     "eslint-plugin-jsx-a11y": "^2.2.1",
     "eslint-plugin-react": "^6.2.0",
-    "event-stream": "^3.3.4",
     "express": "^4.14.0",
-    "extend": "^3.0.0",
     "extract-text-webpack-plugin": "^1.0.1",
     "front-matter": "^1.0.0",
     "handlebars": "^4.0.5",
@@ -124,15 +116,10 @@
     "jsdoc-babel": "^0.2.1",
     "jsdoc-to-markdown": "^2.0.0-alpha.15",
     "json-loader": "^0.5.4",
-    "jstransformer-markdown-it": "^1.0.0",
-    "jstransformer-marked": "^1.0.1",
     "lodash": "^3.10.1",
     "lunr": "^0.5.9",
-    "marked": "git+https://github.com/sventschui/marked",
-    "merge-stream": "^0.1.5",
     "metalsmith": "^1.0.1",
     "metalsmith-branch": "0.0.4",
-    "metalsmith-collections": "git+https://github.com/axa-ch/metalsmith-collections",
     "metalsmith-copy": "^0.2.1",
     "metalsmith-define": "1.0.0",
     "metalsmith-drafts": "0.0.1",
@@ -141,33 +128,21 @@
     "metalsmith-in-place": "^1.4.4",
     "metalsmith-layouts": "^1.6.5",
     "metalsmith-lunr": "^0.2.1",
-    "metalsmith-markdown": "git+https://github.com/axa-ch/metalsmith-markdown",
-    "metalsmith-pug": "^1.1.0",
     "metalsmith-relative": "^1.0.3",
     "metalsmith-watch": "^1.0.3",
-    "minimatch": "^3.0.3",
-    "mkdirp": "^0.5.1",
     "multimatch": "^2.1.0",
-    "node-notifier": "^4.3.1",
     "node-sass": "^3.10.0",
     "object-fit-polyfill": "^0.1.0",
-    "octonode": "^0.7.1",
     "open": "0.0.5",
     "postcss-loader": "^0.13.0",
     "postcss-pseudoelements": "^3.0.0",
-    "pug": "^2.0.0-beta6",
     "react-hot-loader": "^3.0.0-beta.5",
-    "run-sequence": "^0.3.6",
     "sass-lint": "^1.9.1",
     "sass-loader": "^4.0.2",
     "sassdoc": "^2.1.20",
     "strip-loader": "^0.1.2",
     "style-loader": "^0.13.1",
     "sync-files": "^1.0.3",
-    "through2": "^2.0.1",
-    "vinyl-buffer": "^1.0.0",
-    "vinyl-named": "^1.1.0",
-    "vinyl-source-stream": "^1.1.0",
     "webpack": "^1.13.2",
     "webpack-dev-middleware": "^1.6.1",
     "webpack-hot-middleware": "^2.12.2",
diff --git a/scss/style/utilities/_fade.scss b/scss/style/utilities/_fade.scss
index 64a9ca35..4cf97094 100644
--- a/scss/style/utilities/_fade.scss
+++ b/scss/style/utilities/_fade.scss
@@ -1,53 +1,155 @@
 @each $breakpoint in map-keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
+
+    /// Utility that makes an element fade in with a nice transition,
+    /// from the specified breakpoint and above.
+    ///
+    /// @see .fade-in-delayed-#{$breakpoint}-up
+    /// @see .fade-out-#{$breakpoint}-up
+    /// @see .fade-out-delayed-#{$breakpoint}-up
+    /// @see .fade-in-#{$breakpoint}-down
+    /// @see .fade-in-delayed-#{$breakpoint}-down
+    /// @see .fade-out-#{$breakpoint}-down
+    /// @see .fade-out-delayed-#{$breakpoint}-down
+    /// @example html - HTML Usage
+    ///   <div class="fade-in-xs-up">...</div>
     .fade-in-#{$breakpoint}-up {
+      transition: opacity $transition-normal $transition-easeout, visibility 0s linear;
       opacity: 1;
       visibility: visible;
-      transition: opacity $transition-normal $transition-easeout, visibility 0s linear;
     }
 
+    /// Utility that makes an element fade in with a nice transition and a
+    /// delay that is the length of an usual transition,
+    /// from the specified breakpoint and above.
+    ///
+    /// @see .fade-in-#{$breakpoint}-up
+    /// @see .fade-out-#{$breakpoint}-up
+    /// @see .fade-out-delayed-#{$breakpoint}-up
+    /// @see .fade-in-#{$breakpoint}-down
+    /// @see .fade-in-delayed-#{$breakpoint}-down
+    /// @see .fade-out-#{$breakpoint}-down
+    /// @see .fade-out-delayed-#{$breakpoint}-down
+    /// @example html - HTML Usage
+    ///   <div class="fade-in-delayed-xs-up">...</div>
     .fade-in-delayed-#{$breakpoint}-up {
+      transition: opacity $transition-normal $transition-easeout $transition-delay-normal, visibility 0s linear $transition-delay-normal;
       opacity: 1;
       visibility: visible;
-      transition: opacity $transition-normal $transition-easeout $transition-delay-normal, visibility 0s linear $transition-delay-normal;
     }
 
+    /// Utility that makes an element fade out with a nice transition
+    /// from the specified breakpoint and above.
+    ///
+    /// @see .fade-in-#{$breakpoint}-up
+    /// @see .fade-in-delayed-#{$breakpoint}-up
+    /// @see .fade-out-delayed-#{$breakpoint}-up
+    /// @see .fade-in-#{$breakpoint}-down
+    /// @see .fade-in-delayed-#{$breakpoint}-down
+    /// @see .fade-out-#{$breakpoint}-down
+    /// @see .fade-out-delayed-#{$breakpoint}-down
+    /// @example html - HTML Usage
+    ///   <div class="fade-out-xs-up">...</div>
     .fade-out-#{$breakpoint}-up {
+      transition: opacity $transition-normal $transition-easeout, visibility 0s linear $transition-delay-normal;
       opacity: 0;
       visibility: hidden;
-      transition: opacity $transition-normal $transition-easeout, visibility 0s linear $transition-delay-normal;
     }
 
+    /// Utility that makes an element fade out with a nice transition and a
+    /// delay that is the length of an usual transition,
+    /// from the specified breakpoint and above.
+    ///
+    /// @see .fade-in-#{$breakpoint}-up
+    /// @see .fade-in-delayed-#{$breakpoint}-up
+    /// @see .fade-out-#{$breakpoint}-up
+    /// @see .fade-in-#{$breakpoint}-down
+    /// @see .fade-in-delayed-#{$breakpoint}-down
+    /// @see .fade-out-#{$breakpoint}-down
+    /// @see .fade-out-delayed-#{$breakpoint}-down
+    /// @example html - HTML Usage
+    ///   <div class="fade-out-delayed-xs-up">...</div>
     .fade-out-delayed-#{$breakpoint}-up {
+      transition: opacity $transition-normal $transition-easeout $transition-delay-normal, visibility 0s linear ($transition-delay-normal + $transition-normal);
       opacity: 0;
       visibility: hidden;
-      transition: opacity $transition-normal $transition-easeout $transition-delay-normal, visibility 0s linear ($transition-delay-normal + $transition-normal);
     }
   }
 
   @include media-breakpoint-down($breakpoint) {
+
+    /// Utility that makes an element fade in with a nice transition,
+    /// from the specified breakpoint and below.
+    ///
+    /// @see .fade-in-#{$breakpoint}-up
+    /// @see .fade-in-delayed-#{$breakpoint}-up
+    /// @see .fade-out-#{$breakpoint}-up
+    /// @see .fade-out-delayed-#{$breakpoint}-up
+    /// @see .fade-in-delayed-#{$breakpoint}-down
+    /// @see .fade-out-#{$breakpoint}-down
+    /// @see .fade-out-delayed-#{$breakpoint}-down
+    /// @example html - HTML Usage
+    ///   <div class="fade-in-md-down">...</div>
     .fade-in-#{$breakpoint}-down {
+      transition: opacity $transition-normal $transition-easeout, visibility 0s linear;
       opacity: 1;
       visibility: visible;
-      transition: opacity $transition-normal $transition-easeout, visibility 0s linear;
     }
 
+    /// Utility that makes an element fade in with a nice transition and a
+    /// delay that is the length of an usual transition,
+    /// from the specified breakpoint and below.
+    ///
+    /// @see .fade-in-#{$breakpoint}-up
+    /// @see .fade-in-delayed-#{$breakpoint}-up
+    /// @see .fade-out-#{$breakpoint}-up
+    /// @see .fade-out-delayed-#{$breakpoint}-up
+    /// @see .fade-in-#{$breakpoint}-down
+    /// @see .fade-out-#{$breakpoint}-down
+    /// @see .fade-out-delayed-#{$breakpoint}-down
+    /// @example html - HTML Usage
+    ///   <div class="fade-in-delayed-md-down">...</div>
     .fade-in-delayed-#{$breakpoint}-down {
+      transition: opacity $transition-normal $transition-easeout $transition-delay-normal, visibility 0s linear $transition-delay-normal;
       opacity: 1;
       visibility: visible;
-      transition: opacity $transition-normal $transition-easeout $transition-delay-normal, visibility 0s linear $transition-delay-normal;
     }
 
+    /// Utility that makes an element fade out with a nice transition
+    /// from the specified breakpoint and below.
+    ///
+    /// @see .fade-in-#{$breakpoint}-up
+    /// @see .fade-in-delayed-#{$breakpoint}-up
+    /// @see .fade-out-#{$breakpoint}-up
+    /// @see .fade-out-delayed-#{$breakpoint}-up
+    /// @see .fade-in-#{$breakpoint}-down
+    /// @see .fade-in-delayed-#{$breakpoint}-down
+    /// @see .fade-out-delayed-#{$breakpoint}-down
+    /// @example html - HTML Usage
+    ///   <div class="fade-out-md-down">...</div>
     .fade-out-#{$breakpoint}-down {
+      transition: opacity $transition-normal $transition-easeout, visibility 0s linear $transition-delay-normal;
       opacity: 0;
       visibility: hidden;
-      transition: opacity $transition-normal $transition-easeout, visibility 0s linear $transition-delay-normal;
     }
 
+    /// Utility that makes an element fade out with a nice transition and a
+    /// delay that is the length of an usual transition,
+    /// from the specified breakpoint and below.
+    ///
+    /// @see .fade-in-#{$breakpoint}-up
+    /// @see .fade-in-delayed-#{$breakpoint}-up
+    /// @see .fade-out-#{$breakpoint}-up
+    /// @see .fade-out-delayed-#{$breakpoint}-up
+    /// @see .fade-in-#{$breakpoint}-down
+    /// @see .fade-in-delayed-#{$breakpoint}-down
+    /// @see .fade-out-#{$breakpoint}-down
+    /// @example html - HTML Usage
+    ///   <div class="fade-out-delayed-md-down">...</div>
     .fade-out-delayed-#{$breakpoint}-down {
+      transition: opacity $transition-normal $transition-easeout $transition-delay-normal, visibility 0s linear ($transition-delay-normal + $transition-normal);
       opacity: 0;
       visibility: hidden;
-      transition: opacity $transition-normal $transition-easeout $transition-delay-normal, visibility 0s linear ($transition-delay-normal + $transition-normal);
     }
   }
 }
diff --git a/webpack/browsersync-dev-server.js b/webpack/browsersync-dev-server.js
index b369a08f..b3cb8885 100644
--- a/webpack/browsersync-dev-server.js
+++ b/webpack/browsersync-dev-server.js
@@ -23,11 +23,14 @@ const docsPath = path.resolve(__dirname, '..', 'dist', 'docs')
  * Run Browsersync and use middleware for Hot Module Replacement
  */
 browserSync({
+  logFileChanges: false,
   server: {
     baseDir: [docsPath],
 
     middleware: [
       webpackDevMiddleware(bundler, {
+        quiet: true,
+        noInfo: true,
         // IMPORTANT: dev middleware can't access config, so we should
         // provide publicPath by ourselves
         publicPath: webpackConfig.output.publicPath,