diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index 9dd25073..2ae6e99c 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -1,11 +1,10 @@
 import { version } from '../../package.json';
 
 export default {
-  lang: 'en-US',
-  title: 'Muuri',
-  description: 'Build all kinds of layouts',
+  title: 'Muuri Docs',
+  description: 'Documentation for Muuri JavaScript library.',
 
-  head: [['link', { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]],
+  head: [['link', { rel: 'icon', type: 'image/svg+xml', href: '/muuri-icon.svg' }]],
 
   lastUpdated: true,
 
@@ -13,7 +12,7 @@ export default {
   // cleanUrls: 'without-subfolders',
 
   themeConfig: {
-    logo: '/logo.svg',
+    logo: '/muuri-icon.svg',
 
     nav: nav(),
 
@@ -22,17 +21,12 @@ export default {
     },
 
     editLink: {
-      pattern: 'https://github.com/haltu/muuri/edit/main/docs/:path',
+      pattern: 'https://github.com/haltu/muuri/edit/master/docs/:path',
       text: 'Edit this page on GitHub',
     },
 
     socialLinks: [{ icon: 'github', link: 'https://github.com/haltu/muuri' }],
 
-    footer: {
-      message: 'Released under the MIT License.',
-      copyright: 'Copyright © 2017-present Niklas Rämö',
-    },
-
     algolia: {
       appId: 'xxxxx',
       apiKey: 'xxxxx',
@@ -48,12 +42,6 @@ export default {
 
 function nav() {
   return [
-    { text: 'Docs', link: '/what-is-muuri', activeMatch: '/' },
-    {
-      text: 'Examples',
-      link: '/examples',
-      activeMatch: '/examples',
-    },
     {
       text: version,
       items: [
@@ -73,18 +61,16 @@ function nav() {
 function sidebarGuide() {
   return [
     {
-      text: 'Introduction',
-      collapsible: true,
+      collapsible: false,
       items: [
-        { text: 'What is Muuri?', link: '/' },
+        { text: 'Introduction', link: '/' },
         { text: 'Getting Started', link: '/getting-started' },
-        { text: 'Motivation', link: '/motivation' },
-        { text: 'Credits', link: '/credits' },
+        { text: 'Examples', link: '/examples' },
       ],
     },
     {
       text: 'API',
-      collapsible: true,
+      collapsible: false,
       items: [
         { text: 'Grid Constructor', link: '/grid-constructor' },
         { text: 'Grid Options', link: '/grid-options' },
@@ -93,10 +79,5 @@ function sidebarGuide() {
         { text: 'Item Methods', link: '/item-methods' },
       ],
     },
-    {
-      text: 'Examples',
-      collapsible: true,
-      items: [{ text: 'Demos', link: '/examples' }],
-    },
   ];
 }
diff --git a/docs/credits.md b/docs/credits.md
deleted file mode 100644
index ccfbcc31..00000000
--- a/docs/credits.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# Credits
-
-**Created and maintained by [Niklas Rämö](https://github.com/niklasramo).**
-
-- This project owes much to David DeSandro's [Masonry](http://masonry.desandro.com/), [Packery](http://packery.metafizzy.co/) and [Isotope](https://isotope.metafizzy.co/) libraries. You should go ahead and check them out right now if you haven't yet. Thanks Dave!
-- Jukka Jylänki's [survey](https://github.com/juj/RectangleBinPack) "A Thousand Ways to Pack the Bin - A Practical Approach to Two-Dimensional Rectangle Bin Packing" came in handy when building Muuri's layout algorithms. Thanks Jukka!
-- Big thanks to the people behind [Web Animations polyfill](https://github.com/web-animations/web-animations-js) for making it possible to use Web Animations API reliably across browsers today.
-- [Haltu Oy](http://www.haltu.fi/) was responsible for initiating this project in the first place and funded the initial development. Thanks Haltu!
diff --git a/docs/examples.md b/docs/examples.md
index a4bcb053..dfca8404 100644
--- a/docs/examples.md
+++ b/docs/examples.md
@@ -2,7 +2,7 @@
 
 ## Barebones Grid
 
-<iframe height="300" style="width: 100%;" scrolling="no" title="Muuri: barebones grid" src="https://codepen.io/niklasramo/embed/preview/wpwNjK?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+<iframe height="400" style="width: 100%;" scrolling="no" title="Muuri: barebones grid" src="https://codepen.io/niklasramo/embed/preview/wpwNjK?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
   See the Pen <a href="https://codepen.io/niklasramo/pen/wpwNjK">
   Muuri: barebones grid</a> by Niklas Rämö (<a href="https://codepen.io/niklasramo">@niklasramo</a>)
   on <a href="https://codepen.io">CodePen</a>.
@@ -10,7 +10,7 @@
 
 ## Basic Sorting
 
-<iframe height="300" style="width: 100%;" scrolling="no" title="Muuri: basic sorting" src="https://codepen.io/niklasramo/embed/preview/EvXoOG?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+<iframe height="400" style="width: 100%;" scrolling="no" title="Muuri: basic sorting" src="https://codepen.io/niklasramo/embed/preview/EvXoOG?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
   See the Pen <a href="https://codepen.io/niklasramo/pen/EvXoOG">
   Muuri: basic sorting</a> by Niklas Rämö (<a href="https://codepen.io/niklasramo">@niklasramo</a>)
   on <a href="https://codepen.io">CodePen</a>.
@@ -18,7 +18,7 @@
 
 ## Basic Vertical Grid With Dragging
 
-<iframe height="300" style="width: 100%;" scrolling="no" title="Muuri: basic vertical grid with dragging" src="https://codepen.io/niklasramo/embed/preview/jyJLGM?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+<iframe height="400" style="width: 100%;" scrolling="no" title="Muuri: basic vertical grid with dragging" src="https://codepen.io/niklasramo/embed/preview/jyJLGM?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
   See the Pen <a href="https://codepen.io/niklasramo/pen/jyJLGM">
   Muuri: basic vertical grid with dragging</a> by Niklas Rämö (<a href="https://codepen.io/niklasramo">@niklasramo</a>)
   on <a href="https://codepen.io">CodePen</a>.
@@ -26,7 +26,7 @@
 
 ## Basic Horizontal Grid With Dragging
 
-<iframe height="300" style="width: 100%;" scrolling="no" title="Muuri: basic horizontal grid with dragging" src="https://codepen.io/niklasramo/embed/preview/xPoVPe?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+<iframe height="400" style="width: 100%;" scrolling="no" title="Muuri: basic horizontal grid with dragging" src="https://codepen.io/niklasramo/embed/preview/xPoVPe?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
   See the Pen <a href="https://codepen.io/niklasramo/pen/xPoVPe">
   Muuri: basic horizontal grid with dragging</a> by Niklas Rämö (<a href="https://codepen.io/niklasramo">@niklasramo</a>)
   on <a href="https://codepen.io">CodePen</a>.
@@ -34,7 +34,7 @@
 
 ## Multiple Instances
 
-<iframe height="300" style="width: 100%;" scrolling="no" title="Muuri demo: multiple instances" src="https://codepen.io/niklasramo/embed/preview/wJKMQz?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+<iframe height="400" style="width: 100%;" scrolling="no" title="Muuri demo: multiple instances" src="https://codepen.io/niklasramo/embed/preview/wJKMQz?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
   See the Pen <a href="https://codepen.io/niklasramo/pen/wJKMQz">
   Muuri demo: multiple instances</a> by Niklas Rämö (<a href="https://codepen.io/niklasramo">@niklasramo</a>)
   on <a href="https://codepen.io">CodePen</a>.
@@ -42,7 +42,7 @@
 
 ## Links As Grid Items
 
-<iframe height="300" style="width: 100%;" scrolling="no" title="Muuri: links as grid items" src="https://codepen.io/niklasramo/embed/preview/ZvzVpg?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+<iframe height="400" style="width: 100%;" scrolling="no" title="Muuri: links as grid items" src="https://codepen.io/niklasramo/embed/preview/ZvzVpg?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
   See the Pen <a href="https://codepen.io/niklasramo/pen/ZvzVpg">
   Muuri: links as grid items</a> by Niklas Rämö (<a href="https://codepen.io/niklasramo">@niklasramo</a>)
   on <a href="https://codepen.io">CodePen</a>.
@@ -50,7 +50,7 @@
 
 ## Prevent Dragging For Specific Items
 
-<iframe height="300" style="width: 100%;" scrolling="no" title="Muuri: prevent dragging for specific items" src="https://codepen.io/niklasramo/embed/preview/LOzZPo?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+<iframe height="400" style="width: 100%;" scrolling="no" title="Muuri: prevent dragging for specific items" src="https://codepen.io/niklasramo/embed/preview/LOzZPo?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
   See the Pen <a href="https://codepen.io/niklasramo/pen/LOzZPo">
   Muuri: prevent dragging for specific items</a> by Niklas Rämö (<a href="https://codepen.io/niklasramo">@niklasramo</a>)
   on <a href="https://codepen.io">CodePen</a>.
@@ -58,7 +58,7 @@
 
 ## Custom Layout Algorithm
 
-<iframe height="300" style="width: 100%;" scrolling="no" title="Muuri: custom layout algorithm" src="https://codepen.io/niklasramo/embed/preview/LLbLLd?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+<iframe height="400" style="width: 100%;" scrolling="no" title="Muuri: custom layout algorithm" src="https://codepen.io/niklasramo/embed/preview/LLbLLd?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
   See the Pen <a href="https://codepen.io/niklasramo/pen/LLbLLd">
   Muuri: custom layout algorithm</a> by Niklas Rämö (<a href="https://codepen.io/niklasramo">@niklasramo</a>)
   on <a href="https://codepen.io">CodePen</a>.
@@ -66,7 +66,7 @@
 
 ## Simple Kanban (With Scrolling Containers)
 
-<iframe height="300" style="width: 100%;" scrolling="no" title="Muuri: simple kanban (with scrolling containers)" src="https://codepen.io/niklasramo/embed/preview/BrYaOp?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+<iframe height="400" style="width: 100%;" scrolling="no" title="Muuri: simple kanban (with scrolling containers)" src="https://codepen.io/niklasramo/embed/preview/BrYaOp?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
   See the Pen <a href="https://codepen.io/niklasramo/pen/BrYaOp">
   Muuri: simple kanban (with scrolling containers)</a> by Niklas Rämö (<a href="https://codepen.io/niklasramo">@niklasramo</a>)
   on <a href="https://codepen.io">CodePen</a>.
@@ -74,7 +74,7 @@
 
 ## Images Inside Grid Items
 
-<iframe height="300" style="width: 100%;" scrolling="no" title="Muuri: images inside grid items" src="https://codepen.io/niklasramo/embed/preview/xWYdmp?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+<iframe height="400" style="width: 100%;" scrolling="no" title="Muuri: images inside grid items" src="https://codepen.io/niklasramo/embed/preview/xWYdmp?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
   See the Pen <a href="https://codepen.io/niklasramo/pen/xWYdmp">
   Muuri: images inside grid items</a> by Niklas Rämö (<a href="https://codepen.io/niklasramo">@niklasramo</a>)
   on <a href="https://codepen.io">CodePen</a>.
@@ -82,7 +82,7 @@
 
 ## Saving And Loading Layout
 
-<iframe height="300" style="width: 100%;" scrolling="no" title="Muuri: saving and loading layout" src="https://codepen.io/niklasramo/embed/preview/YveqNN?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+<iframe height="400" style="width: 100%;" scrolling="no" title="Muuri: saving and loading layout" src="https://codepen.io/niklasramo/embed/preview/YveqNN?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
   See the Pen <a href="https://codepen.io/niklasramo/pen/YveqNN">
   Muuri: saving and loading layout</a> by Niklas Rämö (<a href="https://codepen.io/niklasramo">@niklasramo</a>)
   on <a href="https://codepen.io">CodePen</a>.
@@ -90,7 +90,7 @@
 
 ## Clone Item Back To Original Grid When Dropping To Another Grid
 
-<iframe height="300" style="width: 100%;" scrolling="no" title="Muuri demo: clone item back to original grid when dropping to another grid" src="https://codepen.io/niklasramo/embed/preview/zPVBLq?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+<iframe height="400" style="width: 100%;" scrolling="no" title="Muuri demo: clone item back to original grid when dropping to another grid" src="https://codepen.io/niklasramo/embed/preview/zPVBLq?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
   See the Pen <a href="https://codepen.io/niklasramo/pen/zPVBLq">
   Muuri demo: clone item back to original grid when dropping to another grid</a> by Niklas Rämö (<a href="https://codepen.io/niklasramo">@niklasramo</a>)
   on <a href="https://codepen.io">CodePen</a>.
@@ -98,7 +98,7 @@
 
 ## Blocked First Item
 
-<iframe height="300" style="width: 100%;" scrolling="no" title="Muuri: blocked first item" src="https://codepen.io/niklasramo/embed/preview/EEdmJr?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+<iframe height="400" style="width: 100%;" scrolling="no" title="Muuri: blocked first item" src="https://codepen.io/niklasramo/embed/preview/EEdmJr?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
   See the Pen <a href="https://codepen.io/niklasramo/pen/EEdmJr">
   Muuri: blocked first item</a> by Niklas Rämö (<a href="https://codepen.io/niklasramo">@niklasramo</a>)
   on <a href="https://codepen.io">CodePen</a>.
@@ -106,7 +106,7 @@
 
 ## Drag Start Delay On Touch
 
-<iframe height="300" style="width: 100%;" scrolling="no" title="Muuri: drag start delay on touch" src="https://codepen.io/niklasramo/embed/preview/WNRLwEV?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+<iframe height="400" style="width: 100%;" scrolling="no" title="Muuri: drag start delay on touch" src="https://codepen.io/niklasramo/embed/preview/WNRLwEV?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
   See the Pen <a href="https://codepen.io/niklasramo/pen/WNRLwEV">
   Muuri: drag start delay on touch</a> by Niklas Rämö (<a href="https://codepen.io/niklasramo">@niklasramo</a>)
   on <a href="https://codepen.io">CodePen</a>.
diff --git a/docs/getting-started.md b/docs/getting-started.md
index b8220c10..7ec51e73 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -58,9 +58,7 @@ Or link directly:
   <div class="item">
     <div class="item-content">
       <!-- Safe zone, enter your custom markup -->
-      <div class="my-custom-content">
-        Yippee!
-      </div>
+      <div class="my-custom-content">Yippee!</div>
       <!-- Safe zone ends -->
     </div>
   </div>
@@ -113,4 +111,4 @@ The bare minimum configuration is demonstrated below. You must always provide th
 var grid = new Muuri('.grid');
 ```
 
-You can view this little tutorial demo [here](https://codepen.io/niklasramo/pen/wpwNjK). After that you might want to check some [other demos](https://codepen.io/collection/AWopag/) as well.
+You can view this little tutorial demo [here](https://codepen.io/niklasramo/pen/wpwNjK). After that you might want to check some [examples](/examples.html) as well.
diff --git a/docs/grid-constructor.md b/docs/grid-constructor.md
index f35663c3..ea559520 100644
--- a/docs/grid-constructor.md
+++ b/docs/grid-constructor.md
@@ -1,4 +1,4 @@
-# Grid constructor
+# Grid Constructor
 
 `Muuri` is a constructor function and should be always instantiated with the `new` keyword. For the sake of clarity, we refer to a Muuri instance as _grid_ throughout the documentation.
 
diff --git a/docs/grid-events.md b/docs/grid-events.md
index e940f8e5..25c61351 100644
--- a/docs/grid-events.md
+++ b/docs/grid-events.md
@@ -1,4 +1,6 @@
-## _event:_ synchronize
+# Grid Events
+
+## synchronize
 
 Triggered after item elements are synchronized via `grid.synchronize()`.
 
@@ -10,11 +12,11 @@ grid.on('synchronize', function () {
 });
 ```
 
-## _event:_ layoutStart
+## layoutStart
 
 Triggered when the the layout procedure begins. More specifically, this event is emitted right after new _layout_ has been generated, internal item positions updated and grid element's dimensions updated. After this event is emitted the items in the layout will be positioned to their new positions. So if you e.g. want to react to grid element dimension changes this is a good place to do that.
 
-**Arguments**
+**Listener parameters**
 
 - **items** &nbsp;&mdash;&nbsp; _array_
   - The items that are about to be positioned.
@@ -29,11 +31,11 @@ grid.on('layoutStart', function (items, isInstant) {
 });
 ```
 
-## _event:_ layoutEnd
+## layoutEnd
 
 Triggered after the layout procedure has finished, successfully. Note that if you abort a layout procedure by calling `grid.layout()` _before_ items have finished positioning, this event will not be emitted for the aborted layout procedure. In such a case `layoutAbort` will be emitted instead.
 
-**Arguments**
+**Listener parameters**
 
 - **items** &nbsp;&mdash;&nbsp; _array_
   - The items that were positioned. Note that these items are always identical to what the _layoutStart_ event's callback receives as it's argument.
@@ -52,11 +54,11 @@ grid.on('layoutEnd', function (items) {
 });
 ```
 
-## _event:_ layoutAbort
+## layoutAbort
 
 Triggered if you start a new layout process (`grid.layout()`) while the current layout process is still busy positioning items. Note that this event is not triggered if you start a new layout process while the layout is being computed and the items have not yet started positioning.
 
-**Arguments**
+**Listener parameters**
 
 - **items** &nbsp;&mdash;&nbsp; _array_
   - The items that were attempted to be positioned. Note that these items are always identical to what the _layoutStart_ event's callback receives as it's argument.
@@ -75,11 +77,11 @@ grid.on('layoutAbort', function (items) {
 });
 ```
 
-## _event:_ add
+## add
 
 Triggered after `grid.add()` is called.
 
-**Arguments**
+**Listener parameters**
 
 - **items** &nbsp;&mdash;&nbsp; _array_
   - The items that were successfully added.
@@ -92,11 +94,11 @@ grid.on('add', function (items) {
 });
 ```
 
-## _event:_ remove
+## remove
 
 Triggered after `grid.remove()` is called.
 
-**Arguments**
+**Listener parameters**
 
 - **items** &nbsp;&mdash;&nbsp; _array_
   - The items that were successfully removed.
@@ -111,11 +113,11 @@ grid.on('remove', function (items, indices) {
 });
 ```
 
-## _event:_ showStart
+## showStart
 
 Triggered after `grid.show()` is called, just before the items are shown.
 
-**Arguments**
+**Listener parameters**
 
 - **items** &nbsp;&mdash;&nbsp; _array_
   - The items that are about to be shown.
@@ -128,14 +130,14 @@ grid.on('showStart', function (items) {
 });
 ```
 
-## _event:_ showEnd
+## showEnd
 
 Triggered after `grid.show()` is called, after the items are shown.
 
-**Arguments**
+**Listener parameters**
 
 - **items** &nbsp;&mdash;&nbsp; _array_
-  - The items that were successfully shown without interruptions. If you, for example, call `grid.hide()` to some of the items that are currently being shown, those items will be omitted from this argument.
+  - The items that were successfully shown without interruptions. If you, for example, call `grid.hide()` to some of the items that are currently being shown, those items will be omitted from this parameter.
 
 **Examples**
 
@@ -145,11 +147,11 @@ grid.on('showEnd', function (items) {
 });
 ```
 
-## _event:_ hideStart
+## hideStart
 
 Triggered after `grid.hide()` is called, just before the items are hidden.
 
-**Arguments**
+**Listener parameters**
 
 - **items** &nbsp;&mdash;&nbsp; _array_
   - The items that are about to be hidden.
@@ -162,14 +164,14 @@ grid.on('hideStart', function (items) {
 });
 ```
 
-## _event:_ hideEnd
+## hideEnd
 
 Triggered after `grid.hide()` is called, after the items are hidden.
 
-**Arguments**
+**Listener parameters**
 
 - **items** &nbsp;&mdash;&nbsp; _array_
-  - The items that were successfully hidden without interruptions. If you, for example, call `grid.show()` to some of the items that are currently being hidden, those items will be omitted from this argument.
+  - The items that were successfully hidden without interruptions. If you, for example, call `grid.show()` to some of the items that are currently being hidden, those items will be omitted from this parameter.
 
 **Examples**
 
@@ -179,11 +181,11 @@ grid.on('hideEnd', function (items) {
 });
 ```
 
-## _event:_ filter
+## filter
 
 Triggered after `grid.filter()` is called.
 
-**Arguments**
+**Listener parameters**
 
 - **shownItems** &nbsp;&mdash;&nbsp; _array_
   - The items that are shown.
@@ -199,11 +201,11 @@ grid.on('filter', function (shownItems, hiddenItems) {
 });
 ```
 
-## _event:_ sort
+## sort
 
 Triggered after `grid.sort()` is called.
 
-**Arguments**
+**Listener parameters**
 
 - **currentOrder** &nbsp;&mdash;&nbsp; _array_
   - All items in their current order.
@@ -219,11 +221,11 @@ grid.on('sort', function (currentOrder, previousOrder) {
 });
 ```
 
-## _event:_ move
+## move
 
 Triggered after `grid.move()` is called or when the grid is sorted during drag. Note that this is event not triggered when an item is dragged into another grid.
 
-**Arguments**
+**Listener parameters**
 
 - **data** &nbsp;&mdash;&nbsp; _object_
   - **data.item** &nbsp;&mdash;&nbsp; _Muuri.Item_
@@ -243,11 +245,11 @@ grid.on('move', function (data) {
 });
 ```
 
-## _event:_ send
+## send
 
 Triggered for the originating grid in the end of the _send process_ (after `grid.send()` is called or when an item is dragged into another grid). Note that this event is called _before_ the item's layout starts.
 
-**Arguments**
+**Listener parameters**
 
 - **data** &nbsp;&mdash;&nbsp; _object_
   - **data.item** &nbsp;&mdash;&nbsp; _Muuri.Item_
@@ -269,11 +271,11 @@ grid.on('send', function (data) {
 });
 ```
 
-## _event:_ beforeSend
+## beforeSend
 
 Triggered for the originating grid in the beginning of the _send process_ (after `grid.send()` is called or when an item is dragged into another grid). This event is highly useful in situations where you need to manipulate the sent item (freeze it's dimensions for example) before it is appended to it's temporary layout container as defined in [send method options](#gridsend-item-grid-position-options-).
 
-**Arguments**
+**Listener parameters**
 
 - **data** &nbsp;&mdash;&nbsp; _object_
   - **data.item** &nbsp;&mdash;&nbsp; _Muuri.Item_
@@ -295,11 +297,11 @@ grid.on('beforeSend', function (data) {
 });
 ```
 
-## _event:_ receive
+## receive
 
 Triggered for the receiving grid in the end of the _send process_ (after `grid.send()` is called or when an item is dragged into another grid). Note that this event is called _before_ the item's layout starts.
 
-**Arguments**
+**Listener parameters**
 
 - **data** &nbsp;&mdash;&nbsp; _object_
   - **data.item** &nbsp;&mdash;&nbsp; _Muuri.Item_
@@ -321,11 +323,11 @@ grid.on('receive', function (data) {
 });
 ```
 
-## _event:_ beforeReceive
+## beforeReceive
 
 Triggered for the receiving grid in the beginning of the _send process_ (after `grid.send()` is called or when an item is dragged into another grid). This event is highly useful in situations where you need to manipulate the received item (freeze it's dimensions for example) before it is appended to it's temporary layout container as defined in [send method options](#gridsend-item-grid-position-options-).
 
-**Arguments**
+**Listener parameters**
 
 - **data** &nbsp;&mdash;&nbsp; _object_
   - **data.item** &nbsp;&mdash;&nbsp; _Muuri.Item_
@@ -347,11 +349,11 @@ grid.on('beforeReceive', function (data) {
 });
 ```
 
-## _event:_ dragInit
+## dragInit
 
 Triggered in the beginning of the _drag start_ process when dragging of an item begins. This event is highly useful in situations where you need to manipulate the dragged item (freeze it's dimensions for example) before it is appended to the [dragContainer](#dragcontainer-).
 
-**Arguments**
+**Listener parameters**
 
 - **item** &nbsp;&mdash;&nbsp; _Muuri.Item_
   - The dragged item.
@@ -367,11 +369,11 @@ grid.on('dragInit', function (item, event) {
 });
 ```
 
-## _event:_ dragStart
+## dragStart
 
 Triggered in the end of the _drag start_ process when dragging of an item begins.
 
-**Arguments**
+**Listener parameters**
 
 - **item** &nbsp;&mdash;&nbsp; _Muuri.Item_
   - The dragged item.
@@ -387,11 +389,11 @@ grid.on('dragStart', function (item, event) {
 });
 ```
 
-## _event:_ dragMove
+## dragMove
 
 Triggered every time a dragged item is _moved_. Note that Muuri has an automatic throttling system which makes sure that this event is triggered at maximum once in an animation frame.
 
-**Arguments**
+**Listener parameters**
 
 - **item** &nbsp;&mdash;&nbsp; _Muuri.Item_
   - The dragged item.
@@ -407,11 +409,11 @@ grid.on('dragMove', function (item, event) {
 });
 ```
 
-## _event:_ dragScroll
+## dragScroll
 
 Triggered when any of the scroll parents of a dragged item is scrolled.
 
-**Arguments**
+**Listener parameters**
 
 - **item** &nbsp;&mdash;&nbsp; _Muuri.Item_
   - The dragged item.
@@ -427,11 +429,11 @@ grid.on('dragScroll', function (item, event) {
 });
 ```
 
-## _event:_ dragEnd
+## dragEnd
 
 Triggered when dragged item is released and the drag process ends.
 
-**Arguments**
+**Listener parameters**
 
 - **item** &nbsp;&mdash;&nbsp; _Muuri.Item_
   - The dragged item.
@@ -447,11 +449,11 @@ grid.on('dragEnd', function (item, event) {
 });
 ```
 
-## _event:_ dragReleaseStart
+## dragReleaseStart
 
 Triggered when a dragged item is released (always after `dragEnd` event).
 
-**Arguments**
+**Listener parameters**
 
 - **item** &nbsp;&mdash;&nbsp; _Muuri.Item_
   - The released item.
@@ -464,11 +466,11 @@ grid.on('dragReleaseStart', function (item) {
 });
 ```
 
-## _event:_ dragReleaseEnd
+## dragReleaseEnd
 
 Triggered after released item has finished it's position animation.
 
-**Arguments**
+**Listener parameters**
 
 - **item** &nbsp;&mdash;&nbsp; _Muuri.Item_
   - The released item.
@@ -481,7 +483,7 @@ grid.on('dragReleaseEnd', function (item) {
 });
 ```
 
-## _event:_ destroy
+## destroy
 
 Triggered after grid is destroyed.
 
diff --git a/docs/grid-methods.md b/docs/grid-methods.md
index 8b537205..391ecd5a 100644
--- a/docs/grid-methods.md
+++ b/docs/grid-methods.md
@@ -1,4 +1,8 @@
-## grid.getElement()
+# Grid Methods
+
+## getElement
+
+`grid.getElement()`
 
 Get the grid element.
 
@@ -10,7 +14,9 @@ Get the grid element.
 var elem = grid.getElement();
 ```
 
-## grid.getItem( target )
+## getItem
+
+`grid.getItem( target )`
 
 Get a single grid item by element or by index. Target can also be a `Muuri.Item` instance in which case the function returns the item if it exists within related `Muuri` instance. If nothing is found with the provided target, `null` is returned.
 
@@ -31,7 +37,9 @@ var itemA = grid.getItem(0);
 var itemB = grid.getItem(someElement);
 ```
 
-## grid.getItems( [targets] )
+## getItems
+
+`grid.getItems( [targets] )`
 
 Get all items in the grid. Optionally you can provide specific targets (indices or elements).
 
@@ -64,7 +72,9 @@ var firstItem = grid.getItems(0)[0];
 var items = grid.getItems([elemA, elemB]);
 ```
 
-## grid.refreshItems( [items], [force] )
+## refreshItems
+
+`grid.refreshItems( [items], [force] )`
 
 Update the cached dimensions of the instance's items. By default all the items are refreshed, but you can also provide an array of target items as the first argument if you want to refresh specific items. Note that all hidden items are not refreshed by default since their `display` property is `'none'` and their dimensions are therefore not readable from the DOM. However, if you do want to force update hidden item dimensions too you can provide `true` as the second argument, which makes the elements temporarily visible while their dimensions are being read.
 
@@ -94,7 +104,9 @@ grid.refreshItems([0, someElem, someItem]);
 grid.refreshItems([0, someElem, someHiddenItem], true);
 ```
 
-## grid.refreshSortData( [items] )
+## refreshSortData
+
+`grid.refreshSortData( [items] )`
 
 Refresh the sort data of the grid's items.
 
@@ -117,7 +129,9 @@ grid.refreshSortData();
 grid.refreshSortData([0, someElem, someItem]);
 ```
 
-## grid.synchronize()
+## synchronize
+
+`grid.synchronize()`
 
 Synchronize the item elements in the DOM to match the order of the items in the grid. This comes handy if you need to keep the DOM structure matched with the order of the items. Note that if an item's element is not currently a child of the grid element (if it is dragged for example) it is ignored and left untouched. The reason why item elements are not kept in sync automatically is that there's rarely a need for that as they are absolutely positioned elements.
 
@@ -136,7 +150,9 @@ grid.move(0, -1);
 grid.synchronize();
 ```
 
-## grid.layout( [instant], [callback] )
+## layout
+
+`grid.layout( [instant], [callback] )`
 
 Calculate item positions and move items to their calculated positions, unless they are already positioned correctly. The grid's height/width (depends on the layout algorithm) is also adjusted according to the position of the items.
 
@@ -173,7 +189,9 @@ grid.layout(function (items, hasLayoutChanged) {
 });
 ```
 
-## grid.add( elements, [options] )
+## add
+
+`grid.add( elements, [options] )`
 
 Add new items by providing the elements you wish to add to the grid and optionally provide the index where you want the items to be inserted into. All elements that are not already children of the grid element will be automatically appended to the grid element. If an element has it's CSS display property set to none it will be marked as _inactive_ during the initiation process. As long as the item is _inactive_ it will not be part of the layout, but it will retain it's index. You can activate items at any point with `grid.show()` method. This method will automatically call `grid.layout()` if one or more of the added elements are visible. If only hidden items are added no layout will be called. All the new visible items are positioned without animation during their first layout.
 
@@ -190,7 +208,7 @@ Add new items by providing the elements you wish to add to the grid and optional
   - Default value: `-1`.
   - Optional.
 - **options.layout** &nbsp;&mdash;&nbsp; _boolean / function / string_
-  - By default `grid.layout()` is called at the end of this method. With this argument you can control the layout call. You can disable the layout completely with `false`, or provide a callback function for the layout method, or provide the string `'instant'` to make the layout happen instantly without any animations.
+  - By default `grid.layout()` is called at the end of this method. With this parameter you can control the layout call. You can disable the layout completely with `false`, or provide a callback function for the layout method, or provide the string `'instant'` to make the layout happen instantly without any animations.
   - Default value: `true`.
   - Optional.
 
@@ -209,7 +227,9 @@ var newItemsB = grid.add([elemA, elemB], { index: 0 });
 var newItemsC = grid.add([elemA, elemB], { layout: false });
 ```
 
-## grid.remove( items, [options] )
+## remove
+
+`grid.remove( items, [options] )`
 
 Remove items from the grid.
 
@@ -222,7 +242,7 @@ Remove items from the grid.
   - Default value: `false`.
   - Optional.
 - **options.layout** &nbsp;&mdash;&nbsp; _boolean / function / string_
-  - By default `grid.layout()` is called at the end of this method. With this argument you can control the layout call. You can disable the layout completely with `false`, or provide a callback function for the layout method, or provide the string `'instant'` to make the layout happen instantly without any animations.
+  - By default `grid.layout()` is called at the end of this method. With this parameter you can control the layout call. You can disable the layout completely with `false`, or provide a callback function for the layout method, or provide the string `'instant'` to make the layout happen instantly without any animations.
   - Default value: `true`.
   - Optional.
 
@@ -241,7 +261,9 @@ var removedItemsB = grid.remove([itemA, itemB], { removeElements: true });
 var removedItemsC = grid.remove([itemA, itemB], { layout: false });
 ```
 
-## grid.show( items, [options] )
+## show
+
+`grid.show( items, [options] )`
 
 Show the targeted items.
 
@@ -261,7 +283,7 @@ Show the targeted items.
   - A callback function that is called after the items are shown.
   - Optional.
 - **options.layout** &nbsp;&mdash;&nbsp; _boolean / function / string_
-  - By default `grid.layout()` is called at the end of this method. With this argument you can control the layout call. You can disable the layout completely with `false`, or provide a callback function for the layout method, or provide the string `'instant'` to make the layout happen instantly without any animations.
+  - By default `grid.layout()` is called at the end of this method. With this parameter you can control the layout call. You can disable the layout completely with `false`, or provide a callback function for the layout method, or provide the string `'instant'` to make the layout happen instantly without any animations.
   - Default value: `true`.
   - Optional.
 
@@ -284,7 +306,9 @@ grid.show([itemA, itemB], {
 });
 ```
 
-## grid.hide( items, [options] )
+## hide
+
+`grid.hide( items, [options] )`
 
 Hide the targeted items.
 
@@ -304,7 +328,7 @@ Hide the targeted items.
   - A callback function that is called after the items are hidden.
   - Optional.
 - **options.layout** &nbsp;&mdash;&nbsp; _boolean / function / string_
-  - By default `grid.layout()` is called at the end of this method. With this argument you can control the layout call. You can disable the layout completely with `false`, or provide a callback function for the layout method, or provide the string `'instant'` to make the layout happen instantly without any animations.
+  - By default `grid.layout()` is called at the end of this method. With this parameter you can control the layout call. You can disable the layout completely with `false`, or provide a callback function for the layout method, or provide the string `'instant'` to make the layout happen instantly without any animations.
   - Default value: `true`.
   - Optional.
 
@@ -328,7 +352,9 @@ grid.hide([itemA, itemB], {
 });
 ```
 
-## grid.filter( predicate, [options] )
+## filter
+
+`grid.filter( predicate, [options] )`
 
 Filter items. Expects at least one argument, a predicate, which should be either a function or a string. The predicate callback is executed for every item in the grid. If the return value of the predicate is truthy the item in question will be shown and otherwise hidden. The predicate callback receives the item instance as it's argument. If the predicate is a string it is considered to be a selector and it is checked against every item element in the grid with the native element.matches() method. All the matching items will be shown and others hidden.
 
@@ -348,7 +374,7 @@ Filter items. Expects at least one argument, a predicate, which should be either
   - An optional callback function that is called after all the items are shown/hidden.
   - Optional.
 - **options.layout** &nbsp;&mdash;&nbsp; _boolean / function / string_
-  - By default `grid.layout()` is called at the end of this method. With this argument you can control the layout call. You can disable the layout completely with `false`, or provide a callback function for the layout method, or provide the string `'instant'` to make the layout happen instantly without any animations.
+  - By default `grid.layout()` is called at the end of this method. With this parameter you can control the layout call. You can disable the layout completely with `false`, or provide a callback function for the layout method, or provide the string `'instant'` to make the layout happen instantly without any animations.
   - Default value: `true`.
   - Optional.
 
@@ -369,7 +395,9 @@ grid.filter('[data-foo]');
 grid.filter('.foo');
 ```
 
-## grid.sort( comparer, [options] )
+## sort
+
+`grid.sort( comparer, [options] )`
 
 Sort items. There are three ways to sort the items. The first is simply by providing a function as the comparer which works almost identically to [native array sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort). The only difference is that the sort is always stable. Alternatively you can sort by the sort data you have provided in the grid's options. Just provide the sort data key(s) as a string (separated by space) and the items will be sorted based on the provided sort data keys. Lastly you have the opportunity to provide a presorted array of items which will be used to sync the internal items array in the same order.
 
@@ -382,7 +410,7 @@ Sort items. There are three ways to sort the items. The first is simply by provi
   - Default value: `false`.
   - Optional.
 - **options.layout** &nbsp;&mdash;&nbsp; _boolean / function / string_
-  - By default `grid.layout()` is called at the end of this method. With this argument you can control the layout call. You can disable the layout completely with `false`, or provide a callback function for the layout method, or provide the string `'instant'` to make the layout happen instantly without any animations.
+  - By default `grid.layout()` is called at the end of this method. With this parameter you can control the layout call. You can disable the layout completely with `false`, or provide a callback function for the layout method, or provide the string `'instant'` to make the layout happen instantly without any animations.
   - Default value: `true`.
   - Optional.
 
@@ -410,7 +438,9 @@ grid.sort('foo bar', { descending: true });
 grid.sort('foo bar:desc');
 ```
 
-## grid.move( item, position, [options] )
+## move
+
+`grid.move( item, position, [options] )`
 
 Move an item to another position in the grid.
 
@@ -427,7 +457,7 @@ Move an item to another position in the grid.
   - Default value: `'move'`.
   - Optional.
 - **options.layout** &nbsp;&mdash;&nbsp; _boolean / function / string_
-  - By default `grid.layout()` is called at the end of this method. With this argument you can control the layout call. You can disable the layout completely with `false`, or provide a callback function for the layout method, or provide the string `'instant'` to make the layout happen instantly without any animations.
+  - By default `grid.layout()` is called at the end of this method. With this parameter you can control the layout call. You can disable the layout completely with `false`, or provide a callback function for the layout method, or provide the string `'instant'` to make the layout happen instantly without any animations.
   - Default value: `true`.
   - Optional.
 
@@ -448,7 +478,9 @@ grid.move(elemA, elemB, { action: 'swap' });
 grid.move(0, -1, { action: 'swap' });
 ```
 
-## grid.send( item, grid, position, [options] )
+## send
+
+`grid.send( item, grid, position, [options] )`
 
 Move an item into another grid.
 
@@ -464,11 +496,11 @@ Move an item into another grid.
   - Which element the item element should be appended to for the duration of the layout animation?
   - Default value: `document.body`.
 - **options.layoutSender** &nbsp;&mdash;&nbsp; _boolean / function / string_
-  - By default `grid.layout()` is called for the sending grid at the end of this method. With this argument you can control the layout call. You can disable the layout completely with `false`, or provide a callback function for the layout method, or provide the string `'instant'` to make the layout happen instantly without any animations.
+  - By default `grid.layout()` is called for the sending grid at the end of this method. With this parameter you can control the layout call. You can disable the layout completely with `false`, or provide a callback function for the layout method, or provide the string `'instant'` to make the layout happen instantly without any animations.
   - Default value: `true`.
   - Optional.
 - **options.layoutReceiver** &nbsp;&mdash;&nbsp; _boolean / function / string_
-  - By default `grid.layout()` is called for the receiving grid at the end of this method. With this argument you can control the layout call. You can disable the layout completely with `false`, or provide a callback function for the layout method, or provide the string `'instant'` to make the layout happen instantly without any animations.
+  - By default `grid.layout()` is called for the receiving grid at the end of this method. With this parameter you can control the layout call. You can disable the layout completely with `false`, or provide a callback function for the layout method, or provide the string `'instant'` to make the layout happen instantly without any animations.
   - Default value: `true`.
   - Optional.
 
@@ -499,7 +531,9 @@ gridA.send(0, gridB, -1, {
 });
 ```
 
-## grid.on( event, listener )
+## on
+
+`grid.on( event, listener )`
 
 Bind an event listener.
 
@@ -520,7 +554,9 @@ grid.on('layoutEnd', function (items) {
 });
 ```
 
-## grid.off( event, listener )
+## off
+
+`grid.off( event, listener )`
 
 Unbind an event listener.
 
@@ -545,7 +581,9 @@ grid.on('layoutEnd', onLayoutEnd);
 grid.off('layoutEnd', onLayoutEnd);
 ```
 
-## grid.destroy( [removeElements] )
+## destroy
+
+`grid.destroy( [removeElements] )`
 
 Destroy the grid.
 
diff --git a/docs/grid-options.md b/docs/grid-options.md
index 530ab207..9016e5f1 100644
--- a/docs/grid-options.md
+++ b/docs/grid-options.md
@@ -1,4 +1,6 @@
-## _option:_ items
+# Grid Options
+
+## items
 
 The initial item elements, which should be children of the grid element. All elements that are not children of the grid element (e.g. if they are not in the DOM yet) will be appended to the grid element. You can provide an array of elements, [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList), [HTMLCollection](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection) or a selector (string). If you provide a selector Muuri uses it to filter the current child elements of the container element and sets them as initial items. By default all current child elements of the provided grid element are used as initial items.
 
@@ -22,7 +24,7 @@ var grid = new Muuri(elem, {
 });
 ```
 
-## _option:_ showDuration
+## showDuration
 
 Show animation duration in milliseconds. Set to `0` to disable show animation.
 
@@ -37,7 +39,7 @@ var grid = new Muuri(elem, {
 });
 ```
 
-## _option:_ showEasing
+## showEasing
 
 Show animation easing. Accepts any valid [Animation easing](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEffectTimingProperties/easing) value.
 
@@ -52,7 +54,7 @@ var grid = new Muuri(elem, {
 });
 ```
 
-## _option:_ hideDuration
+## hideDuration
 
 Hide animation duration in milliseconds. Set to `0` to disable hide animation.
 
@@ -67,7 +69,7 @@ var grid = new Muuri(elem, {
 });
 ```
 
-## _option:_ hideEasing
+## hideEasing
 
 Hide animation easing. Accepts any valid [Animation easing](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEffectTimingProperties/easing) value.
 
@@ -82,7 +84,7 @@ var grid = new Muuri(elem, {
 });
 ```
 
-## _option:_ visibleStyles
+## visibleStyles
 
 The styles that will be applied to all visible items. These styles are also used for the show/hide animations which means that you have to have the same style properties in visibleStyles and hiddenStyles options. Be sure to define all style properties camel cased and without vendor prefixes (Muuri prefixes the properties automatically where needed).
 
@@ -110,7 +112,7 @@ var grid = new Muuri(elem, {
 });
 ```
 
-## _option:_ hiddenStyles
+## hiddenStyles
 
 The styles that will be applied to all hidden items. These styles are also used for the show/hide animations which means that you have to have the same style properties in visibleStyles and hiddenStyles options. Be sure to define all style properties camel cased and without vendor prefixes (Muuri prefixes the properties automatically where needed).
 
@@ -138,7 +140,7 @@ var grid = new Muuri(elem, {
 });
 ```
 
-## _option:_ layout
+## layout
 
 Define how the items will be positioned. Muuri ships with a configurable layout algorithm which is used by default. It's pretty flexible and suitable for most common situations (lists, grids and even bin packed grids). If that does not fit the bill you can always provide your own layout algorithm (it's not as scary as it sounds).
 
@@ -178,7 +180,7 @@ Muuri supports calculating the layout both synchronously and asynchronously. By
 
 When you provide a custom layout function Muuri calls it whenever calculation of layout is necessary. Before calling the layout function Muuri always calculates the current width and height of the grid element and also creates an array of all the items that are part of the layout currently (all _active_ items).
 
-The layout function always receives the following arguments:
+The layout function has the following parameters:
 
 - **grid** &nbsp;&mdash;&nbsp; _Muuri_
   - The grid instance that requested the layout.
@@ -274,7 +276,7 @@ var grid = new Muuri(elem, {
 });
 ```
 
-## _option:_ layoutOnResize
+## layoutOnResize
 
 Should Muuri automatically trigger `layout` method on window resize? Set to `false` to disable. When a number or `true` is provided Muuri will automatically position the items every time window is resized. The provided number (`true` is transformed to `0`) equals to the amount of time (in milliseconds) that is waited before items are positioned after each window resize event.
 
@@ -304,7 +306,7 @@ var grid = new Muuri(elem, {
 });
 ```
 
-## _option:_ layoutOnInit
+## layoutOnInit
 
 Should Muuri trigger `layout` method automatically on init?
 
@@ -319,7 +321,7 @@ var grid = new Muuri(elem, {
 });
 ```
 
-## _option:_ layoutDuration
+## layoutDuration
 
 The duration for item's layout animation in milliseconds. Set to `0` to disable.
 
@@ -334,7 +336,7 @@ var grid = new Muuri(elem, {
 });
 ```
 
-## _option:_ layoutEasing
+## layoutEasing
 
 The easing for item's layout animation. Accepts any valid [Animation easing](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEffectTimingProperties/easing) value.
 
@@ -349,7 +351,7 @@ var grid = new Muuri(elem, {
 });
 ```
 
-## _option:_ sortData
+## sortData
 
 The sort data getter functions. Provide an object where the key is the name of the sortable attribute and the function returns a value (from the item) by which the items can be sorted.
 
@@ -375,7 +377,7 @@ grid.refreshSortData();
 grid.sort('foo bar');
 ```
 
-## _option:_ dragEnabled
+## dragEnabled
 
 Should items be draggable?
 
@@ -390,7 +392,7 @@ var grid = new Muuri(elem, {
 });
 ```
 
-## _option:_ dragContainer
+## dragContainer
 
 The element the dragged item should be appended to for the duration of the drag. If set to `null` (which is also the default value) the grid element will be used.
 
@@ -405,7 +407,7 @@ var grid = new Muuri(elem, {
 });
 ```
 
-## _option:_ dragHandle
+## dragHandle
 
 The element within the item element that should be used as the drag handle. This should be a CSS selector which will be fed to `element.querySelector()` as is to obtain the handle element when the item is instantiated. If no valid element is found or if this is `null` Muuri will use the item element as the handle.
 
@@ -420,7 +422,7 @@ var grid = new Muuri(elem, {
 });
 ```
 
-## _option:_ dragStartPredicate
+## dragStartPredicate
 
 A function that determines when the item should start moving when the item is being dragged. By default uses the built-in start predicate which has some configurable options.
 
@@ -444,7 +446,7 @@ If an object is provided the default start predicate handler will be used. You c
 
 If you provide a function you can customize the drag start logic as you please. When the user starts to drag an item this predicate function will be called until you return `true` or `false`. If you return `true` the item will begin to move whenever the item is dragged. If you return `false` the item will not be moved at all. Note that after you have returned `true` or `false` this function will not be called until the item is released and dragged again.
 
-The predicate function receives two arguments:
+The predicate function has the following parameters:
 
 - **item** &nbsp;&mdash;&nbsp; _Muuri.Item_
   - The item that's being dragged.
@@ -498,7 +500,7 @@ var grid = new Muuri(elem, {
 });
 ```
 
-## _option:_ dragAxis
+## dragAxis
 
 Force items to be moved only vertically or horizontally when dragged. Set to `'x'` for horizontal movement and to `'y'` for vertical movement. By default items can be dragged both vertically and horizontally.
 
@@ -522,11 +524,11 @@ var grid = new Muuri(elem, {
 });
 ```
 
-## _option:_ dragSort
+## dragSort
 
 Should the items be sorted during drag? A simple boolean will do just fine here.
 
-Alternatively you can do some advanced stuff and control within which grids a specific item can be sorted and dragged into. To do that you need to provide a function which receives the dragged item as its first argument and should return an array of grid instances. An important thing to note here is that you need to return _all_ the grid instances you want the dragged item to sort within, even the current grid instance. If you return an empty array the dragged item will not cause sorting at all.
+Alternatively you can do some advanced stuff and control within which grids a specific item can be sorted and dragged into. To do that you need to provide a function which receives the dragged item as it's first argument and should return an array of grid instances. An important thing to note here is that you need to return _all_ the grid instances you want the dragged item to sort within, even the current grid instance. If you return an empty array the dragged item will not cause sorting at all.
 
 - Default value: `true`.
 - Accepted types: boolean, function.
@@ -550,7 +552,7 @@ function getAllGrids(item) {
 }
 ```
 
-## _option:_ dragSortHeuristics
+## dragSortHeuristics
 
 Defines various heuristics so that sorting during drag would be smoother and faster.
 
@@ -600,7 +602,7 @@ var grid = new Muuri(elem, {
 });
 ```
 
-## _option:_ dragSortPredicate
+## dragSortPredicate
 
 Defines the logic for the sort procedure during dragging an item.
 
@@ -629,7 +631,7 @@ If an object is provided the default sort predicate handler will be used. You ca
   - Allowed values: `'move'`, `'swap'`.
   - Should the dragged item be _moved_ to the new position or should it _swap_ places with the item it overlaps when the dragged item is moved to another grid?
 
-Alternatively you can provide your own callback function where you can define your own custom sort logic. The callback function receives two arguments:
+Alternatively you can provide your own callback function where you can define your own custom sort logic. The callback function has the following parameters:
 
 - **item** &nbsp;&mdash;&nbsp; _Muuri.Item_
   - The item that's being dragged.
@@ -688,7 +690,7 @@ var grid = new Muuri(elem, {
 });
 ```
 
-## _option:_ dragRelease
+## dragRelease
 
 - Default value:
   ```javascript
@@ -724,7 +726,7 @@ var grid = new Muuri(elem, {
 });
 ```
 
-## _option:_ dragCssProps
+## dragCssProps
 
 Drag specific CSS properties that Muuri sets to the draggable item elements. Muuri automatically prefixes the properties before applying them to the element. `touchAction` property is required to be always defined, but the other properties are optional and can be omitted by setting their value to an empty string if you want to e.g. define them via CSS only.
 
@@ -785,7 +787,7 @@ var grid = new Muuri(elem, {
 });
 ```
 
-## _option:_ dragPlaceholder
+## dragPlaceholder
 
 If you want a placeholder item to appear for the duration of an item's drag & drop procedure you can enable and configure it here. The placeholder animation duration is fetched from the grid's `layoutDuration` option and easing from the grid's `layoutEasing` option. Note that a special placeholder class is given to all drag placeholders and is customizable via [itemPlaceholderClass](#itemplaceholderclass-) option.
 
@@ -841,7 +843,7 @@ var grid = new Muuri(elem, {
 });
 ```
 
-## _option:_ dragAutoScroll
+## dragAutoScroll
 
 If you want to trigger scrolling on any element during dragging you can enable and configure it here. By default this feature is disabled. When you use this feature it is _highly_ recommended that you create a `fixed` positioned element right under `document.body` and use that as the `dragContainer` for all the dragged items. If you don't do this and a dragged item's parent is auto-scrolled, the dragged item will potentially grow the scrolled element's scroll area to infinity unintentionally.
 
@@ -884,7 +886,7 @@ You can define the following properties:
       - Optional.
 - **handle** &nbsp;&mdash;&nbsp; _function / null_
   - Default value: `null`.
-  - This property defines size and position of the handle (the rectangle that is compared against the scroll element's threshold). By default (when `null`) the dragged element's dimensions and offsets are used. However, you can provide a function which should return an object containing the handle's client offsets in pixels (`left` and `top`) and dimensions in pixels (`width` and `height`). The function receives the following arguments:
+  - This property defines size and position of the handle (the rectangle that is compared against the scroll element's threshold). By default (when `null`) the dragged element's dimensions and offsets are used. However, you can provide a function which should return an object containing the handle's client offsets in pixels (`left` and `top`) and dimensions in pixels (`width` and `height`). The function has the following parameters:
     - **item** &nbsp;&mdash;&nbsp; _Muuri.Item_
     - **itemClientX** &nbsp;&mdash;&nbsp; _number_
     - **itemClientY** &nbsp;&mdash;&nbsp; _number_
@@ -901,7 +903,7 @@ You can define the following properties:
   - Defines the size of the minimum "safe zone" space, an area in the center of the scrollable element that will be guaranteed not trigger scrolling regardless of threshold size and the dragged item's size. This value is a percentage of the scrollable element's size (width and/or height depending on the scroll axes), and should be something between `0` and `1`. So in practice, if you set this to e.g `0.5` the safe zone would be 50% of the scrollable element's width and/or height.
 - **speed** &nbsp;&mdash;&nbsp; _number / function_
   - Default value: `Muuri.AutoScroller.smoothSpeed(1000, 2000, 2500)`.
-  - Defines the scrolling speed in pixels per second. You can provide either static speed with a `number` or dynamic speed with a `function`. The function is called before every scroll operation and should return the speed (`number`, pixels per second) for the next scroll operation. The function receives three arguments:
+  - Defines the scrolling speed in pixels per second. You can provide either static speed with a `number` or dynamic speed with a `function`. The function is called before every scroll operation and should return the speed (`number`, pixels per second) for the next scroll operation. The function has the following parameters:
     - **item** &nbsp;&mdash;&nbsp; _Muuri.Item_
       - The dragged `Muuri.Item` instance.
     - **scrollElement** &nbsp;&mdash;&nbsp; _element_ / _window_
@@ -925,7 +927,7 @@ You can define the following properties:
         - `requestAnimationFrame`'s delta time (in milliseconds).
       - **data.isEnding** &nbsp;&mdash;&nbsp; _boolean_
         - Is the scroll process ending? When this is `true` it means that the associated drag item does not satisfy the threshold anymore. You should now start decreasing the speed towards `0` to allow the item to come to rest smoothly.
-  - Pro tip: Use `Muuri.AutoScroller.smoothSpeed()` for dynamic speed that provides a smooth scrolling experience. When executed it creates and returns a speed function which you can directly provide for `speed` option. The method _requires_ three arguments (in the following order):
+  - Pro tip: Use `Muuri.AutoScroller.smoothSpeed(maxSpeed, acceleration, deceleration)` for dynamic speed that provides a smooth scrolling experience. When executed it creates and returns a speed function which you can directly provide to `speed` option. The method has the following parameters:
     - **maxSpeed** &nbsp;&mdash;&nbsp; _number_
       - The maximum speed (pixels per second) when the handle's distance to the scroll target's edge is `0` or less.
     - **acceleration** &nbsp;&mdash;&nbsp; _number_
@@ -940,7 +942,7 @@ You can define the following properties:
   - When a dragged item is moved out of the threshold area the scroll process is set to _ending_ state. However, it's up to you to decide if the actual scrolling motion is stopped gradually or instantly. By default, when this is `false`, scrolling will stop immediately. If you set this to `true` scrolling will continue until speed drops to `0`. When this option is `enabled` you _must_ handle decelerating the speed to `0` manually within `speed` function, so do not enable this option if you use a static speed value. The default `speed` function handles the deceleration automatically.
 - **onStart** &nbsp;&mdash;&nbsp; _null / function_
   - Default value: `null`.
-  - Optionally, you can provide a callback that will be called when an item starts auto-scrolling a scroll target. The callback function will receive the following arguments:
+  - Optionally, you can provide a callback that will be called when an item starts auto-scrolling a scroll target. The callback function has the following parameters:
     - **item** &nbsp;&mdash;&nbsp; _Muuri.Item_
       - The dragged `Muuri.Item` instance.
     - **scrollElement** &nbsp;&mdash;&nbsp; _element_ / _window_
@@ -949,7 +951,7 @@ You can define the following properties:
       - The direction of the scroll, one of the following: `Muuri.AutoScroller.LEFT`, `Muuri.AutoScroller.RIGHT`, `Muuri.AutoScroller.UP`, `Muuri.AutoScroller.DOWN`.
 - **onStop** &nbsp;&mdash;&nbsp; _null / function_
   - Default value: `null`.
-  - Optionally, you can provide a callback that will be called when an item stops auto-scrolling a scroll target. The callback function will receive the following arguments:
+  - Optionally, you can provide a callback that will be called when an item stops auto-scrolling a scroll target. The callback function has the following parameters:
     - **item** &nbsp;&mdash;&nbsp; _Muuri.Item_
       - The dragged `Muuri.Item` instance.
     - **scrollElement** &nbsp;&mdash;&nbsp; _element_ / _window_
@@ -1007,7 +1009,7 @@ var grid = new Muuri(elem, {
 });
 ```
 
-## _option:_ containerClass
+## containerClass
 
 Grid element's class name.
 
@@ -1022,7 +1024,7 @@ var grid = new Muuri(elem, {
 });
 ```
 
-## _option:_ itemClass
+## itemClass
 
 Item element's class name.
 
@@ -1037,7 +1039,7 @@ var grid = new Muuri(elem, {
 });
 ```
 
-## _option:_ itemVisibleClass
+## itemVisibleClass
 
 Visible item's class name.
 
@@ -1052,7 +1054,7 @@ var grid = new Muuri(elem, {
 });
 ```
 
-## _option:_ itemHiddenClass
+## itemHiddenClass
 
 Hidden item's class name.
 
@@ -1067,7 +1069,7 @@ var grid = new Muuri(elem, {
 });
 ```
 
-## _option:_ itemPositioningClass
+## itemPositioningClass
 
 This class name will be added to the item element for the duration of positioning.
 
@@ -1082,7 +1084,7 @@ var grid = new Muuri(elem, {
 });
 ```
 
-## _option:_ itemDraggingClass
+## itemDraggingClass
 
 This class name will be added to the item element for the duration of drag.
 
@@ -1097,7 +1099,7 @@ var grid = new Muuri(elem, {
 });
 ```
 
-## _option:_ itemReleasingClass
+## itemReleasingClass
 
 This class name will be added to the item element for the duration of release.
 
@@ -1112,7 +1114,7 @@ var grid = new Muuri(elem, {
 });
 ```
 
-## _option:_ itemPlaceholderClass
+## itemPlaceholderClass
 
 This class name will be added to the drag placeholder element.
 
diff --git a/docs/index.md b/docs/index.md
index 053e952e..22fe1454 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,16 +1,5 @@
-<img src="/logo.svg" alt="Muuri" width="400" />
+# Muuri Docs
 
-# What is Muuri?
+You've stumbled on the official documentation site of [Muuri](https://muuri.dev), a JavaScript layout engine. Here you will find detailed API documentation, usage guides and some nifty examples.
 
-Muuri is a JavaScript layout engine that allows you to build all kinds of layouts (no kidding!) and make them responsive, sortable, filterable, draggable and/or animated. Compared to what's out there Muuri is a combination of [Packery](http://packery.metafizzy.co/), [Masonry](http://masonry.desandro.com/), [Isotope](http://isotope.metafizzy.co/) and [Sortable](https://github.com/RubaXa/Sortable). Wanna see it in action? Check out the [demo](https://muuri.dev/) on the website.
-
-**Features**
-
-- Fully customizable layout
-- Asynchronous layout calculations in web workers
-- Drag & drop (even between grids)
-- Auto-scrolling during drag
-- Nested grids
-- Fast animations
-- Filtering
-- Sorting
+Hopefully you'll find what you're looking for, but if not, please help us improve these docs. You can either [create an issue](https://github.com/haltu/muuri/issues/new) or submit a pull request on Muuri's repo.
diff --git a/docs/item-methods.md b/docs/item-methods.md
index d4cbcfc5..7a67c83c 100644
--- a/docs/item-methods.md
+++ b/docs/item-methods.md
@@ -1,6 +1,8 @@
+# Item Methods
 
+## getGrid
 
-## item.getGrid()
+`item.getGrid()`
 
 Get the grid instance the item belongs to.
 
@@ -9,10 +11,12 @@ Get the grid instance the item belongs to.
 **Examples**
 
 ```javascript
-var grid = item.getGrid();
+const grid = item.getGrid();
 ```
 
-## item.getElement()
+## getElement
+
+`item.getElement()`
 
 Get the item element.
 
@@ -21,10 +25,12 @@ Get the item element.
 **Examples**
 
 ```javascript
-var elem = item.getElement();
+const elem = item.getElement();
 ```
 
-## item.getWidth()
+## getWidth
+
+`item.getWidth()`
 
 Get item element's cached width (in pixels). The returned value includes the element's paddings and borders.
 
@@ -33,10 +39,12 @@ Get item element's cached width (in pixels). The returned value includes the ele
 **Examples**
 
 ```javascript
-var width = item.getWidth();
+const width = item.getWidth();
 ```
 
-## item.getHeight()
+## getHeight
+
+`item.getWidth()`
 
 Get item element's cached height (in pixels). The returned value includes the element's paddings and borders.
 
@@ -45,10 +53,12 @@ Get item element's cached height (in pixels). The returned value includes the el
 **Examples**
 
 ```javascript
-var height = item.getHeight();
+const height = item.getHeight();
 ```
 
-## item.getMargin()
+## getMargin
+
+`item.getMargin()`
 
 Get item element's cached margins (in pixels).
 
@@ -62,10 +72,12 @@ Get item element's cached margins (in pixels).
 **Examples**
 
 ```javascript
-var margin = item.getMargin();
+const margin = item.getMargin();
 ```
 
-## item.getPosition()
+## getPosition
+
+`item.getPosition()`
 
 Get item element's cached position (in pixels, relative to the grid element).
 
@@ -77,10 +89,12 @@ Get item element's cached position (in pixels, relative to the grid element).
 **Examples**
 
 ```javascript
-var position = item.getPosition();
+const position = item.getPosition();
 ```
 
-## item.isActive()
+## isActive
+
+`item.isActive()`
 
 Check if the item is currently _active_. Only active items are considered to be part of the layout.
 
@@ -89,10 +103,12 @@ Check if the item is currently _active_. Only active items are considered to be
 **Examples**
 
 ```javascript
-var isActive = item.isActive();
+const isActive = item.isActive();
 ```
 
-## item.isVisible()
+## isVisible
+
+`item.isVisible()`
 
 Check if the item is currently _visible_.
 
@@ -101,10 +117,12 @@ Check if the item is currently _visible_.
 **Examples**
 
 ```javascript
-var isVisible = item.isVisible();
+const isVisible = item.isVisible();
 ```
 
-## item.isShowing()
+## isShowing
+
+`item.isShowing()`
 
 Check if the item is currently animating to visible.
 
@@ -113,10 +131,12 @@ Check if the item is currently animating to visible.
 **Examples**
 
 ```javascript
-var isShowing = item.isShowing();
+const isShowing = item.isShowing();
 ```
 
-## item.isHiding()
+## isHiding
+
+`item.isHiding()`
 
 Check if the item is currently animating to hidden.
 
@@ -125,10 +145,12 @@ Check if the item is currently animating to hidden.
 **Examples**
 
 ```javascript
-var isHiding = item.isHiding();
+const isHiding = item.isHiding();
 ```
 
-## item.isPositioning()
+## isPositioning
+
+`item.isPositioning()`
 
 Check if the item is currently being positioned.
 
@@ -137,10 +159,12 @@ Check if the item is currently being positioned.
 **Examples**
 
 ```javascript
-var isPositioning = item.isPositioning();
+const isPositioning = item.isPositioning();
 ```
 
-## item.isDragging()
+## isDragging
+
+`item.isDragging()`
 
 Check if the item is currently being dragged.
 
@@ -149,10 +173,12 @@ Check if the item is currently being dragged.
 **Examples**
 
 ```javascript
-var isDragging = item.isDragging();
+const isDragging = item.isDragging();
 ```
 
-## item.isReleasing()
+## isReleasing
+
+`item.isReleasing()`
 
 Check if the item is currently being released.
 
@@ -161,10 +187,12 @@ Check if the item is currently being released.
 **Examples**
 
 ```javascript
-var isReleasing = item.isReleasing();
+const isReleasing = item.isReleasing();
 ```
 
-## item.isDestroyed()
+## isDestroyed
+
+`item.isDestroyed()`
 
 Check if the item is destroyed.
 
@@ -173,5 +201,5 @@ Check if the item is destroyed.
 **Examples**
 
 ```javascript
-var isDestroyed = item.isDestroyed();
-```
\ No newline at end of file
+const isDestroyed = item.isDestroyed();
+```
diff --git a/docs/motivation.md b/docs/motivation.md
deleted file mode 100644
index 152929a1..00000000
--- a/docs/motivation.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# Motivation
-
-You can build pretty amazing layouts without a single line of JavaScript these days. However, sometimes (rarely though) CSS just isn't enough, and that's where Muuri comes along. At its very core, Muuri is a layout engine that is limited only by your imagination. You can seriously build any kind of layout, asynchronously in web workers if you wish.
-
-Custom layouts aside, you might need to sprinkle some flare (animation) and/or interactivity (filtering / sorting / drag & drop) on your layout (be it CSS or JS-based). Stuff gets complex pretty fast and most of us probably reach for existing libraries to handle the complexity at that point. This is why most of these extra features are built into Muuri's core, so you don't have to go hunting for additional libraries or re-inventing the wheel for the nth time.
-
-The long-term goal of Muuri is to provide a simple (and as low-level as possible) API for building amazing layouts with unmatched performance and most of the complexity abstracted away.
-
diff --git a/docs/public/favicon.ico b/docs/public/favicon.ico
deleted file mode 100644
index f4a92d5f..00000000
Binary files a/docs/public/favicon.ico and /dev/null differ
diff --git a/docs/public/logo.svg b/docs/public/logo.svg
deleted file mode 100644
index 61494403..00000000
--- a/docs/public/logo.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 620 620" preserveAspectRatio="xMidYMid meet">
-   <path fill="none" stroke="#ff69ea" stroke-width="20" stroke-linecap="round" stroke-linejoin="round" paint-order="fill stroke markers" transform="translate(60 30)" d="M0,0 v330 l20,20 h80 v-325 z M400,25 v325 h80 l20,-20 v-330 z M100,50 v200 h100 v-175 z M300,75 v175 h100 v-200 z M200,100 v200 h100 v-200 z" />
-   <path fill="#ff69ea" d="m 334,436 h 3 c 6.66667,-0.66667 12.33333,2.33333 17,9 l 1,3 c 0.66667,3.33333 -3,14.33333 -11,33 -8,20 -11.33333,38 -10,54 v 2 c 10.66667,-8 18.66667,-17.66667 24,-29 14.66667,-22 23,-37.66667 25,-47 l 3,-8 c 1.33333,0 2,-0.66667 2,-2 l 1,-1 h 1 v 2 h 1 l 2,-11 h 1 v 3 -5 h 1 l 1,1 c 1.33333,-0.66667 2.66667,-4 4,-10 h 1 c 4.66667,4 7.33333,10 8,18 2.66667,28 -12.66667,61.33333 -46,100 -6.66667,5.33333 -14.33333,8.33333 -23,9 -16,1.33333 -27.33333,-3.66667 -34,-15 l -2,-8 v -3 c -1.33333,-16.66667 0.66667,-31.66667 6,-45 l 13,-41 c 3.33333,-5.33333 7,-8.33333 11,-9 z m -274,23 3,-1 c 5.333333,0 10,3 14,9 l 1,26 c 0.666667,8 2.333333,14 5,18 l 12,-14 24,-28 c 5.33333,-9.33333 11,-14 17,-14 l 5,-1 c 4,0 6.33333,1 7,3 1.33333,0 3.66667,1.66667 7,5 v 1 c 0.66667,4.66667 -4.33333,21.33333 -15,50 -3.33333,11.33333 -5.66667,17 -7,17 h 1 v 1 l -7,18 -9,23 -4,6 h -5 v -1 l -2,1 -5,-2 -1,2 c -1.333333,0 -2.333333,-1 -3,-3 l -3,-1 v -5 c -0.666667,-8.66667 4.333333,-25.66667 15,-51 -6,6.66667 -12,15 -18,25 -1.333333,0 -3,1.66667 -5,5 h -1 c -4.666667,-2.66667 -9,-4.33333 -13,-5 -5.333333,-2.66667 -10.333333,-11.33333 -15,-26 -15.333333,46 -24,69.66667 -26,71 h -1 l -4,-1 -2,1 v -1 l -1,1 -1,-3 -2,2 v -1 l -6,2 c -1.333333,-2.66667 -2.666667,-4 -4,-4 l -1,-2 c -0.6666667,-10.66667 9.333333,-41.66667 30,-93 4,-18.66667 8,-28 12,-28 z m 142,-12 h 3 c 6.66667,-0.66667 12.33333,2.33333 17,9 l 1,3 c 0.66667,3.33333 -3,14.33333 -11,33 -8,20 -11.33333,38 -10,54 v 2 c 10.66667,-8 18.66667,-17.66667 24,-29 14.66667,-22 23,-37.66667 25,-47 l 3,-8 c 1.33333,0 2,-0.66667 2,-2 l 1,-1 h 1 v 2 h 1 l 2,-11 h 1 v 3 -5 h 1 l 1,1 c 1.33333,-0.66667 2.66667,-4 4,-10 h 1 c 4.66667,4 7.33333,10 8,18 2.66667,28 -12.66667,61.33333 -46,100 -6.66667,5.33333 -14.33333,8.33333 -23,9 -16,1.33333 -27.33333,-3.66667 -34,-15 l -2,-8 v -3 c -1.33333,-16.66667 0.66667,-31.66667 6,-45 l 13,-41 c 3.33333,-5.33333 7,-8.33333 11,-9 z m 286,-27 h 5 c 28.66667,-2.66667 46.33333,5 53,23 l 1,4 v 2 c 0.66667,5.33333 -11.33333,15.66667 -36,31 9.33333,26.66667 14.33333,45.33333 15,56 h 1 v 1 l -1,2 1,6 -1,1 -2,-3 -1,2 h -3 l -1,2 h -4 l -1,1 c 0,-2 -1,-3 -3,-3 -8,-14.66667 -15.66667,-32.33333 -23,-53 l -27,12 -17,29 -3,9 -5,13 h -1 c 0,-2 -2,-3.33333 -6,-4 l -1,1 -3,-1 -1,1 -4,-4 -1,-2 c -0.66667,-10 8.66667,-39.33333 28,-88 -9.33333,-5.33333 -14.33333,-9.66667 -15,-13 v -3 c 0,-2.66667 7.33333,-7.33333 22,-14 2,-3.33333 13.33333,-6 34,-8 z m -16,52 h 1 c 24.66667,-13.33333 39.33333,-23.33333 44,-30 v -1 l -13,1 h -1 c -16,1.33333 -24,4 -24,8 z m 110,-54 4,-1 c 8,-0.66667 14.66667,2.66667 20,10 v 2 l -11,24 -24,64 -5.87415,14.97024 c -2.23579,-1.49566 -1.68573,-1.89603 -2.06219,0.57391 l -3.71635,7.38533 C 555.60684,537.59904 556.16126,538.48325 555,541 c -0.12001,1.66234 -2.62942,2.05169 -4,3 -2.6688,3.06957 -2.52399,-1.22547 -4.68635,3.66145 l -3.03439,-2.61217 -2.75975,1.27926 L 539,545 l -2,2 -1,-1 c -0.66667,-6 12,-45.66667 38,-119 1.33333,-6 4,-9 8,-9 z" />
-</svg>
diff --git a/docs/public/muuri-icon.svg b/docs/public/muuri-icon.svg
new file mode 100644
index 00000000..61b86d7c
--- /dev/null
+++ b/docs/public/muuri-icon.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 550 400" preserveAspectRatio="xMidYMid meet">
+  <path transform="translate(25 25)" paint-order="fill stroke markers" stroke-linejoin="round" stroke-linecap="round" stroke-width="20" stroke="#ff69ea" fill="none" d="M0,0 v330 l20,20 h80 v-325 z M400,25 v325 h80 l20,-20 v-330 z M100,50 v200 h100 v-175 z M300,75 v175 h100 v-200 z M200,100 v200 h100 v-200 z"></path>
+</svg>
diff --git a/docs/what-is-muuri.md b/docs/what-is-muuri.md
deleted file mode 100644
index 053e952e..00000000
--- a/docs/what-is-muuri.md
+++ /dev/null
@@ -1,16 +0,0 @@
-<img src="/logo.svg" alt="Muuri" width="400" />
-
-# What is Muuri?
-
-Muuri is a JavaScript layout engine that allows you to build all kinds of layouts (no kidding!) and make them responsive, sortable, filterable, draggable and/or animated. Compared to what's out there Muuri is a combination of [Packery](http://packery.metafizzy.co/), [Masonry](http://masonry.desandro.com/), [Isotope](http://isotope.metafizzy.co/) and [Sortable](https://github.com/RubaXa/Sortable). Wanna see it in action? Check out the [demo](https://muuri.dev/) on the website.
-
-**Features**
-
-- Fully customizable layout
-- Asynchronous layout calculations in web workers
-- Drag & drop (even between grids)
-- Auto-scrolling during drag
-- Nested grids
-- Fast animations
-- Filtering
-- Sorting
diff --git a/package-lock.json b/package-lock.json
index 38c985bf..7578f08e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,8 +26,8 @@
         "rimraf": "3.0.2",
         "rollup": "2.52.8",
         "terser": "5.7.1",
-        "vitepress": "^1.0.0-alpha.13",
-        "vue": "^3.2.38",
+        "vitepress": "1.0.0-alpha.14",
+        "vue": "3.2.39",
         "web-animations-js": "2.3.2"
       }
     },
@@ -4740,6 +4740,7 @@
         "yallist"
       ],
       "dev": true,
+      "hasInstallScript": true,
       "optional": true,
       "os": [
         "darwin"
@@ -8165,6 +8166,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==",
+      "dev": true
+    },
     "node_modules/number-is-nan": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
@@ -11257,20 +11264,21 @@
       }
     },
     "node_modules/vitepress": {
-      "version": "1.0.0-alpha.13",
-      "resolved": "https://registry.npmjs.org/vitepress/-/vitepress-1.0.0-alpha.13.tgz",
-      "integrity": "sha512-gCbKb+6o0g5wHt2yyqBPk7FcvrB+MfwGtg1JMS5p99GTQR87l3b7symCl8o1ecv7MDXwJ2mPB8ZrYNLnQAJxLQ==",
+      "version": "1.0.0-alpha.14",
+      "resolved": "https://registry.npmjs.org/vitepress/-/vitepress-1.0.0-alpha.14.tgz",
+      "integrity": "sha512-GVwDeZPc/+5vgxOh0NfbKlk/QT4e20hRUdLdG+hEP8myJmM0IC4uIL7xK2G/wn6ucei9hLb0YQh677oDhCxF6g==",
       "dev": true,
       "dependencies": {
         "@docsearch/css": "^3.2.1",
         "@docsearch/js": "^3.2.1",
-        "@vitejs/plugin-vue": "^3.0.3",
+        "@vitejs/plugin-vue": "^3.1.0",
         "@vue/devtools-api": "^6.2.1",
-        "@vueuse/core": "^9.1.0",
+        "@vueuse/core": "^9.1.1",
         "body-scroll-lock": "^4.0.0-beta.0",
+        "nprogress": "^0.2.0",
         "shiki": "^0.11.1",
-        "vite": "^3.0.8",
-        "vue": "^3.2.37"
+        "vite": "^3.1.0",
+        "vue": "^3.2.38"
       },
       "bin": {
         "vitepress": "bin/vitepress.js"
@@ -18139,6 +18147,12 @@
         "path-key": "^2.0.0"
       }
     },
+    "nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==",
+      "dev": true
+    },
     "number-is-nan": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
@@ -20600,20 +20614,21 @@
       }
     },
     "vitepress": {
-      "version": "1.0.0-alpha.13",
-      "resolved": "https://registry.npmjs.org/vitepress/-/vitepress-1.0.0-alpha.13.tgz",
-      "integrity": "sha512-gCbKb+6o0g5wHt2yyqBPk7FcvrB+MfwGtg1JMS5p99GTQR87l3b7symCl8o1ecv7MDXwJ2mPB8ZrYNLnQAJxLQ==",
+      "version": "1.0.0-alpha.14",
+      "resolved": "https://registry.npmjs.org/vitepress/-/vitepress-1.0.0-alpha.14.tgz",
+      "integrity": "sha512-GVwDeZPc/+5vgxOh0NfbKlk/QT4e20hRUdLdG+hEP8myJmM0IC4uIL7xK2G/wn6ucei9hLb0YQh677oDhCxF6g==",
       "dev": true,
       "requires": {
         "@docsearch/css": "^3.2.1",
         "@docsearch/js": "^3.2.1",
-        "@vitejs/plugin-vue": "^3.0.3",
+        "@vitejs/plugin-vue": "^3.1.0",
         "@vue/devtools-api": "^6.2.1",
-        "@vueuse/core": "^9.1.0",
+        "@vueuse/core": "^9.1.1",
         "body-scroll-lock": "^4.0.0-beta.0",
+        "nprogress": "^0.2.0",
         "shiki": "^0.11.1",
-        "vite": "^3.0.8",
-        "vue": "^3.2.37"
+        "vite": "^3.1.0",
+        "vue": "^3.2.38"
       }
     },
     "void-elements": {
diff --git a/package.json b/package.json
index 5edafb7a..6b922c03 100644
--- a/package.json
+++ b/package.json
@@ -48,9 +48,9 @@
     "validate-formatting": "./node_modules/.bin/prettier --list-different ./src/**/*.js",
     "size": "./node_modules/.bin/gulp size",
     "pre-commit-hook": "./node_modules/.bin/gulp pre-commit",
-    "docs:dev": "vitepress dev docs",
-    "docs:build": "vitepress build docs",
-    "docs:serve": "vitepress serve docs"
+    "docs-dev": "vitepress dev docs",
+    "docs-build": "vitepress build docs",
+    "docs-serve": "vitepress serve docs"
   },
   "husky": {
     "hooks": {
@@ -76,7 +76,7 @@
     "rollup": "2.52.8",
     "terser": "5.7.1",
     "web-animations-js": "2.3.2",
-    "vitepress": "^1.0.0-alpha.13",
-    "vue": "^3.2.38"
+    "vitepress": "1.0.0-alpha.14",
+    "vue": "3.2.39"
   }
 }