diff --git a/docs/.gitkeep b/docs/.gitkeep
deleted file mode 100644
index e69de29bb..000000000
diff --git a/docs/img/vaadin-grid-assigning-data.png b/docs/img/vaadin-grid-assigning-data.png
deleted file mode 100644
index 981045d1d..000000000
Binary files a/docs/img/vaadin-grid-assigning-data.png and /dev/null differ
diff --git a/docs/img/vaadin-grid-configuring-columns-basic.png b/docs/img/vaadin-grid-configuring-columns-basic.png
deleted file mode 100644
index 2f48f4dff..000000000
Binary files a/docs/img/vaadin-grid-configuring-columns-basic.png and /dev/null differ
diff --git a/docs/img/vaadin-grid-selection-column-custom.png b/docs/img/vaadin-grid-selection-column-custom.png
deleted file mode 100644
index 2603d8fbf..000000000
Binary files a/docs/img/vaadin-grid-selection-column-custom.png and /dev/null differ
diff --git a/docs/img/vaadin-grid-selection-column.png b/docs/img/vaadin-grid-selection-column.png
deleted file mode 100644
index e889680c6..000000000
Binary files a/docs/img/vaadin-grid-selection-column.png and /dev/null differ
diff --git a/docs/img/vaadin-grid-sort-indicators.png b/docs/img/vaadin-grid-sort-indicators.png
deleted file mode 100644
index 66cc966d5..000000000
Binary files a/docs/img/vaadin-grid-sort-indicators.png and /dev/null differ
diff --git a/docs/img/vaadin-grid-styling-default-modified.png b/docs/img/vaadin-grid-styling-default-modified.png
deleted file mode 100644
index 04e436c36..000000000
Binary files a/docs/img/vaadin-grid-styling-default-modified.png and /dev/null differ
diff --git a/docs/img/vaadin-grid-styling-default.png b/docs/img/vaadin-grid-styling-default.png
deleted file mode 100644
index 52f437468..000000000
Binary files a/docs/img/vaadin-grid-styling-default.png and /dev/null differ
diff --git a/docs/img/vaadin-grid-styling-sorter.png b/docs/img/vaadin-grid-styling-sorter.png
deleted file mode 100644
index 4938133bf..000000000
Binary files a/docs/img/vaadin-grid-styling-sorter.png and /dev/null differ
diff --git a/docs/img/vaadin-grid-styling-striped.png b/docs/img/vaadin-grid-styling-striped.png
deleted file mode 100644
index 829587ba2..000000000
Binary files a/docs/img/vaadin-grid-styling-striped.png and /dev/null differ
diff --git a/docs/img/vaadin-grid-styling-templates.png b/docs/img/vaadin-grid-styling-templates.png
deleted file mode 100644
index 1d199023b..000000000
Binary files a/docs/img/vaadin-grid-styling-templates.png and /dev/null differ
diff --git a/docs/vaadin-grid-assigning-data.adoc b/docs/vaadin-grid-assigning-data.adoc
deleted file mode 100644
index 1f64c8d8f..000000000
--- a/docs/vaadin-grid-assigning-data.adoc
+++ /dev/null
@@ -1,108 +0,0 @@
----
-title: Assigning Data
-order: 1
-layout: page
----
-
-[[vaadin-grid.data]]
-= Assigning Data
-
-In this section, we will show you how to get started with assigning data to your [vaadinelement]#vaadin-grid#.
-We will go through the basics of using the [propertyname]#items# API to generate a grid that looks like in <<figure.vaadin-grid.data.overview>>.
-For more advanced data assignment topics, see <<vaadin-grid-lazy-loading#vaadin-grid.lazy-loading, "Lazy Loading and Remote Data">>.
-
-[[figure.vaadin-grid.data.overview]]
-.Data with three columns
-image::img/vaadin-grid-assigning-data.png[]
-
-[[vaadin-grid.items.property]]
-== Assigning the Grid Items
-
-The [vaadinelement]#vaadin-grid#'s [propertyname]#items# API is intended for easy assignment of data.
-
-First, you need to define the columns and a mapping between object properties and the columns.
-You can do this declaratively with the body [elementname]#template# of a [elementname]#vaadin-grid-column# element, as in the following example.
-
-[source,html]
-----
-<vaadin-grid>
-  <vaadin-grid-column>
-    <template class="header">First</template>
-    <template>[[item.name.first]]<template>
-  </vaadin-grid-column>
-  <vaadin-grid-column>
-    <template class="header">Last</template>
-    <template>[[item.name.last]]<template>
-  </vaadin-grid-column>
-  <vaadin-grid-column>
-    <template class="header">Email</template>
-    <template>[[item.email]]<template>
-  </vaadin-grid-column>
-</vaadin-grid>
-----
-
-After configuring the columns, you can go ahead and assign the data array to the [propertyname]#items# property of the grid.
-
-[source,javascript]
-----
-grid.items = [
-  {
-    user: {
-      name: { first: 'amber', last: 'crawford' },
-      email: 'amber.crawford@example.com'
-    }
-  },
-  {
-    user: {
-      name: { first: 'zoe', last: 'caldwell' },
-      email: 'zoe.caldwell@example.com'
-    }
-  },
-  {
-    user: {
-      name: { first: 'jessie', last: 'brooks' },
-      email: 'jessie.brooks@example.com'
-    }
-  }
-  ...
-];
-----
-
-That's it, now your [vaadinelement]#vaadin-grid# has three rows of data.
-
-[[vaadin-grid.data.dynamic]]
-== Using Dynamic Data
-
-Any run-time changes to a previously assigned [propertyname]#items# array can be applied by using Polymer's array mutation methods.
-ifdef::web[]
-====
-See the Polymer's link:https://www.polymer-project.org/1.0/docs/devguide/model-data#work-with-arrays[Array mutation methods].
-====
-endif::web[]
-
-[source,javascript]
-----
-// Pushing a new object to the existing items array with grid.push method
-grid.push('items', {
-  user: {
-    name: { first: 'eva', last: 'burke' }, email: 'eva.burke@example.com'
-  }
-});
-
-// Changing a property of one of the grid items
-grid.set('items.0.email', 'amber.crawford@example.co.uk');
-----
-
-If the [propertyname]#items# array changes dynamically otherwise than by using Polymer's array mutation methods, the [vaadinelement]#vaadin-grid# must be explicitly notified of the changes.
-To synchronize [vaadinelement]#vaadin-grid# with the array, invoke [methodname]#notifyPath()# with the exact path of the changes as the parameter.
-
-[source,javascript]
-----
-// In this case, 'user' is a reference to one of the items in 'items' array
-// but the email is changed without the help of Polymer's array mutation methods
-user.email = 'amber.crawford@example.co.uk';
-
-// Explicitly notify the grid of changed data to make it update
-grid.notifyPath('items.0.email', email);
-
-----
diff --git a/docs/vaadin-grid-configuring-columns.adoc b/docs/vaadin-grid-configuring-columns.adoc
deleted file mode 100644
index f7665b9e2..000000000
--- a/docs/vaadin-grid-configuring-columns.adoc
+++ /dev/null
@@ -1,176 +0,0 @@
----
-title: Configuring Columns
-order: 0
-layout: page
----
-
-[[vaadin-grid.columns]]
-= Configuring Columns
-
-In this section, we will show you how to define and configure columns for your [vaadinelement]#vaadin-grid#.
-We will go through the basics of using header, footer and body templates and also take a look into defining groups of columns.
-
-
-[[vaadin-grid.columns.templates]]
-== Column Templates
-
-A [vaadinelement]#vaadin-grid-column# is used to configure how a column in [vaadinelement]#vaadin-grid# should look like by using HTML templates.
-A column can have a template for each of the three table sections: header, body and footer.
-
-[propertyname]#class# is used to differentiate header and footer templates
-from the body template.
-
-[source,html]
-----
-<vaadin-grid-column>
-  <template class="header">I'm in the header</template>
-  <template>I'm in the body</template>
-  <template class="footer">I'm in the footer</template>
-</vaadin-grid-column>
-----
-
-For information how to assign data for the templates, see <<vaadin-grid-assigning-data#vaadin-grid.data, "Assigning Data">>.
-
-[[vaadin-grid.columns.assigning]]
-== Assigning Columns
-
-Assigning columns to a [vaadinelement]#vaadin-grid# is done simply by appending them as children.
-
-[source,html]
-----
-<vaadin-grid>
-  <vaadin-grid-column>
-    <template class="header">I'm in the first header</template>
-    <template>I'm in the first body cell</template>
-    <template class="footer">I'm in the first footer</template>
-  </vaadin-grid-column>
-  <vaadin-grid-column>
-    <template class="header">I'm in the second header</template>
-    <template>I'm in the second body cell</template>
-    <template class="footer">I'm in the second footer</template>
-  </vaadin-grid-column>
-</vaadin-grid>
-----
-
-[[figure.vaadin-grid.columns.basic]]
-.Two Columns
-image::img/vaadin-grid-configuring-columns-basic.png[]
-
-
-[[vaadin-grid.columns.groups]]
-== Grouping Columns
-
-In cases when there are many columns, it might help the visual appearance to group related
-columns under a common header.
-
-This can be achieved by wrapping the columns inside a [vaadinelement]#vaadin-grid-column-group#.
-You can also place nested groups inside the group, if you like.
-
-NOTE: You *must* explicitly import the `vaadin-grid-column-group.html` in order to use [vaadinelement]#vaadin-grid-column-group#.
-
-[source,html]
-----
-<vaadin-grid>
-  <vaadin-grid-column-group>
-    <template class="header">I'm in the group header</template>
-    <template class="footer">I'm in the group footer</template>
-    <vaadin-grid-column>
-      <template class="header">I'm in the first header</template>
-      <template>I'm in the first body cell</template>
-      <template class="footer">I'm in the first footer</template>
-    </vaadin-grid-column>
-    <vaadin-grid-column>
-      <template class="header">I'm in the second header</template>
-      <template>I'm in the second body cell</template>
-      <template class="footer">I'm in the second footer</template>
-    </vaadin-grid-column>
-  </vaadin-grid-column-group>
-</vaadin-grid>
-----
-
-[[vaadin-grid.columns.frozen]]
-== Freezing Columns
-
-When a column is frozen, it stays in place when the table is scrolled horizontally.
-Freezing is done by applying [propertyname]#frozen# to the column.
-
-[source,html]
-----
-<vaadin-grid-column frozen>
-  <!-- I'm frozen -->
-</vaadin-grid-column>
-----
-
-[propertyname]#frozen# can also be applied to a [vaadinelement]#vaadin-grid-column-group# which
-will freeze all the columns inside that group.
-
-[source,html]
-----
-<vaadin-grid-column-group frozen>
-  <vaadin-grid-column>
-    <!-- I'm frozen -->
-  </vaadin-grid-column>
-  <vaadin-grid-column>
-    <!-- I'm frozen -->
-  </vaadin-grid-column>
-</vaadin-grid-column-group>
-----
-
-Additionally, if a column inside a column group is frozen, also the other columns group become frozen.
-
-[source,html]
-----
-<vaadin-grid-column-group>
-  <vaadin-grid-column frozen>
-    <!-- I'm frozen -->
-  </vaadin-grid-column>
-  <vaadin-grid-column>
-    <!-- I'm frozen -->
-  </vaadin-grid-column>
-</vaadin-grid-column-group>
-----
-
-[[vaadin-grid.columns.hidden]]
-== Hiding Columns
-
-When a column is hidden, it is not visible in the table.
-Hiding is done by applying [propertyname]#hidden# to the [vaadinelement]#vaadin-grid-column# or [vaadinelement]#vaadin-grid-column-group#.
-
-[source,html]
-----
-<vaadin-grid-column hidden>
-  <!-- I'm hidden -->
-</vaadin-grid-column>
-----
-
-[[vaadin-grid.columns.reordering]]
-== Reordering Columns
-
-Switch on the [vaadinelement]#vaadin-grid#'s [propertyname]#column-reordering-allowed# flag to make the visible columns reorderable.
-
-When column reordering is allowed, the user can drag and drop columns by their header cells to change their visual order.
-
-[NOTE]
-Columns cannot be dragged from one [vaadinelement]#vaadin-grid-column-group# to another.
-Also, columns in the frozen columns section can't be dragged to the non-frozen columns' section and vice versa.
-
-[source,html]
-----
-<vaadin-grid column-reordering-allowed>
-  ...
-</vaadin-grid>
-----
-
-[[vaadin-grid.columns.resizable]]
-== Resizing Columns
-
-Switch on [vaadinelement]#vaadin-grid-column#'s or [vaadinelement]#vaadin-grid-column-group#'s [propertyname]#resizable# flag to enable resizing controls for that column.
-This will reveal a resize handle by the right edge of the column header.
-User can then grab and move the handle to resize the column.
-
-[source,html]
-----
-<vaadin-grid-column resizable>
-  <!-- I'm resizable -->
-</vaadin-grid-column>
-----
diff --git a/docs/vaadin-grid-lazy-loading.adoc b/docs/vaadin-grid-lazy-loading.adoc
deleted file mode 100644
index dfae39dcd..000000000
--- a/docs/vaadin-grid-lazy-loading.adoc
+++ /dev/null
@@ -1,162 +0,0 @@
----
-title: Lazy Loading and Remote Data
-order: 2
-layout: page
----
-
-[[vaadin-grid.lazy-loading]]
-= Lazy Loading and Remote Data
-
-In this section, you will learn how to use functions as data providers.
-This enables you to use lazy loading and remote data, such as with REST APIs.
-
-[[vaadin-grid.lazy-loading.functions]]
-== Function Data Provider
-
-In addition to assigning an array to the [propertyname]#items# property, you can alternatively provide the [vaadinelement]#vaadin-grid# data through the [propertyname]#dataProvider# function.
-The [vaadinelement]#vaadin-grid# element calls this function lazily, only when it needs more data to be displayed.
-
-The function takes two parameters: a `params` object and a `callback` function.
-The `params` object provides `page` and `pageSize` properties, expressing the index of the page for which
-data should be returned, and how many items one page of data should consist of.
-
-The `callback` parameter is a callback function which you must invoke with an array of the requested items as the parameter.
-
-[source,javascript]
-----
-var employees = [
-  {
-    user: {
-      name: { first: 'amber', last: 'crawford' },
-      email: 'amber.crawford@example.com'
-    }
-  },
-  {
-    user: {
-      name: { first: 'zoe', last: 'caldwell' },
-      email: 'zoe.caldwell@example.com'
-    }
-  },
-  {
-    user: {
-      name: { first: 'jessie', last: 'brooks' },
-      email: 'jessie.brooks@example.com'
-    }
-  }
-  ...
-];
-
-grid.size = employees.length;
-grid.dataProvider = function(params, callback) {
-  var start = params.pageSize * params.page;
-  callback(employees.slice(start, start + params.pageSize));
-};
-----
-
-When using function data providers, [propertyname]#size# always needs to be set manually.
-
-[[vaadin-grid.lazy-loading.remote]]
-== Remote Data
-
-Using remote data does not differ much from using arrays within a function data provider.
-You just need make sure you are handing an array of data over to the `callback` function.
-
-The `page` and `pageSize` properties from the `params` argument come in handy if you are using a
-REST API that supports fetching partial result sets.
-
-[source,javascript]
-----
-grid.dataProvider = function(params, callback) {
-  var url = 'https://my.data/data?page=' + params.page + '&per_page=' + params.pageSize;
-  var xhr = new XMLHttpRequest();
-  xhr.onload = function() {
-    var response = JSON.parse(xhr.responseText);
-    callback(response.employees);
-  };
-
-  xhr.open('GET', url, true);
-  xhr.send();
-};
-----
-
-
-[[vaadin-grid.lazy-loading.size]]
-== Defining the Data Set Size
-In most cases when using remote data, you cannot know the size of the data set in advance.
-The following describes a few examples on how you could set the [propertyname]#size# in different scenarios.
-
-* There is a separate API for fetching the size.
-+
-[source,javascript]
-----
-// Define a function that you call manually every time
-// you believe the size might've changed.
-function setSize() {
-  var url = 'https://my.data/size';
-  var xhr = new XMLHttpRequest();
-    xhr.onload = function() {
-      grid.size = JSON.parse(xhr.responseText).totalSize);
-    };
-    xhr.open('GET', url, true);
-    xhr.send();
-  };
-}
-----
-
-* The size is delivered with the data payload.
-+
-[source,javascript]
-----
-grid.dataProvider = function(params, callback) {
-  var url = 'https://my.data/data?page=' + params.page + '&per_page=' + params.pageSize;
-  var xhr = new XMLHttpRequest();
-  xhr.onload = function() {
-    var response = JSON.parse(xhr.responseText);
-    callback(response.employees);
-
-    // Assign size from the data payload.
-    grid.size = response.totalSize;
-  };
-
-  xhr.open('GET', url, true);
-  xhr.send();
-};
-----
-
-* There is no API for getting the total size at all.
-+
-[source,javascript]
-----
-// Set an initial size.
-grid.size = 10;
-
-grid.dataProvider = function(params, callback) {
-  var url = 'https://my.data/data?page=' + params.page + '&per_page=' + params.pageSize;
-  var xhr = new XMLHttpRequest();
-  xhr.onload = function() {
-    var response = JSON.parse(xhr.responseText);
-    callback(response.employees);
-
-    // Increase the size dynamically, resulting in "infinite" scrolling.
-    var nextPageStart = params.pageSize * (params.page + 1);
-    if (nextPageStart >= grid.size) {
-      grid.size += 10;
-    }
-  };
-
-  xhr.open('GET', url, true);
-  xhr.send();
-};
-----
-
-[[vaadin-grid.lazy-loading.change]]
-== Changing the data
-
-In case the provider of the data changes so that formerly fetched data might no longer be up-to-date, you can request the [vaadinelement]#vaadin-grid# to clear it's cache of previously loaded items by calling [propertyname]#clearCache# function.
-
-This will result in the [vaadinelement]#vaadin-grid# requesting the data provider for a fresh set of items to cover the rows currently visible.
-
-[source,javascript]
-----
-grid.clearCache();
-----
diff --git a/docs/vaadin-grid-row-details.adoc b/docs/vaadin-grid-row-details.adoc
deleted file mode 100644
index 605ebb3de..000000000
--- a/docs/vaadin-grid-row-details.adoc
+++ /dev/null
@@ -1,149 +0,0 @@
----
-title: Row Details
-order: 3
-layout: page
----
-
-[[vaadin-grid.row-details]]
-= Row Details
-
-[[vaadin-grid.row-details.templates]]
-== Defining a Template
-
-In order to use row details, a template must be defined.
-The row details template has to be set as a direct child of [vaadinelement]#vaadin-grid# and it must have `class="row-details"`.
-The same variables can be used inside the template as in cell templates, namely [propertyname]#index#, [propertyname]#item#, [propertyname]#selected# and [propertyname]#expanded#.
-
-[source,html]
-----
-<vaadin-grid>
-  <template class="row-details">
-    These are the details for [[item.value]]!
-  </template>
-  <vaadin-grid-column>
-     ...
-  </vaadin-grid-column>
-</vaadin-grid>
-----
-
-[[vaadin-grid.row-details.expanding-rows]]
-== Expanding Rows
-
-After a template has been set, details can be expanded and collapsed in various ways.
-
-API can be used to expand and collapse items using reference to the item object:
-
-[source,javascript]
-----
-grid.expandItem(item1);
-grid.collapseItem(item2);
-----
-
-[[vaadin-grid.row-details.accessing]]
-== Accessing Expanded Items
-
-After details have been expanded for a row, you can use [propertyname]#expandedItems# to access them.
-
-[source,html]
-----
-<vaadin-grid expanded-items="{{expandedItems}}">
-  <template class="row-details">
-    These are the details for [[item.value]]!
-  </template>
-  <vaadin-grid-column>
-     ...
-  </vaadin-grid-column>
-</vaadin-grid>
-
-<ul>Currently Expanded:
-  <template is="dom-repeat" items="[[expandedItems]]">
-    <li>[[item.value]</li>
-  </template>
-</ul>
-----
-
-[NOTE]
-Similarily to [propertyname]#selectedItems#, [propertyname]#expandedItems# will be cleared when the data provider is updated.
-
-[propertyname]#expandedItems# can also be modified to expand or collapse row details. This is especially handy when you want to close all expanded details:
-
-[source,javascript]
-----
-grid.expandedItems = []; //closes all expanded details.
-grid.push('expandedItems', item); //expands row details for 'item'
-----
-
-[NOTE]
-When modifying [propertyname]#expandedItems#, remember to use the array mutation methods from Polymer.Base
-
-[[vaadin-grid.row-details.activeitem]]
-== Expanding and Collapsing Items on activation
-
-You can listen to [propertyname]#active-item-changed# event which is fired whenever a user activates a row in the grid. Then you can access the last activated item by using the [propertyname]#activeItem# of the grid.
-
-[source,html]
-----
-<vaadin-grid id="grid" active-item-changed="_onActiveItemChanged">
-  <template class="row-details">
-    These are the details for [[item.value]]!
-  </template>
-  <vaadin-grid-column>
-     ...
-  </vaadin-grid-column>
-</vaadin-grid>
-<script>
-  ...
-    _onActiveItemChanged: function(e) {
-      var item = e.detail.value;
-
-      this.$.grid.expandedItems = item ? [item] : [];
-    }
-  ...
-</script>
-----
-
-[[vaadin-grid.row-details.bindings]]
-== Expanding and Collapsing Items using Two-Way binding
-
-A variable [propertyname]#expanded# is available inside the row detail template. It is a Boolean variable which can be used two-way to determine if the details are expanded for this item.
-
-[source,html]
-----
-<vaadin-grid>
-  <template class="row-details">
-    These are the details for [[item.value]]!
-  </template>
-  <vaadin-grid-column>
-    ...
-  </vaadin-grid-column>
-  <vaadin-grid-column width="30px" flex-grow="0">
-    <template>
-      <paper-checkbox checked="{{expanded}}">Details</paper-checkbox>
-    </template>
-  </vaadin-grid-column>
-</vaadin-grid>
-----
-
-[[vaadin-grid.row-details.styling]]
-== Styling Row Details
-
-Same way as with other templates, their contents can be fully styled by placing CSS rules in the same scope with [vaadinelement]#vaadin-grid#:
-
-[source,html]
-----
-<style>
-  vaadin-grid .details {
-    background-color: red;
-  }
-</style>
-<vaadin-grid>
-  <template class="row-details">
-    <div class="details">
-      These are the details for [[item.value]]!
-    </div>
-  </template>
-  <vaadin-grid-column>
-     ...
-  </vaadin-grid-column>
-</vaadin-grid>
-----
diff --git a/docs/vaadin-grid-selection.adoc b/docs/vaadin-grid-selection.adoc
deleted file mode 100644
index 88e1a0250..000000000
--- a/docs/vaadin-grid-selection.adoc
+++ /dev/null
@@ -1,145 +0,0 @@
----
-title: Selection
-order: 4
-layout: page
----
-
-[[vaadin-grid.selection]]
-== Selection
-
-By default, any number of items in the grid can be marked as selected, either programmatically or through the user interaction.
-The rows representing the selections are highlighted visually, and the selected items are bi-directionally bound to the [propertyname]#selectedItems# property of the grid.
-
-The following sections cover the basics on how to set up a column that provides a UI for selecting items, how to programmatically modify the selections, and how to bind to the selected state of items in column templates.
-
-[[vaadin-grid.selection.binding]]
-== Binding to the Selection State
-
-The Two-way binding [propertyname]#selected# property inside templates can be used to allow users to select rows.
-
-[source,html]
-----
-<vaadin-grid items='["One", "Two", "Tree"]'>
-  <vaadin-grid-column>
-    <template>
-      <paper-checkbox checked="{{selected}}"></paper-checkbox>
-    </template>
-  </vaadin-grid-column>
-  <vaadin-grid-column width="50px" flex-grow="0">
-    <template class="header">Number</template>
-    <template>[[item]]</template>
-  </vaadin-grid-column>
-</vaadin-grid>
-----
-
-[[vaadin-grid.selection.column]]
-== Using the Selection Column
-
-You can use the [vaadinelement]#vaadin-grid-selection-column# helper element to get default templates and functionality for the selection.
-With it the user can select rows using checkboxes displayed in a column.
-
-When [vaadinelement]#vaadin-grid# is configured with an array of items as the data provider, the [vaadinelement]#vaadin-grid-selection-column# provides the feature of selecting all the items by clicking on the checkbox in the header.
-
-[source,html]
-----
-<vaadin-grid items='["One", "Two", "Three"]'>
-  <vaadin-grid-selection-column>
-  </vaadin-grid-selection-column>
-  <vaadin-grid-column width="50px" flex-grow="0">
-    <template class="header">Number</template>
-    <template>[[item]]</template>
-  </vaadin-grid-column>
-</vaadin-grid>
-----
-
-NOTE: You *must* explicitly import the `vaadin-grid-selection-column.html` in order to use [vaadinelement]#vaadin-grid-selection-column#.
-
-[[figure.vaadin-grid.selection.column]]
-image::img/vaadin-grid-selection-column.png[width="450"]
-
-In addition, you can customize the selection column by changing its [propertyname]#width#, [propertyname]#flexGrow# and [propertyname]#frozen# properties, or by providing your own templates.
-
-[source,html]
-----
-<vaadin-grid items='["One", "Two", "Three"]'>
-  <vaadin-grid-column width="50px" flex-grow="0">
-    <template class="header">Number</template>
-    <template>[[item]]</template>
-  </vaadin-grid-column>
-
-  <vaadin-grid-selection-column width="40px" flex-grow="0" select-all="[[selectAll]]">
-    <template class="header">
-      <paper-checkbox checked="{{selectAll}}"></paper-checkbox>
-    </template>
-    <template>
-      <paper-checkbox checked="{{selected}}"></paper-checkbox>
-    </template>
-  </vaadin-grid-selection-column>
-</vaadin-grid>
-----
-
-[[figure.vaadin-grid.selection.column]]
-image::img/vaadin-grid-selection-column-custom.png[width="450"]
-
-[[vaadin-grid.selection.api]]
-== Using the Selection API
-
-This section explains the basic operations available through the selection API.
-
-[methodname]#grid.selectItem(item)#::
-  Selects the row with the given item.
-
-[methodname]#grid.deselectItem(item)#::
-  Deselects the row with the given item.
-
-[propertyname]#selectedItems#::
-  Property that represents the Array of currently selected items. You can either use [methodname]#selectItem# and [methodname]#deselectItem# methods to modify the Array, or modify the [propertyname]#selectedItems# array directly by using Polymer's array mutation API.
-
-[source,javascript]
-----
-// Log the selections to console on select event.
-// Example output: "Selected: 3,5,6"
-grid.addEventListener('selected-items-changed', function() {
-  console.log('Selected: ' + grid.selectedItems);
-});
-----
-
-[[vaadin-grid.selection.selecteditems]]
-== Customizing the Selection behavior
-
-In case you want to modify the default selection behavior, you can interact directly with the [propertyname]#selectedItems# array.
-
-For instance in the next example, we implement a single selection model by setting the [propertyname]#selectedItems# property with the last selected item.
-
-[source,javascript]
-----
-<grid-single-selection></grid-single-selection>
-
-<dom-module id="grid-single-selection">
-  <template>
-    <vaadin-grid id="grid" items='["One", "Two", "Tree"]'>
-      <vaadin-grid-column width="50px" flex-grow="0">
-        <template class="header">Number</template>
-        <template>[[item]]</template>
-      </vaadin-grid-column>
-
-      <vaadin-grid-column width="40px" flex-grow="0">
-        <template>
-          <input type="checkbox" on-change="_onSelectionChange" checked="[[selected]]"></input>
-        </template>
-      </vaadin-grid-column>
-    </vaadin-grid>
-  </template>
-  <script>
-  document.addEventListener('WebComponentsReady', function() {
-    Polymer({
-      is: 'grid-single-selection',
-
-      _onSelectionChange: function(e) {
-        this.$.grid.selectedItems = e.target.checked ? [e.model.item] : [];
-      }
-    });
-  });
-  </script>
-</dom-module>
-----
diff --git a/docs/vaadin-grid-sorting-filtering.adoc b/docs/vaadin-grid-sorting-filtering.adoc
deleted file mode 100644
index f7afad273..000000000
--- a/docs/vaadin-grid-sorting-filtering.adoc
+++ /dev/null
@@ -1,207 +0,0 @@
----
-title: Sorting and Filtering
-order: 5
-layout: page
----
-
-[[vaadin-grid.sorting.filtering]]
-= Sorting and Filtering
-
-This section will cover the basics of utilizing the [vaadinelement]#vaadin-grid#'s sorting and filtering helpers.
-Using the helpers will automatically affect the [vaadinelement]#vaadin-grid#'s visible data when using an array data provider as described in <<vaadin-grid-assigning-data#vaadin-grid.items.property, "Assigning the Grid Items">>.
-The helpers are useful with custom data providers also since they provide out-of-the-box UI controls, visual feedback and hook to the data provider callback parameters.
-
-[[figure.vaadin-grid.sorting.overview]]
-.A [vaadinelement]#vaadin-grid# displaying three sorting indicators
-image::img/vaadin-grid-sort-indicators.png[]
-
-[[vaadin-grid.sorting]]
-== Sorting Data
-
-Sorting tabular data by clicking the column headers is quite a common use case.
-With [vaadinelement]#vaadin-grid# this can be enabled with the help of [elementname]#vaadin-grid-sorter# helper elements.
-
-NOTE: You *must* explicitly import the `vaadin-grid-sorter.html` in order to use [vaadinelement]#vaadin-grid-sorter#.
-
-To demonstrate the functionality, let's first hook some data to a [vaadinelement]#vaadin-grid#:
-
-[source,javascript]
-----
-grid.items = [
-  {
-    user: {
-      name: { first: 'amber', last: 'crawford' },
-      email: 'amber.crawford@example.com'
-    }
-  },
-  {
-    user: {
-      name: { first: 'zoe', last: 'caldwell' },
-      email: 'zoe.caldwell@example.com'
-    }
-  },
-  {
-    user: {
-      name: { first: 'jessie', last: 'brooks' },
-      email: 'jessie.brooks@example.com'
-    }
-  }
-  ...
-];
-----
-
-The data consists of users with three relevant attributes.
-So let's define a simple [vaadinelement]#vaadin-grid# with three columns.
-
-[source,html]
-----
-<vaadin-grid>
-  <vaadin-grid-column>
-    <template class="header">First</template>
-    <template>[[item.name.first]]<template>
-  </vaadin-grid-column>
-  <vaadin-grid-column>
-    <template class="header">Last</template>
-    <template>[[item.name.last]]<template>
-  </vaadin-grid-column>
-  <vaadin-grid-column>
-    <template class="header">
-      <vaadin-grid-sorter path="email">
-        Email
-      </vaadin-grid-sorter>
-    </template>
-    <template>[[item.email]]<template>
-  </vaadin-grid-column>
-</vaadin-grid>
-----
-
-Notice that unlike the first two columns, the last column's label is wrapped in a [elementname]#vaadin-grid-sorter# element.
-The [propertyname]#path# property on the helper element represents the item's (sub)property by which the data should be sorted.
-Without further effort, this makes the label clickable and adds a sorting indicator to the right of it.
-That's all it takes to configure a three column [vaadinelement]#vaadin-grid# with sorting enabled.
-
-Toggling the sorting of a [elementname]#vaadin-grid-sorter# changes its [propertyname]#direction# value between the states of 'asc', 'desc' and ''.
-Namely the first two refer to ascending and descending sort order.
-Empty value means the [elementname]#vaadin-grid-sorter# doesn't affect the sorting.
-
-A predefined sorting order can also be achieved by decorating the [elementname]#vaadin-grid-sorter#'s with initial [propertyname]#direction# values:
-
-[source,html]
-----
-<vaadin-grid>
-  <vaadin-grid-column>
-    <vaadin-grid-sorter path="name.last" direction="asc">
-      Last name
-    </vaadin-grid-sorter>
-    <template>[[item.name.last]]<template>
-  </vaadin-grid-column>
-  <vaadin-grid-column>
-    <template class="header">
-      <vaadin-grid-sorter path="email" direction="desc">
-        Email
-      </vaadin-grid-sorter>
-    </template>
-    <template>[[item.email]]<template>
-  </vaadin-grid-column>
-</vaadin-grid>
-----
-
-This example will result in a two column [vaadinelement]#vaadin-grid# with both columns having a predefined sort direction.
-Clicking the column headers will again change the sort order with the last click always defining the primary sorting value.
-
-[[vaadin-grid.sorting.custom.dataprovider]]
-== Sorting Data with a Custom Data Provider
-
-When the data is fetched from a custom data provider, the responsibility of providing correctly ordered data is on the data provider itself.
-The data provider is asked for fresh sorted data whenever the sorting order is changed trough any [elementname]#vaadin-grid-column#.
-
-The effective [propertyname]#sortOrders# array will be included as one of the data provider callback parameters so it can be utilized by the data provider.
-
-[source,javascript]
-----
-grid.dataProvider = function(params, callback) {
-  var url = 'https://my.data/data?page=' + params.page +
-  '&per_page=' + params.pageSize +
-  // Include the sort orders to the request
-  '&sort_orders=' + JSON.stringify(params.sortOrders);
-
-  var xhr = new XMLHttpRequest();
-  xhr.onload = function() {
-    var response = JSON.parse(xhr.responseText);
-    callback(response.employees);
-  };
-
-  xhr.open('GET', url, true);
-  xhr.send();
-};
-----
-
-[[vaadin-grid.filtering]]
-== Filtering Data
-
-Filtering helpers behave similarly to [vaadinelement]#vaadin-grid#'s sorting helpers.
-
-Place a [elementname]#vaadin-grid-filter# element with a [propertyname]#path# defined into a header/footer cell to show an input field that automatically filters the [vaadinelement]#vaadin-grid#'s data when using an array data provider.
-
-The element helps in filtering with custom data providers also since they automatically include filtering information to the data provider callback parameters.
-
-NOTE: You *must* explicitly import the `vaadin-grid-filter.html` in order to use [vaadinelement]#vaadin-grid-filter#.
-
-[source,html]
-----
-<vaadin-grid>
-  <vaadin-grid-column>
-    <template class="header">First</template>
-    <template>[[item.name.first]]<template>
-  </vaadin-grid-column>
-  <vaadin-grid-column>
-    <template class="header">Last</template>
-    <template>[[item.name.last]]<template>
-  </vaadin-grid-column>
-  <vaadin-grid-column>
-    <template class="header">
-      <vaadin-grid-filter path="email"></vaadin-grid-filter>
-    </template>
-    <template>[[item.email]]<template>
-  </vaadin-grid-column>
-</vaadin-grid>
-----
-
-The code snippet above produces a three-column [vaadinelement]#vaadin-grid# with a filtering input that targets the data items' [propertyname]#email# property.
-
-By default, the [elementname]#vaadin-grid-filter# shows a plain text input field, but you can replace it by including another element inside the [elementname]#vaadin-grid-filter#.
-The replacing element needs to be properly bound to the [elementname]#vaadin-grid-filter#'s [propertyname]#value# property to make it work as a filtering input.
-The following example uses a [elementname]#paper-input# as a filter field.
-
-[source,html]
-----
-<vaadin-grid-filter path="email" value="[[_emailFilter]]">
-  <paper-input value={{_emailFilter}}></paper-input>
-</vaadin-grid-filter>
-----
-
-[[vaadin-grid.filtering.custom.dataprovider]]
-== Filtering Data with a Custom Data Provider
-
-While filtering works with array data providers out-of-the-box, custom data providers need to provide pre-filtered data to the [vaadinelement]#vaadin-grid#.
-
-Whenever the value of a [elementname]#vaadin-grid-filter# changes (for example when a user types something) the [propertyname]#dataProvider# is asked for fresh data with filtering information included in the request.
-
-[source,javascript]
-----
-grid.dataProvider = function(params, callback) {
-  var url = 'https://my.data/data?page=' + params.page +
-  '&per_page=' + params.pageSize +
-  // Include the filtering information to the request
-  '&filters=' + JSON.stringify(params.filters);
-
-  var xhr = new XMLHttpRequest();
-  xhr.onload = function() {
-    var response = JSON.parse(xhr.responseText);
-    callback(response.employees);
-  };
-
-  xhr.open('GET', url, true);
-  xhr.send();
-};
-----
diff --git a/docs/vaadin-grid-styling.adoc b/docs/vaadin-grid-styling.adoc
deleted file mode 100644
index 931c160e4..000000000
--- a/docs/vaadin-grid-styling.adoc
+++ /dev/null
@@ -1,164 +0,0 @@
----
-title: Styling
-order: 6
-layout: page
----
-
-[[vaadin-grid.styling]]
-= Styling
-
-The default appearance of [vaadinelement]#vaadin-grid# is quite neutral.
-It inherits CSS properties such as [propertyname]#font-size# from the containing document, data rows are divided with gray borders, and selected rows get highlighted.
-
-[[figure.vaadin-grid.styling.default]]
-image::img/vaadin-grid-styling-default.png[width="450"]
-
-This section explains how to customize the [vaadinelement]#vaadin-grid#'s appearance to make it fit your application theme by using the built-in style mixins, and how to leverage the column templates for further modifications.
-
-See the link:https://cdn.vaadin.com/vaadin-core-elements/preview/vaadin-grid/demo/styling.html[live demos] for more thorough examples on how the grid can be modified to comply link:https://material.io/guidelines/components/data-tables.html[Material Design] specification, how to define data rows with rounded borders and more.
-
-[[vaadin-grid.styling.mixins]]
-== Styling With Style Mixins
-
-The vaadin-grid bundles a set of pre-defined style mixins intended for easy styling of the grid's cells in various different states and contexts.
-
-For example you might want a specific background color just for the header cells, or to separate the frozen columns from others by a drop shadow.
-The style mixins of [vaadinelement]#vaadin-grid# are the right tool for that.
-
-[NOTE]
-====
-If you're not familiar with how style mixins work, take a look to the Polymer link:https://www.polymer-project.org/1.0/docs/devguide/styling#custom-css-mixins[guide on custom CSS mixins].
-====
-
-A comprehensive list of [vaadinelement]#vaadin-grid# style mixins is available at the link:https://cdn.vaadin.com/vaadin-core-elements/preview/vaadin-grid/[API documentation].
-
-The following example demonstrates how you could achieve a striped, borderless [vaadinelement]#vaadin-grid# with the header section colored differently.
-
-[source,html]
-----
-<style is="custom-style">
-  vaadin-grid {
-
-    --divider-color: transparent;
-
-    --vaadin-grid-body-row-odd-cell: {
-      background-color: #d6d6d6;
-    };
-
-    --vaadin-grid-header-cell: {
-      background-color: #42849e;
-      color: #fff;
-      text-transform: uppercase;
-    };
-
-  }
-</style>
-----
-
-[[figure.vaadin-grid.styling.striped]]
-image::img/vaadin-grid-styling-striped.png[width="450"]
-
-By default, [vaadinelement]#vaadin-grid# divides its data rows with horizontal borders.
-Borders are also used for separating the header and footer sections from the body and the frozen columns from non-frozen ones.
-Their color defaults to [propertyname]#--divider-color# CSS property if available, otherwise, a fallback color is used.
-
-Another default style in [vaadinelement]#vaadin-grid# is the background color of selected rows.
-It derives from [propertyname]#--paper-grey-100# and when not available, a fallback color is used.
-
-Changing the [vaadinelement]#vaadin-grid#'s border color and the background color of selected row cells can be achieved as follows.
-
-[source,html]
-----
-<style is="custom-style">
-  vaadin-grid {
-
-    --divider-color: #eaebec;
-
-    --vaadin-grid-body-row-selected-cell: {
-      background-color: #d8f4fd;
-    };
-
-  }
-</style>
-----
-
-[[figure.vaadin-grid.styling.default-modified]]
-image::img/vaadin-grid-styling-default-modified.png[width="450"]
-
-The [vaadinelement]#vaadin-grid-sorter# also exposes a set of it's own link:https://cdn.vaadin.com/vaadin-core-elements/preview/vaadin-grid/#vaadin-grid-sorter[style mixins].
-The following example shows how to customize [vaadinelement]#vaadin-grid-sorter#.
-
-[source,html]
-----
-<style is="custom-style">
-  vaadin-grid-sorter {
-    --vaadin-grid-sorter-arrow: {
-      content: "\21E7";
-    }
-  }
-</style>
-----
-
-[[figure.vaadin-grid.styling.sorter]]
-image::img/vaadin-grid-styling-sorter.png[width="450"]
-
-
-[[vaadin-grid.styling.templates]]
-== Custom Styling With Column Templates
-
-In addition to the style mixins, column templates provide a handy means for making specific style adjustments to [vaadinelement]#vaadin-grid# cells.
-Since the cell content doesn't get hidden inside the [vaadinelement]#vaadin-grid#'s shadow root, it can be targeted with standard CSS selectors.
-
-For example, you might want to align columns with numeric data to the right and have the frozen columns styled with a different background.
-
-[source,html]
-----
-<style is="custom-style">
-  vaadin-grid {
-    --vaadin-grid-cell: {
-      padding: 0;
-    };
-  }
-
-  .cell {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    padding: 8px;
-  }
-
-  .frozen {
-    background: #54c6ea;
-  }
-
-  .numeric {
-    text-align: right;
-  }
-</style>
-
-...
-
-<vaadin-grid-column width="100px" frozen>
-  <template class="header">
-    <div class="cell frozen">User Name</div>
-  </template>
-  <template>
-    <div class="cell frozen">[[item.username]]</div>
-  </template>
-</vaadin-grid-column>
-
-...
-
-<vaadin-grid-column>
-  <template class="header">
-    <div class="cell numeric">Age</div>
-  </template>
-  <template>
-    <div class="cell numeric">[[item.age]]</div>
-  </template>
-</vaadin-grid-column>
-----
-
-[[figure.vaadin-grid.styling.templates]]
-image::img/vaadin-grid-styling-templates.png[width="450"]