From c86b28a7ab9dad763435b09479c98b075ca40f65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?"J.=20Rene=CC=81e=20Beach"?= <splendidnoise@gmail.com>
Date: Fri, 9 Nov 2012 15:45:52 -0500
Subject: [PATCH] debugging the controller error
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: J. Renée Beach <splendidnoise@gmail.com>
---
 core/modules/grid/config/grid.ninesixty_12.yml     |    9 +
 core/modules/grid/config/grid.ninesixty_16.yml     |    9 +
 core/modules/grid/config/grid.six_column_fluid.yml |    9 +
 .../grid/config/grid.three_column_fluid.yml        |    9 +
 .../grid/config/grid.twelve_column_fluid.yml       |    9 +
 core/modules/grid/grid.info                        |   15 +
 core/modules/grid/grid.module                      |   26 +
 core/modules/grid/lib/Drupal/grid/Grid.php         |   81 +++
 core/modules/grid/lib/Drupal/grid/GridBundle.php   |   25 +
 .../grid/lib/Drupal/grid/Plugin/GridInterface.php  |   30 ++
 .../lib/Drupal/grid/Plugin/Type/GridManager.php    |   27 +
 .../Drupal/grid/Plugin/grid/grid/EqualColumn.php   |  100 ++++
 core/modules/layout/layout.info                    |    7 +
 core/modules/layout/layout.module                  |   12 +-
 core/modules/layout/tests/layout_test.info         |    7 +
 .../layout_test_theme/layout_test_theme.info       |    7 +
 core/modules/page/config/page.front_page.yml       |    8 +
 core/modules/page/config/page.not_admin_page.yml   |    8 +
 core/modules/page/config/page.user_page.yml        |    8 +
 .../page/layouts/static/complex/complex.yml        |    2 +
 core/modules/page/layouts/static/simple/simple.yml |    2 +
 core/modules/page/lib/Drupal/page/Page.php         |   66 +++
 .../page/lib/Drupal/page/PageFormController.php    |  109 ++++
 .../page/lib/Drupal/page/PageListController.php    |   71 +++
 core/modules/page/page.admin.inc                   |  120 +++++
 core/modules/page/page.info                        |   15 +
 core/modules/page/page.module                      |  176 +++++++
 core/modules/region/config/region.body.yml         |    2 +
 core/modules/region/config/region.footer_a.yml     |    2 +
 core/modules/region/config/region.footer_b.yml     |    2 +
 core/modules/region/config/region.footer_c.yml     |    2 +
 core/modules/region/config/region.header_a.yml     |    2 +
 core/modules/region/config/region.header_b.yml     |    2 +
 core/modules/region/config/region.header_c.yml     |    2 +
 core/modules/region/config/region.navigation.yml   |    2 +
 core/modules/region/config/region.sidebar_a.yml    |    2 +
 core/modules/region/config/region.sidebar_b.yml    |    2 +
 core/modules/region/config/region.sidebar_c.yml    |    2 +
 core/modules/region/config/region.subheader_a.yml  |    2 +
 core/modules/region/config/region.subheader_b.yml  |    2 +
 core/modules/region/config/region.subheader_c.yml  |    2 +
 core/modules/region/config/region.title.yml        |    2 +
 core/modules/region/lib/Drupal/region/Region.php   |   38 ++
 .../lib/Drupal/region/RegionFormController.php     |   75 +++
 .../region/lib/Drupal/region/Tests/RegionTest.php  |  141 ++++++
 core/modules/region/region.admin.inc               |   67 +++
 core/modules/region/region.info                    |   14 +
 core/modules/region/region.module                  |  126 +++++
 .../config/grid.six_column_fluid_tablet.yml        |   12 +
 .../config/grid.three_column_fluid_smartphone.yml  |   12 +
 .../config/grid.twelve_column_fluid_standard.yml   |   12 +
 .../modules/rlayout/config/rlayout.breakpoints.yml |    3 +
 core/modules/rlayout/config/rlayoutset.default.yml |   19 +
 .../modules/rlayout/designer/app/libs/Grid/Grid.js |   25 +
 .../rlayout/designer/app/libs/GridList/GridList.js |   58 +++
 .../designer/app/libs/LayoutList/LayoutList.js     |   72 +++
 .../app/libs/LayoutManager/LayoutManager.js        |  426 ++++++++++++++++
 .../app/libs/LayoutPreviewer/LayoutPreviewer.js    |  220 ++++++++
 .../designer/app/libs/LayoutStep/LayoutStep.js     |  484 ++++++++++++++++++
 .../rlayout/designer/app/libs/Region/Region.js     |  101 ++++
 .../designer/app/libs/RegionList/RegionList.js     |  119 +++++
 .../modules/rlayout/designer/app/libs/Step/Step.js |   54 ++
 .../rlayout/designer/app/libs/StepList/StepList.js |   90 ++++
 .../designer/app/libs/StepManager/StepManager.js   |   88 ++++
 .../rlayout/designer/app/libs/Utils/Utils.js       |   84 ++++
 core/modules/rlayout/designer/app/main.js          |  314 ++++++++++++
 .../rlayout/designer/assets/css/application.css    |  311 ++++++++++++
 core/modules/rlayout/designer/assets/css/grid.css  |  117 +++++
 .../designer/assets/images/grippie-active.png      |   14 +
 .../rlayout/designer/assets/images/grippie.png     |   14 +
 .../designer/assets/images/large-screen.png        |    5 +
 .../designer/assets/images/small-screen.png        |    4 +
 .../assets/js/plugins/breakup/MIT-LICENSE.txt      |    7 +
 .../designer/assets/js/plugins/breakup/README.md   |   54 ++
 .../designer/assets/js/plugins/breakup/grunt.js    |   10 +
 .../assets/js/plugins/breakup/jquery.breakup.js    |  257 ++++++++++
 .../js/plugins/breakup/jquery.breakup.min.js       |    1 +
 .../Drupal/rlayout/Plugin/Derivative/Layout.php    |   60 +++
 .../Plugin/layout/layout/ResponsiveLayout.php      |   44 ++
 .../modules/rlayout/lib/Drupal/rlayout/RLayout.php |   52 ++
 .../lib/Drupal/rlayout/RLayoutFormController.php   |  186 +++++++
 core/modules/rlayout/rlayout-admin.css             |   23 +
 core/modules/rlayout/rlayout-admin.js              |  149 ++++++
 core/modules/rlayout/rlayout.admin.inc             |   67 +++
 core/modules/rlayout/rlayout.info                  |   19 +
 core/modules/rlayout/rlayout.module                |  252 ++++++++++
 core/modules/shortcut/shortcut.base.css            |   13 -
 core/modules/shortcut/shortcut.module              |   43 +-
 core/modules/shortcut/shortcut.theme.css           |   71 +--
 core/modules/system/system.module                  |   10 +-
 .../modules/toolbar/config/toolbar.breakpoints.yml |    1 +
 core/modules/toolbar/config/toolbar.config.yml     |    2 +
 core/modules/toolbar/css/toolbar.base-rtl.css      |   25 +
 core/modules/toolbar/css/toolbar.base.css          |  230 +++++++++
 core/modules/toolbar/css/toolbar.icons.css         |   79 +++
 core/modules/toolbar/css/toolbar.theme-rtl.css     |    7 +
 core/modules/toolbar/css/toolbar.theme.css         |  255 ++++++++++
 core/modules/toolbar/js/toolbar.js                 |  531 ++++++++++++++++++++
 core/modules/toolbar/templates/toolbar.tpl.php     |   17 +-
 core/modules/toolbar/toolbar-rtl.css               |   37 --
 core/modules/toolbar/toolbar.css                   |  129 -----
 core/modules/toolbar/toolbar.info                  |    6 +
 core/modules/toolbar/toolbar.js                    |  115 -----
 core/modules/toolbar/toolbar.module                |  289 +++++------
 core/modules/toolbar/toolbar.png                   |    4 -
 core/modules/user/user.css                         |   11 +
 core/modules/user/user.module                      |   64 +++
 107 files changed, 6686 insertions(+), 550 deletions(-)
 create mode 100644 core/modules/grid/config/grid.ninesixty_12.yml
 create mode 100644 core/modules/grid/config/grid.ninesixty_16.yml
 create mode 100644 core/modules/grid/config/grid.six_column_fluid.yml
 create mode 100644 core/modules/grid/config/grid.three_column_fluid.yml
 create mode 100644 core/modules/grid/config/grid.twelve_column_fluid.yml
 create mode 100644 core/modules/grid/grid.info
 create mode 100644 core/modules/grid/grid.module
 create mode 100644 core/modules/grid/lib/Drupal/grid/Grid.php
 create mode 100644 core/modules/grid/lib/Drupal/grid/GridBundle.php
 create mode 100644 core/modules/grid/lib/Drupal/grid/Plugin/GridInterface.php
 create mode 100644 core/modules/grid/lib/Drupal/grid/Plugin/Type/GridManager.php
 create mode 100644 core/modules/grid/lib/Drupal/grid/Plugin/grid/grid/EqualColumn.php
 create mode 100644 core/modules/page/config/page.front_page.yml
 create mode 100644 core/modules/page/config/page.not_admin_page.yml
 create mode 100644 core/modules/page/config/page.user_page.yml
 create mode 100644 core/modules/page/layouts/static/complex/complex.yml
 create mode 100644 core/modules/page/layouts/static/simple/simple.yml
 create mode 100644 core/modules/page/lib/Drupal/page/Page.php
 create mode 100644 core/modules/page/lib/Drupal/page/PageFormController.php
 create mode 100644 core/modules/page/lib/Drupal/page/PageListController.php
 create mode 100644 core/modules/page/page.admin.inc
 create mode 100644 core/modules/page/page.info
 create mode 100644 core/modules/page/page.module
 create mode 100644 core/modules/region/config/region.body.yml
 create mode 100644 core/modules/region/config/region.footer_a.yml
 create mode 100644 core/modules/region/config/region.footer_b.yml
 create mode 100644 core/modules/region/config/region.footer_c.yml
 create mode 100644 core/modules/region/config/region.header_a.yml
 create mode 100644 core/modules/region/config/region.header_b.yml
 create mode 100644 core/modules/region/config/region.header_c.yml
 create mode 100644 core/modules/region/config/region.navigation.yml
 create mode 100644 core/modules/region/config/region.sidebar_a.yml
 create mode 100644 core/modules/region/config/region.sidebar_b.yml
 create mode 100644 core/modules/region/config/region.sidebar_c.yml
 create mode 100644 core/modules/region/config/region.subheader_a.yml
 create mode 100644 core/modules/region/config/region.subheader_b.yml
 create mode 100644 core/modules/region/config/region.subheader_c.yml
 create mode 100644 core/modules/region/config/region.title.yml
 create mode 100644 core/modules/region/lib/Drupal/region/Region.php
 create mode 100644 core/modules/region/lib/Drupal/region/RegionFormController.php
 create mode 100644 core/modules/region/lib/Drupal/region/Tests/RegionTest.php
 create mode 100644 core/modules/region/region.admin.inc
 create mode 100644 core/modules/region/region.info
 create mode 100644 core/modules/region/region.module
 create mode 100644 core/modules/rlayout/config/grid.six_column_fluid_tablet.yml
 create mode 100644 core/modules/rlayout/config/grid.three_column_fluid_smartphone.yml
 create mode 100644 core/modules/rlayout/config/grid.twelve_column_fluid_standard.yml
 create mode 100644 core/modules/rlayout/config/rlayout.breakpoints.yml
 create mode 100644 core/modules/rlayout/config/rlayoutset.default.yml
 create mode 100644 core/modules/rlayout/designer/app/libs/Grid/Grid.js
 create mode 100644 core/modules/rlayout/designer/app/libs/GridList/GridList.js
 create mode 100644 core/modules/rlayout/designer/app/libs/LayoutList/LayoutList.js
 create mode 100644 core/modules/rlayout/designer/app/libs/LayoutManager/LayoutManager.js
 create mode 100644 core/modules/rlayout/designer/app/libs/LayoutPreviewer/LayoutPreviewer.js
 create mode 100644 core/modules/rlayout/designer/app/libs/LayoutStep/LayoutStep.js
 create mode 100644 core/modules/rlayout/designer/app/libs/Region/Region.js
 create mode 100644 core/modules/rlayout/designer/app/libs/RegionList/RegionList.js
 create mode 100644 core/modules/rlayout/designer/app/libs/Step/Step.js
 create mode 100644 core/modules/rlayout/designer/app/libs/StepList/StepList.js
 create mode 100644 core/modules/rlayout/designer/app/libs/StepManager/StepManager.js
 create mode 100644 core/modules/rlayout/designer/app/libs/Utils/Utils.js
 create mode 100644 core/modules/rlayout/designer/app/main.js
 create mode 100644 core/modules/rlayout/designer/assets/css/application.css
 create mode 100644 core/modules/rlayout/designer/assets/css/grid.css
 create mode 100644 core/modules/rlayout/designer/assets/images/grippie-active.png
 create mode 100644 core/modules/rlayout/designer/assets/images/grippie.png
 create mode 100644 core/modules/rlayout/designer/assets/images/large-screen.png
 create mode 100644 core/modules/rlayout/designer/assets/images/small-screen.png
 create mode 100644 core/modules/rlayout/designer/assets/js/plugins/breakup/MIT-LICENSE.txt
 create mode 100644 core/modules/rlayout/designer/assets/js/plugins/breakup/README.md
 create mode 100644 core/modules/rlayout/designer/assets/js/plugins/breakup/grunt.js
 create mode 100644 core/modules/rlayout/designer/assets/js/plugins/breakup/jquery.breakup.js
 create mode 100644 core/modules/rlayout/designer/assets/js/plugins/breakup/jquery.breakup.min.js
 create mode 100644 core/modules/rlayout/lib/Drupal/rlayout/Plugin/Derivative/Layout.php
 create mode 100644 core/modules/rlayout/lib/Drupal/rlayout/Plugin/layout/layout/ResponsiveLayout.php
 create mode 100644 core/modules/rlayout/lib/Drupal/rlayout/RLayout.php
 create mode 100644 core/modules/rlayout/lib/Drupal/rlayout/RLayoutFormController.php
 create mode 100644 core/modules/rlayout/rlayout-admin.css
 create mode 100644 core/modules/rlayout/rlayout-admin.js
 create mode 100644 core/modules/rlayout/rlayout.admin.inc
 create mode 100644 core/modules/rlayout/rlayout.info
 create mode 100644 core/modules/rlayout/rlayout.module
 create mode 100755 core/modules/toolbar/config/toolbar.breakpoints.yml
 create mode 100755 core/modules/toolbar/config/toolbar.config.yml
 create mode 100644 core/modules/toolbar/css/toolbar.base-rtl.css
 create mode 100644 core/modules/toolbar/css/toolbar.base.css
 create mode 100644 core/modules/toolbar/css/toolbar.icons-rtl.css
 create mode 100644 core/modules/toolbar/css/toolbar.icons.css
 create mode 100644 core/modules/toolbar/css/toolbar.theme-rtl.css
 create mode 100644 core/modules/toolbar/css/toolbar.theme.css
 create mode 100755 core/modules/toolbar/js/toolbar.js
 delete mode 100644 core/modules/toolbar/toolbar-rtl.css
 delete mode 100644 core/modules/toolbar/toolbar.css
 mode change 100644 => 100755 core/modules/toolbar/toolbar.info
 delete mode 100644 core/modules/toolbar/toolbar.js
 mode change 100644 => 100755 core/modules/toolbar/toolbar.module
 delete mode 100644 core/modules/toolbar/toolbar.png

diff --git a/core/modules/grid/config/grid.ninesixty_12.yml b/core/modules/grid/config/grid.ninesixty_12.yml
new file mode 100644
index 0000000..405317c
--- /dev/null
+++ b/core/modules/grid/config/grid.ninesixty_12.yml
@@ -0,0 +1,9 @@
+id: ninesixty_12
+label: '960px wide, 12 column grid'
+type: equal_column
+options:
+  type: 'fixed'
+  width: 960
+  columns: 12
+  padding_width: 20
+  gutter_width: 10
diff --git a/core/modules/grid/config/grid.ninesixty_16.yml b/core/modules/grid/config/grid.ninesixty_16.yml
new file mode 100644
index 0000000..4ddff62
--- /dev/null
+++ b/core/modules/grid/config/grid.ninesixty_16.yml
@@ -0,0 +1,9 @@
+id: ninesixty_16
+label: '960px wide, 16 column grid'
+type: equal_column
+options:
+  type: 'fixed'
+  width: 960
+  columns: 16
+  padding_width: 20
+  gutter_width: 10
diff --git a/core/modules/grid/config/grid.six_column_fluid.yml b/core/modules/grid/config/grid.six_column_fluid.yml
new file mode 100644
index 0000000..baff675
--- /dev/null
+++ b/core/modules/grid/config/grid.six_column_fluid.yml
@@ -0,0 +1,9 @@
+id: six_column_fluid
+label: Six column fluid
+type: equal_column
+options:
+  type: 'fluid'
+  width: 100
+  columns: 6
+  padding_width: 1.5
+  gutter_width: 2
diff --git a/core/modules/grid/config/grid.three_column_fluid.yml b/core/modules/grid/config/grid.three_column_fluid.yml
new file mode 100644
index 0000000..95f6dc0
--- /dev/null
+++ b/core/modules/grid/config/grid.three_column_fluid.yml
@@ -0,0 +1,9 @@
+id: three_column_fluid
+label: Three column fluid
+type: equal_column
+options:
+  type: 'fluid'
+  width: 100
+  columns: 3
+  padding_width: 1.5
+  gutter_width: 2
diff --git a/core/modules/grid/config/grid.twelve_column_fluid.yml b/core/modules/grid/config/grid.twelve_column_fluid.yml
new file mode 100644
index 0000000..35022f6
--- /dev/null
+++ b/core/modules/grid/config/grid.twelve_column_fluid.yml
@@ -0,0 +1,9 @@
+id: twelve_column_fluid
+label: Twelve column fluid
+type: equal_column
+options:
+  type: 'fluid'
+  width: 100
+  columns: 12
+  padding_width: 1.5
+  gutter_width: 2
diff --git a/core/modules/grid/grid.info b/core/modules/grid/grid.info
new file mode 100644
index 0000000..8d28b20
--- /dev/null
+++ b/core/modules/grid/grid.info
@@ -0,0 +1,15 @@
+name = Grid
+description = Pluggable grid system manager.
+package = Core
+version = VERSION
+core = 8.x
+dependencies[] = config
+configure = admin/structure/grids
+
+
+
+; Information added by drush on 2012-11-09
+version = ""
+project = "drupal"
+datestamp = "1352493228"
+
diff --git a/core/modules/grid/grid.module b/core/modules/grid/grid.module
new file mode 100644
index 0000000..396ae6e
--- /dev/null
+++ b/core/modules/grid/grid.module
@@ -0,0 +1,26 @@
+<?php
+
+/**
+ * @file
+ * Pluggable grid system manager module.
+ */
+
+use Drupal\grid\Grid;
+
+/**
+ * Implements hook_entity_info().
+ */
+function grid_entity_info() {
+  $types['grid'] = array(
+    'label' => 'Grid',
+    'entity class' => 'Drupal\grid\Grid',
+    'controller class' => 'Drupal\Core\Config\Entity\ConfigStorageController',
+    'config prefix' => 'grid',
+    'entity keys' => array(
+      'id' => 'id',
+      'label' => 'label',
+      'uuid' => 'uuid',
+    ),
+  );
+  return $types;
+}
diff --git a/core/modules/grid/lib/Drupal/grid/Grid.php b/core/modules/grid/lib/Drupal/grid/Grid.php
new file mode 100644
index 0000000..c40b021
--- /dev/null
+++ b/core/modules/grid/lib/Drupal/grid/Grid.php
@@ -0,0 +1,81 @@
+<?php
+
+/**
+ * @file
+ * Definition of Drupal\grid\Grid.
+ */
+
+namespace Drupal\grid;
+
+use Drupal\Core\Config\Entity\ConfigEntityBase;
+use Drupal\grid\Plugin\GridInterface;
+
+/**
+ * Defines the grid entity.
+ */
+class Grid extends ConfigEntityBase implements GridInterface {
+
+  /**
+   * The grid ID (machine name).
+   *
+   * @var string
+   */
+  public $id;
+
+  /**
+   * The grid UUID.
+   *
+   * @var string
+   */
+  public $uuid;
+
+  /**
+   * The grid label.
+   *
+   * @var string
+   */
+  public $label;
+
+  /**
+   * Plugin identifier for this grid.
+   *
+   * @var string
+   */
+  public $type;
+
+  /**
+   * Plugin configuration to instantiate the plugin instance.
+   *
+   * @var array
+   */
+  public $options;
+
+  /**
+   * Instantiated plugin to handle the grid.
+   *
+   * @see Drupal\grid\Grid::GetPlugin().
+   *
+   * @var Drupal\grid\Plugin\GridInterface
+   */
+  public $plugin;
+
+  /**
+   * Get a plugin instance for this grid.
+   */
+  public function getPlugin() {
+    if (!isset($this->plugin)) {
+      // Pass on Grid ID as part of the configuration array.
+      $this->options['id'] = $this->id;
+      $this->plugin = drupal_container()->get('plugin.manager.grid')->createInstance($this->type, $this->options);
+    }
+    return $this->plugin;
+  }
+
+  /**
+   * Implements Drupal\grid\Plugin\GridInterface::getGridCss().
+   */
+  public function getGridCss($wrapper_selector = NULL, $col_selector_prefix = NULL, $skip_spacing = FALSE) {
+    return $this->getPlugin()->getGridCss($wrapper_selector, $col_selector_prefix, $skip_spacing);
+  }
+
+}
diff --git a/core/modules/grid/lib/Drupal/grid/GridBundle.php b/core/modules/grid/lib/Drupal/grid/GridBundle.php
new file mode 100644
index 0000000..7c68f29
--- /dev/null
+++ b/core/modules/grid/lib/Drupal/grid/GridBundle.php
@@ -0,0 +1,25 @@
+<?php
+
+/**
+ * @file
+ * Definition of Drupal\grid\GridBundle.
+ */
+
+namespace Drupal\grid;
+
+use Symfony\Component\DependencyInjection\ContainerBuilder;
+use Symfony\Component\HttpKernel\Bundle\Bundle;
+
+/**
+ * Grid dependency injection container.
+ */
+class GridBundle extends Bundle {
+
+  /**
+   * Overrides Symfony\Component\HttpKernel\Bundle\Bundle::build().
+   */
+  public function build(ContainerBuilder $container) {
+    // Register the GridManager class with the dependency injection container.
+    $container->register('plugin.manager.grid', 'Drupal\grid\Plugin\Type\GridManager');
+  }
+}
diff --git a/core/modules/grid/lib/Drupal/grid/Plugin/GridInterface.php b/core/modules/grid/lib/Drupal/grid/Plugin/GridInterface.php
new file mode 100644
index 0000000..ca73fd8
--- /dev/null
+++ b/core/modules/grid/lib/Drupal/grid/Plugin/GridInterface.php
@@ -0,0 +1,30 @@
+<?php
+
+/**
+ * @file
+ * Definition of Drupal\grid\Plugin\GridInterface.
+ */
+
+namespace Drupal\grid\Plugin;
+
+/**
+ * Defines the shared interface for all grid plugins.
+ */
+interface GridInterface {
+
+  /**
+   * Generates grid CSS for this grid system.
+   *
+   * @param (string) $wrapper_selector
+   *   (optional) Wrapper CSS selector to use to scope the CSS.
+   * @param (string) $col_selector_prefix
+   *   (optional) Column selector prefix to scope the CSS.
+   * @param (boolean) $skip_spacing
+   *    Whether we should skip including spacing in the output. Useful for tight
+   *    layout demonstration presentation.
+   *
+   * @return string
+   *   Grid CSS for this grid system.
+   */
+  public function getGridCss($wrapper_selector = NULL, $col_selector_prefix = NULL, $skip_spacing = FALSE);
+}
diff --git a/core/modules/grid/lib/Drupal/grid/Plugin/Type/GridManager.php b/core/modules/grid/lib/Drupal/grid/Plugin/Type/GridManager.php
new file mode 100644
index 0000000..f86ec60
--- /dev/null
+++ b/core/modules/grid/lib/Drupal/grid/Plugin/Type/GridManager.php
@@ -0,0 +1,27 @@
+<?php
+
+/**
+ * @file
+ * Definition of Drupal\grid\Plugin\Type\GridManager.
+ */
+
+namespace Drupal\grid\Plugin\Type;
+
+use Drupal\Component\Plugin\PluginManagerBase;
+use Drupal\Component\Plugin\Discovery\DerivativeDiscoveryDecorator;
+use Drupal\Core\Plugin\Discovery\AnnotatedClassDiscovery;
+use Drupal\Component\Plugin\Factory\ReflectionFactory;
+
+/**
+ * Grid plugin manager.
+ */
+class GridManager extends PluginManagerBase {
+
+  /**
+   * Overrides Drupal\Component\Plugin\PluginManagerBase::__construct().
+   */
+  public function __construct() {
+    $this->discovery = new AnnotatedClassDiscovery('grid', 'grid');
+    $this->factory = new ReflectionFactory($this);
+  }
+}
diff --git a/core/modules/grid/lib/Drupal/grid/Plugin/grid/grid/EqualColumn.php b/core/modules/grid/lib/Drupal/grid/Plugin/grid/grid/EqualColumn.php
new file mode 100644
index 0000000..db38826
--- /dev/null
+++ b/core/modules/grid/lib/Drupal/grid/Plugin/grid/grid/EqualColumn.php
@@ -0,0 +1,100 @@
+<?php
+
+/**
+ * @file
+ * Definition of Drupal\grid\Plugin\grid\grid\EqualColumn.
+ */
+
+namespace Drupal\grid\Plugin\grid\grid;
+
+use Drupal\Component\Plugin\Discovery\DiscoveryInterface;
+use Drupal\grid\Plugin\GridInterface;
+use Drupal\Component\Plugin\PluginBase;
+use Drupal\Core\Annotation\Plugin;
+
+/**
+ * @Plugin(
+ *  id = "equal_column"
+ * )
+ */
+class EqualColumn extends PluginBase implements GridInterface {
+
+  /**
+   * Implements Drupal\grid\Plugin\GridInterface::getGridCss().
+   */
+  public function getGridCss($wrapper_selector = NULL, $col_selector_prefix = NULL, $skip_spacing = FALSE) {
+    $grid = $this->configuration;
+    $css = '';
+
+    // If the wrapper selector was not provided, generate one. This is useful for
+    // specific administration use cases when we scope the classes by grids.
+    if (empty($wrapper_selector)) {
+      $wrapper_selector = '.grid-' . $grid['id'];
+    }
+
+    // If the col span selector was not provided, generate one. This is useful
+    // for the front end to apply varying span widths under different names.
+    if (empty($col_selector_prefix)) {
+      $col_selector_prefix = '.grid-col_';
+    }
+
+    // If spacing is to be skipped, override the gutter and padding temporarily.
+    if ($skip_spacing) {
+      $grid['gutter_width'] = $grid['padding_width'] = 0;
+    }
+
+    switch ($grid['type']) {
+      case 'fluid':
+        $size_suffix = '%';
+        // Override to 100% whatever it was.
+        $grid['width'] = '100';
+        break;
+      case 'fixed':
+        $size_suffix = 'px';
+        break;
+    }
+
+    // Because we use the border-box box model, we only need to substract the
+    // size of margins from the full width and divide the rest by number of
+    // columns to get a value for column size.
+    $colwidth = ($grid['width'] - (($grid['columns'] - 1) * $grid['gutter_width'])) / $grid['columns'];
+
+    $css = $wrapper_selector . ' .grid-col {
+  border: 0px solid rgba(0,0,0,0);
+  float: left;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -moz-background-clip: padding-box;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  margin-left: ' . $grid['gutter_width'] . $size_suffix . ';
+  padding: 0 ' . $grid['padding_width']  . $size_suffix . ';
+}
+' . $wrapper_selector . ' .grid-col' . $col_selector_prefix .'first {
+  margin-left: 0;
+  clear: both;
+}
+';
+    for ($i = 1; $i <= $grid['columns']; $i++) {
+      $css .= $wrapper_selector . ' ' . $col_selector_prefix . $i . " {\n";
+      if ($i == 1) {
+        // The first column does not yet have any margins.
+        $css .= '  width: ' . $colwidth * $i . $size_suffix . ";\n";
+      }
+      elseif ($i == $grid['columns']) {
+        // The full width column always spans 100%.
+        $css .= "  width: " . $grid['width'] . $size_suffix . ";\n  margin-left: 0;\n";
+      }
+      else {
+        // Other columns absorb all columns that they need to include and one
+        // less margin before them.
+        $css .= '  width: ' . (($colwidth * $i) + ($grid['gutter_width'] * ($i -1))) . $size_suffix . ";\n";
+      }
+      $css .= "}\n";
+    }
+
+    return $css;
+  }
+
+}
diff --git a/core/modules/layout/layout.info b/core/modules/layout/layout.info
index 187bfea..d782ec5 100644
--- a/core/modules/layout/layout.info
+++ b/core/modules/layout/layout.info
@@ -3,3 +3,10 @@ description = Makes it possible to swap different page layouts.
 package = Core
 version = VERSION
 core = 8.x
+
+
+; Information added by drush on 2012-11-09
+version = ""
+project = "drupal"
+datestamp = "1352493228"
+
diff --git a/core/modules/layout/layout.module b/core/modules/layout/layout.module
index 7d82798..64d7714 100644
--- a/core/modules/layout/layout.module
+++ b/core/modules/layout/layout.module
@@ -23,11 +23,13 @@ function layout_manager() {
 function layout_theme($existing, $type, $theme, $path) {
   $items = array();
   foreach (layout_manager()->getDefinitions() as $name => $layout) {
-    $items[$layout['theme']] = array(
-      'variables' => array('content' => NULL),
-      'path' => $layout['path'],
-      'template' => $layout['template'],
-    );
+    if (!empty($layout['theme'])) {
+      $items[$layout['theme']] = array(
+        'variables' => array('content' => NULL),
+        'path' => $layout['path'],
+        'template' => $layout['template'],
+      );
+    }
   }
   return $items;
 }
diff --git a/core/modules/layout/tests/layout_test.info b/core/modules/layout/tests/layout_test.info
index 7b054a9..f040552 100644
--- a/core/modules/layout/tests/layout_test.info
+++ b/core/modules/layout/tests/layout_test.info
@@ -4,3 +4,10 @@ package = Testing
 version = VERSION
 core = 8.x
 hidden = TRUE
+
+
+; Information added by drush on 2012-11-09
+version = ""
+project = "drupal"
+datestamp = "1352493228"
+
diff --git a/core/modules/layout/tests/themes/layout_test_theme/layout_test_theme.info b/core/modules/layout/tests/themes/layout_test_theme/layout_test_theme.info
index 84bcff0..2e845a9 100644
--- a/core/modules/layout/tests/themes/layout_test_theme/layout_test_theme.info
+++ b/core/modules/layout/tests/themes/layout_test_theme/layout_test_theme.info
@@ -2,3 +2,10 @@ name = Layout test theme
 description = Theme for testing the layout system
 core = 8.x
 hidden = TRUE
+
+
+; Information added by drush on 2012-11-09
+version = ""
+project = "drupal"
+datestamp = "1352493228"
+
diff --git a/core/modules/page/config/page.front_page.yml b/core/modules/page/config/page.front_page.yml
new file mode 100644
index 0000000..7562328
--- /dev/null
+++ b/core/modules/page/config/page.front_page.yml
@@ -0,0 +1,8 @@
+id: front_page
+uuid: 5da81acf-3264-4d91-9b00-b2461c86e974
+label: 'Front page'
+visibility: '1'
+paths: '<front>'
+layout: 'static_layout:page__complex'
+langcode: und
+weight: 1
diff --git a/core/modules/page/config/page.not_admin_page.yml b/core/modules/page/config/page.not_admin_page.yml
new file mode 100644
index 0000000..c7d1032
--- /dev/null
+++ b/core/modules/page/config/page.not_admin_page.yml
@@ -0,0 +1,8 @@
+id: not_admin_page
+uuid: 45e82840-d11b-4726-8d09-9be84a69457d
+label: 'Not admin page'
+visibility: '0'
+paths: "admin\r\nadmin/*"
+layout: 'static_layout:page__simple'
+langcode: und
+weight: 10
diff --git a/core/modules/page/config/page.user_page.yml b/core/modules/page/config/page.user_page.yml
new file mode 100644
index 0000000..ce86333
--- /dev/null
+++ b/core/modules/page/config/page.user_page.yml
@@ -0,0 +1,8 @@
+id: user_page
+uuid: ccd213ff-54d4-4f3a-9a00-f8406842dff0
+label: 'User page'
+visibility: '1'
+paths: "user\r\nuser/*"
+layout: 'static_layout:page__complex'
+langcode: und
+weight: 5
diff --git a/core/modules/page/layouts/static/complex/complex.yml b/core/modules/page/layouts/static/complex/complex.yml
new file mode 100644
index 0000000..ec6491a
--- /dev/null
+++ b/core/modules/page/layouts/static/complex/complex.yml
@@ -0,0 +1,2 @@
+title: Complex layout
+template: complex
diff --git a/core/modules/page/layouts/static/simple/simple.yml b/core/modules/page/layouts/static/simple/simple.yml
new file mode 100644
index 0000000..3c395fa
--- /dev/null
+++ b/core/modules/page/layouts/static/simple/simple.yml
@@ -0,0 +1,2 @@
+title: Simple layout
+template: simple
diff --git a/core/modules/page/lib/Drupal/page/Page.php b/core/modules/page/lib/Drupal/page/Page.php
new file mode 100644
index 0000000..bfd835c
--- /dev/null
+++ b/core/modules/page/lib/Drupal/page/Page.php
@@ -0,0 +1,66 @@
+<?php
+
+/**
+ * @file
+ * Definition of Drupal\page\Page.
+ */
+
+namespace Drupal\page;
+
+use Drupal\Core\Config\Entity\ConfigEntityBase;
+
+/**
+ * Defines the page entity.
+ */
+class Page extends ConfigEntityBase {
+
+  /**
+   * The page ID (machine name).
+   *
+   * @var string
+   */
+  public $id;
+
+  /**
+   * The page UUID.
+   *
+   * @var string
+   */
+  public $uuid;
+
+  /**
+   * The page label.
+   *
+   * @var string
+   */
+  public $label;
+
+  /**
+   * Whether to apply the path patterns or exclude them.
+   *
+   * @var int
+   */
+  public $visibility;
+
+  /**
+   * Path pattern associated with this page.
+   *
+   * @var string
+   */
+  public $paths;
+
+  /**
+   * Layout machine name associated with this page.
+   *
+   * @var string
+   */
+  public $layout;
+
+  /**
+   * Page weight to help figure out priority ordering.
+   *
+   * @var int
+   */
+  public $weight;
+
+}
diff --git a/core/modules/page/lib/Drupal/page/PageFormController.php b/core/modules/page/lib/Drupal/page/PageFormController.php
new file mode 100644
index 0000000..69bdc27
--- /dev/null
+++ b/core/modules/page/lib/Drupal/page/PageFormController.php
@@ -0,0 +1,109 @@
+<?php
+
+/**
+ * @file
+ * Definition of Drupal\page\PageFormController.
+ */
+
+namespace Drupal\page;
+
+use Drupal\Core\Entity\EntityInterface;
+use Drupal\Core\Entity\EntityFormController;
+
+/**
+ * Form controller for the page edit/add forms.
+ */
+class PageFormController extends EntityFormController {
+
+  /**
+   * Overrides Drupal\Core\Entity\EntityFormController::form().
+   */
+  public function form(array $form, array &$form_state, EntityInterface $page) {
+    $form['label'] = array(
+      '#type' => 'textfield',
+      '#title' => t('Label'),
+      '#maxlength' => 255,
+      '#default_value' => $page->label(),
+      '#description' => t("Example: 'Front page' or 'Section page'."),
+      '#required' => TRUE,
+    );
+    $form['id'] = array(
+      '#type' => 'machine_name',
+      '#default_value' => $page->id(),
+      '#machine_name' => array(
+        'exists' => 'page_load',
+        'source' => array('label'),
+      ),
+      '#disabled' => !$page->isNew(),
+    );
+
+    // Get list of layouts and expose that for page layout selection.
+    $layouts = drupal_container()->get('plugin.manager.layout')->getDefinitions();
+    $layout_options = array();
+    foreach ($layouts as $key => $layout) {
+      $layout_options[$key] = $layout['title'];
+    }
+    $form['layout'] = array(
+      '#type' => 'select',
+      '#title' => t('Layout for this page'),
+      '#default_value' => isset($page->layout) ? $page->layout : '',
+      '#options' => $layout_options,
+    );
+
+    // @todo this would ideally be pluggable and depend on general conditions
+    // and all, however, these are not yet abstracted.
+    $options = array(
+      0 => t('All paths except those listed'),
+      1 => t('Only the listed paths'),
+    );
+    $description = t("Enter one path per line. The '*' character is a wildcard. Example paths are %user for the current user's page and %user-wildcard for every user page. %front is the front page.", array('%user' => 'user', '%user-wildcard' => 'user/*', '%front' => '<front>'));
+    $form['visibility'] = array(
+      '#type' => 'radios',
+      '#title' => t('Apply to specific paths'),
+      '#options' => $options,
+      '#default_value' => isset($page->visibility) ? $page->visibility : 0,
+    );
+    $form['paths'] = array(
+      '#type' => 'textarea',
+      '#title' => '<span class="element-invisible">' . t('Paths') . '</span>',
+      '#default_value' => isset($page->paths) ? $page->paths : '',
+      '#description' => $description,
+    );
+
+    return parent::form($form, $form_state, $page);
+  }
+
+  /**
+   * Overrides Drupal\Core\Entity\EntityFormController::actions().
+   */
+  protected function actions(array $form, array &$form_state) {
+    // Only includes a Save action for the entity, no direct Delete button.
+    return array(
+      'submit' => array(
+        '#value' => t('Save'),
+        '#validate' => array(
+          array($this, 'validate'),
+        ),
+        '#submit' => array(
+          array($this, 'submit'),
+          array($this, 'save'),
+        ),
+      ),
+    );
+  }
+
+  /**
+   * Overrides Drupal\Core\Entity\EntityFormController::save().
+   */
+  public function save(array $form, array &$form_state) {
+    $page = $this->getEntity($form_state);
+    $page->save();
+
+    watchdog('page', 'Page @label saved.', array('@label' => $page->label()), WATCHDOG_NOTICE);
+    drupal_set_message(t('Page %label saved.', array('%label' => $page->label())));
+
+    $form_state['redirect'] = 'admin/structure/pages';
+  }
+
+}
+
diff --git a/core/modules/page/lib/Drupal/page/PageListController.php b/core/modules/page/lib/Drupal/page/PageListController.php
new file mode 100644
index 0000000..c3e14d9
--- /dev/null
+++ b/core/modules/page/lib/Drupal/page/PageListController.php
@@ -0,0 +1,71 @@
+<?php
+
+/**
+ * @file
+ * Definition of Drupal\page\PageListController.
+ */
+
+namespace Drupal\page;
+
+use Drupal\Core\Config\Entity\ConfigEntityListController;
+use Drupal\Core\Entity\EntityInterface;
+use Drupal\Core\Entity\EntityStorageControllerInterface;
+
+/**
+ * Provides a listing of pages.
+ */
+class PageListController extends ConfigEntityListController {
+
+  /**
+   * Get form for listing page to display for weights.
+   */
+  public function getForm($form, &$form_state) {
+    $form['items'] = array(
+      '#tree' => TRUE,
+    );
+    foreach ($this->load() as $entity) {
+      $form['items'][$entity->id()]['label'] = array(
+        '#markup' => check_plain($entity->label()),
+      );
+
+      $paths = nl2br(check_plain($entity->paths));
+      if (empty($entity->visibility)) {
+        $paths = t('Except: !paths', array('!paths' => '<br />' . $paths));
+      }
+      $form['items'][$entity->id()]['paths'] = array(
+        '#markup' => $paths,
+      );
+
+      $form['items'][$entity->id()]['weight'] = array(
+        '#type' => 'weight',
+        '#title' => t('Weight'),
+        '#default_value' => $entity->weight,
+        '#delta' => 100,
+        '#attributes' => array('class' => array('entity-weight')),
+      );
+
+      $form['items'][$entity->id()]['operations'] = array(
+        $this->buildOperations($entity),
+      );
+    }
+
+    $form['actions'] = array();
+    $form['actions']['submit'] = array(
+      '#type' => 'submit',
+      '#value' => t('Save changes')
+    );
+    return $form;
+  }
+
+  /**
+   * Save weight changes to configuration entities.
+   */
+  public function submitForm($form, &$form_state) {
+    foreach ($form_state['values']['items'] as $id => $item) {
+      $page = entity_load('page', $id);
+      $page->weight = $item['weight'];
+      $page->save();
+    }
+  }
+
+}
diff --git a/core/modules/page/page.admin.inc b/core/modules/page/page.admin.inc
new file mode 100644
index 0000000..5ac414d
--- /dev/null
+++ b/core/modules/page/page.admin.inc
@@ -0,0 +1,120 @@
+<?php
+
+/**
+ * @file
+ * Administration functions to maintain a set of pages using layouts.
+ */
+
+use Drupal\page\Page;
+
+/**
+ * Page callback: Presents list of pages.
+ *
+ * @see page_menu()
+ */
+function page_page_list() {
+  return drupal_get_form('page_page_list_form');
+}
+
+/**
+ * Form callback to present a tabledrag list.
+ */
+function page_page_list_form($form, &$form_state) {
+  $controller = entity_list_controller('page');
+  return $controller->getForm($form, $form_state);
+}
+
+
+/**
+ * Form callback to save a tabledrag list.
+ */
+function page_page_list_form_submit($form, &$form_state) {
+  $controller = entity_list_controller('page');
+  return $controller->submitForm($form, $form_state);
+}
+
+/**
+ * Page callback: Presents the page editing form.
+ *
+ * @see page_menu()
+ */
+function page_page_edit(Page $page) {
+  drupal_set_title(t('<em>Edit page</em> @label', array('@label' => $page->label())), PASS_THROUGH);
+  return entity_get_form($page);
+}
+
+/**
+ * Page callback: Provides the new page addition form.
+ *
+ * @see page_menu()
+ */
+function page_page_add() {
+  $page = entity_create('page', array());
+  return entity_get_form($page);
+}
+
+/**
+ * Page callback: Form constructor for page deletion confirmation form.
+ *
+ * @see page_menu()
+ */
+function page_delete_confirm($form, &$form_state, Page $page) {
+  // Always provide entity id in the same form key as in the entity edit form.
+  $form['id'] = array('#type' => 'value', '#value' => $page->id());
+  $form_state['page'] = $page;
+  return confirm_form($form,
+    t('Are you sure you want to remove the page %title?', array('%title' => $page->label())),
+    'admin/structure/pages',
+    t('This action cannot be undone.'),
+    t('Delete'),
+    t('Cancel')
+  );
+}
+
+/**
+ * Form submission handler for page_delete_confirm().
+ */
+function page_delete_confirm_submit($form, &$form_state) {
+  $page = $form_state['page'];
+  $page->delete();
+  drupal_set_message(t('Page %label has been deleted.', array('%label' => $page->label())));
+  watchdog('page', 'Page %label has been deleted.', array('%label' => $page->label()), WATCHDOG_NOTICE);
+  $form_state['redirect'] = 'admin/structure/pages';
+}
+
+/**
+ * Theme callback for page listing form.
+ */
+function theme_page_page_list_form($variables) {
+  $form = $variables['form'];
+  $rows = array();
+
+  foreach (element_children($form['items'], TRUE) as $id) {
+    $rows[] = array(
+      'data' => array(
+        drupal_render($form['items'][$id]['label']),
+        drupal_render($form['items'][$id]['paths']),
+        drupal_render($form['items'][$id]['weight']),
+        drupal_render($form['items'][$id]['operations']),
+      ),
+      'class' => array('draggable'),
+    );
+  }
+
+  $header = array(
+    t('Label'),
+    t('Paths'),
+    t('Weight'),
+    t('Operations'),
+  );
+
+  $variables = array(
+    'header' => $header,
+    'rows' => $rows,
+    'attributes' => array('id' => 'page-list'),
+  );
+  $table  = theme('table', $variables);
+  $table .= drupal_render_children($form);
+  drupal_add_tabledrag('page-list', 'order', 'sibling', 'entity-weight');
+  return $table;
+}
diff --git a/core/modules/page/page.info b/core/modules/page/page.info
new file mode 100644
index 0000000..69c051b
--- /dev/null
+++ b/core/modules/page/page.info
@@ -0,0 +1,15 @@
+name = Page
+description = Makes it possible to swap different page layouts.
+package = Core
+version = VERSION
+core = 8.x
+dependencies[] = config
+dependencies[] = layout
+configure = admin/structure/pages
+
+
+; Information added by drush on 2012-11-09
+version = ""
+project = "drupal"
+datestamp = "1352493228"
+
diff --git a/core/modules/page/page.module b/core/modules/page/page.module
new file mode 100644
index 0000000..695e493
--- /dev/null
+++ b/core/modules/page/page.module
@@ -0,0 +1,176 @@
+<?php
+
+/**
+ * @file
+ * Module to maintain a set of pages using layouts.
+ */
+
+use Drupal\page\Page;
+
+/**
+ * Implements hook_menu().
+ */
+function page_menu() {
+  $items = array();
+  $items['admin/structure/pages'] = array(
+    'title' => 'Page library',
+    'description' => 'Manage pages using layouts that allow content to be placed.',
+    'page callback' => 'page_page_list',
+    'access callback' => 'user_access',
+    'access arguments' => array('administer pages'),
+    'file' => 'page.admin.inc',
+  );
+  $items['admin/structure/pages/add'] = array(
+    'title' => 'Add page',
+    'page callback' => 'page_page_add',
+    'access callback' => 'user_access',
+    'access arguments' => array('administer pages'),
+    'type' => MENU_LOCAL_ACTION,
+    'file' => 'page.admin.inc',
+  );
+  $items['admin/structure/pages/manage/%page'] = array(
+    'title' => 'Edit page',
+    'page callback' => 'page_page_edit',
+    'page arguments' => array(4),
+    'access callback' => 'user_access',
+    'access arguments' => array('administer pages'),
+    'type' => MENU_CALLBACK,
+    'file' => 'page.admin.inc',
+  );
+  $items['admin/structure/pages/manage/%page/edit'] = array(
+    'title' => 'Edit',
+    'type' => MENU_DEFAULT_LOCAL_TASK,
+    'weight' => -10,
+  );
+  $items['admin/structure/pages/manage/%page/delete'] = array(
+    'title' => 'Delete',
+    'page callback' => 'drupal_get_form',
+    'page arguments' => array('page_delete_confirm', 4),
+    'access callback' => 'user_access',
+    'access arguments' => array('administer pages'),
+    'type' => MENU_LOCAL_TASK,
+    'file' => 'page.admin.inc',
+  );
+  return $items;
+}
+
+/**
+ * Implements hook_permission().
+ */
+function page_permission() {
+  return array(
+    'administer pages' => array(
+      'title' => t('Administer pages'),
+      'description' => t('Manage the set of pages with distinct layouts on the site.'),
+    ),
+  );
+}
+
+/**
+ * @todo remove this in favor of actually integrating with layout mappers.
+ */
+function page_init() {
+  if ($page = page_get_matched_page()) {
+    drupal_set_message(t('%page matched, %layout to be used.', array('%page' => $page->label(), '%layout' => $page->layout)));
+  }
+}
+
+/**
+ * API function to look up if the current page is matched by a config.
+ *
+ * @return Drupal\page\Page|FALSE
+ */
+function page_get_matched_page() {
+  $pages = page_load_all();
+  $page_match = FALSE;
+  foreach ($pages as $page) {
+    if (!empty($page->paths)) {
+      // Convert paths to lowercase. This allows comparison of the same path
+      // with different case. Ex: /Page, /page, /PAGE.
+      $paths = drupal_strtolower($page->paths);
+      // Compare the lowercase path alias (if any) and internal path.
+      $path = current_path();
+      $path_alias = drupal_strtolower(drupal_get_path_alias($path));
+      $page_match = drupal_match_path($path_alias, $paths) || (($path != $path_alias) && drupal_match_path($path, $paths));
+      // When $page->visibility has a value of 0, the page is used on all
+      // paths except those listed in $page->paths. When set to 1, it is
+      // used only on those pages listed in $page->paths.
+      $page_match = !($page->visibility xor $page_match);
+      if ($page_match) {
+        break;
+      }
+    }
+  }
+  return $page_match ? $page : FALSE;
+}
+
+/**
+ * Implements hook_entity_info().
+ */
+function page_entity_info() {
+  $types['page'] = array(
+    'label' => 'Page',
+    'entity class' => 'Drupal\page\Page',
+    'controller class' => 'Drupal\Core\Config\Entity\ConfigStorageController',
+    'form controller class' => array(
+      'default' => 'Drupal\page\PageFormController',
+    ),
+    'list controller class' => 'Drupal\page\PageListController',
+    'list path' => 'admin/structure/pages',
+    'uri callback' => 'page_uri',
+    'config prefix' => 'page',
+    'entity keys' => array(
+      'id' => 'id',
+      'label' => 'label',
+      'uuid' => 'uuid',
+    ),
+  );
+  return $types;
+}
+
+/**
+ * Entity URI callback.
+ *
+ * @param Drupal\page\Page $page
+ *   Page configuration entity instance.
+ *
+ * @return array
+ *   Entity URI information.
+ */
+function page_uri(Page $page) {
+  return array(
+    'path' => 'admin/structure/pages/manage/' . $page->id(),
+  );
+}
+
+/**
+ * Load one page object by its identifier.
+ *
+ * @return Drupal\page\Page
+ *   Page configuration entity instance.
+ */
+function page_load($id) {
+  return entity_load('page', $id);
+}
+
+/**
+ * Load all page objects.
+ *
+ * @return array
+ *   List of Drupal\page\Page instances keyed by id.
+ */
+function page_load_all() {
+  return entity_load_multiple('page');
+}
+
+/**
+ * Implements hook_theme().
+ */
+function page_theme($existing, $type, $theme, $path) {
+  return array(
+    'page_page_list_form' => array(
+      'render element' => 'form',
+      'file' => 'page.admin.inc',
+    ),
+  );
+}
diff --git a/core/modules/region/config/region.body.yml b/core/modules/region/config/region.body.yml
new file mode 100644
index 0000000..1b06f89
--- /dev/null
+++ b/core/modules/region/config/region.body.yml
@@ -0,0 +1,2 @@
+id: body
+label: Body
diff --git a/core/modules/region/config/region.footer_a.yml b/core/modules/region/config/region.footer_a.yml
new file mode 100644
index 0000000..e3f611e
--- /dev/null
+++ b/core/modules/region/config/region.footer_a.yml
@@ -0,0 +1,2 @@
+id: footer_a
+label: Footer A
diff --git a/core/modules/region/config/region.footer_b.yml b/core/modules/region/config/region.footer_b.yml
new file mode 100644
index 0000000..0f04323
--- /dev/null
+++ b/core/modules/region/config/region.footer_b.yml
@@ -0,0 +1,2 @@
+id: footer_b
+label: Footer B
diff --git a/core/modules/region/config/region.footer_c.yml b/core/modules/region/config/region.footer_c.yml
new file mode 100644
index 0000000..2f9dbe5
--- /dev/null
+++ b/core/modules/region/config/region.footer_c.yml
@@ -0,0 +1,2 @@
+id: footer_c
+label: Footer C
diff --git a/core/modules/region/config/region.header_a.yml b/core/modules/region/config/region.header_a.yml
new file mode 100644
index 0000000..c3867f3
--- /dev/null
+++ b/core/modules/region/config/region.header_a.yml
@@ -0,0 +1,2 @@
+id: header_a
+label: Header A
diff --git a/core/modules/region/config/region.header_b.yml b/core/modules/region/config/region.header_b.yml
new file mode 100644
index 0000000..d91fe82
--- /dev/null
+++ b/core/modules/region/config/region.header_b.yml
@@ -0,0 +1,2 @@
+id: header_b
+label: Header B
diff --git a/core/modules/region/config/region.header_c.yml b/core/modules/region/config/region.header_c.yml
new file mode 100644
index 0000000..204ab21
--- /dev/null
+++ b/core/modules/region/config/region.header_c.yml
@@ -0,0 +1,2 @@
+id: header_c
+label: Header C
diff --git a/core/modules/region/config/region.navigation.yml b/core/modules/region/config/region.navigation.yml
new file mode 100644
index 0000000..2f7afff
--- /dev/null
+++ b/core/modules/region/config/region.navigation.yml
@@ -0,0 +1,2 @@
+id: navigation
+label: Navigation
diff --git a/core/modules/region/config/region.sidebar_a.yml b/core/modules/region/config/region.sidebar_a.yml
new file mode 100644
index 0000000..7c27f3f
--- /dev/null
+++ b/core/modules/region/config/region.sidebar_a.yml
@@ -0,0 +1,2 @@
+id: sidebar_a
+label: Sidebar A
diff --git a/core/modules/region/config/region.sidebar_b.yml b/core/modules/region/config/region.sidebar_b.yml
new file mode 100644
index 0000000..e5a8e03
--- /dev/null
+++ b/core/modules/region/config/region.sidebar_b.yml
@@ -0,0 +1,2 @@
+id: sidebar_b
+label: Sidebar B
diff --git a/core/modules/region/config/region.sidebar_c.yml b/core/modules/region/config/region.sidebar_c.yml
new file mode 100644
index 0000000..00c9bc9
--- /dev/null
+++ b/core/modules/region/config/region.sidebar_c.yml
@@ -0,0 +1,2 @@
+id: sidebar_c
+label: Sidebar C
diff --git a/core/modules/region/config/region.subheader_a.yml b/core/modules/region/config/region.subheader_a.yml
new file mode 100644
index 0000000..db7685c
--- /dev/null
+++ b/core/modules/region/config/region.subheader_a.yml
@@ -0,0 +1,2 @@
+id: subheader_a
+label: Subheader A
diff --git a/core/modules/region/config/region.subheader_b.yml b/core/modules/region/config/region.subheader_b.yml
new file mode 100644
index 0000000..269a100
--- /dev/null
+++ b/core/modules/region/config/region.subheader_b.yml
@@ -0,0 +1,2 @@
+id: subheader_b
+label: Subheader B
diff --git a/core/modules/region/config/region.subheader_c.yml b/core/modules/region/config/region.subheader_c.yml
new file mode 100644
index 0000000..0149b78
--- /dev/null
+++ b/core/modules/region/config/region.subheader_c.yml
@@ -0,0 +1,2 @@
+id: subheader_c
+label: Subheader C
diff --git a/core/modules/region/config/region.title.yml b/core/modules/region/config/region.title.yml
new file mode 100644
index 0000000..aa36188
--- /dev/null
+++ b/core/modules/region/config/region.title.yml
@@ -0,0 +1,2 @@
+id: title
+label: Title
diff --git a/core/modules/region/lib/Drupal/region/Region.php b/core/modules/region/lib/Drupal/region/Region.php
new file mode 100644
index 0000000..d883303
--- /dev/null
+++ b/core/modules/region/lib/Drupal/region/Region.php
@@ -0,0 +1,38 @@
+<?php
+
+/**
+ * @file
+ * Definition of Drupal\region\Region.
+ */
+
+namespace Drupal\region;
+
+use Drupal\Core\Config\Entity\ConfigEntityBase;
+
+/**
+ * Defines the region entity.
+ */
+class Region extends ConfigEntityBase {
+
+  /**
+   * The region ID (machine name).
+   *
+   * @var string
+   */
+  public $id;
+
+  /**
+   * The region UUID.
+   *
+   * @var string
+   */
+  public $uuid;
+
+  /**
+   * The region label.
+   *
+   * @var string
+   */
+  public $label;
+
+}
diff --git a/core/modules/region/lib/Drupal/region/RegionFormController.php b/core/modules/region/lib/Drupal/region/RegionFormController.php
new file mode 100644
index 0000000..a917136
--- /dev/null
+++ b/core/modules/region/lib/Drupal/region/RegionFormController.php
@@ -0,0 +1,75 @@
+<?php
+
+/**
+ * @file
+ * Definition of Drupal\region\RegionFormController.
+ */
+
+namespace Drupal\region;
+
+use Drupal\Core\Entity\EntityInterface;
+use Drupal\Core\Entity\EntityFormController;
+
+/**
+ * Form controller for the region edit/add forms.
+ */
+class RegionFormController extends EntityFormController {
+
+  /**
+   * Overrides Drupal\Core\Entity\EntityFormController::form().
+   */
+  public function form(array $form, array &$form_state, EntityInterface $region) {
+    $form['label'] = array(
+      '#type' => 'textfield',
+      '#title' => t('Label'),
+      '#maxlength' => 255,
+      '#default_value' => $region->label(),
+      '#description' => t("Example: 'Banner' or 'Highlight'."),
+      '#required' => TRUE,
+    );
+    $form['id'] = array(
+      '#type' => 'machine_name',
+      '#default_value' => $region->id(),
+      '#machine_name' => array(
+        'exists' => 'region_load',
+        'source' => array('label'),
+      ),
+      '#disabled' => !$region->isNew(),
+    );
+    return parent::form($form, $form_state, $region);
+  }
+
+  /**
+   * Overrides Drupal\Core\Entity\EntityFormController::actions().
+   */
+  protected function actions(array $form, array &$form_state) {
+    // Only includes a Save action for the entity, no direct Delete button.
+    return array(
+      'submit' => array(
+        '#value' => t('Save'),
+        '#validate' => array(
+          array($this, 'validate'),
+        ),
+        '#submit' => array(
+          array($this, 'submit'),
+          array($this, 'save'),
+        ),
+      ),
+    );
+  }
+
+  /**
+   * Overrides Drupal\Core\Entity\EntityFormController::save().
+   */
+  public function save(array $form, array &$form_state) {
+    $region = $this->getEntity($form_state);
+    $region->save();
+
+    watchdog('region', 'Region @label saved.', array('@label' => $region->label()), WATCHDOG_NOTICE);
+    drupal_set_message(t('Region %label saved.', array('%label' => $region->label())));
+
+    $form_state['redirect'] = 'admin/structure/regions';
+  }
+
+}
+
diff --git a/core/modules/region/lib/Drupal/region/Tests/RegionTest.php b/core/modules/region/lib/Drupal/region/Tests/RegionTest.php
new file mode 100644
index 0000000..981641e
--- /dev/null
+++ b/core/modules/region/lib/Drupal/region/Tests/RegionTest.php
@@ -0,0 +1,141 @@
+<?php
+
+/**
+ * @file
+ * Definition of Drupal\region\Tests\RegionTest.
+ */
+
+namespace Drupal\region\Tests;
+
+use Drupal\simpletest\WebTestBase;
+
+/**
+ * Test for region management.
+ */
+class RegionTest extends WebTestBase {
+
+  /**
+   * Modules to enable.
+   *
+   * @var array
+   */
+  public static $modules = array('region');
+
+  public static function getInfo() {
+    return array(
+      'name' => 'Region management',
+      'description' => 'Tests region management.',
+      'group' => 'Region',
+    );
+  }
+
+  /**
+   * Tests the default regions.
+   */
+  public function testDefaultRegions() {
+    // Create a new user, allow him to manage the blocks and the languages.
+    $admin_user = $this->drupalCreateUser(array(
+      'administer regions',
+    ));
+    $this->drupalLogin($admin_user);
+
+    // Check that these regions show up on the user interface.
+    $base_regions = array(
+      'header_a' => 'Header A',
+      'header_b' => 'Header B',
+      'header_c' => 'Header C',
+      'subheader_a' => 'Subheader A',
+      'subheader_b' => 'Subheader B',
+      'subheader_c' => 'Subheader C',
+      'navigation' => 'Navigation',
+      'title' => 'Title',
+      'body' => 'Body',
+      'sidebar_a' => 'Sidebar A',
+      'sidebar_b' => 'Sidebar B',
+      'sidebar_c' => 'Sidebar C',
+      'footer_a' => 'Footer A',
+      'footer_b' => 'Footer B',
+      'footer_c' => 'Footer C',
+    );
+
+    // Check if the visibility setting is available.
+    $this->drupalGet('admin/structure/regions');
+    foreach($base_regions as $machine_name => $label) {
+      $this->assertText($machine_name);
+      $this->assertText($label);
+    }
+  }
+
+  /**
+   * Tests editing a default region.
+   */
+  public function testEditDefaultRegion() {
+    // Create a new user, allow him to manage the blocks and the languages.
+    $admin_user = $this->drupalCreateUser(array(
+      'administer regions',
+    ));
+    $this->drupalLogin($admin_user);
+
+    $this->drupalGet('admin/structure/regions/manage/body/edit');
+    $this->assertResponse(200);
+    $this->assertPattern('!disabled="disabled"(.+)id="edit-id"(.+)value="body"!', 'Existing region name machine name field is disabled.');
+
+    $edit = array('label' => 'Page content');
+    $this->drupalPost('admin/structure/regions/manage/body/edit', $edit, t('Save'));
+    $this->assertText('Page content');
+    $this->assertNoText('Body');
+    $this->assertRaw(t('Region %label saved.', array('%label' => 'Page content')));
+  }
+
+  /**
+   * Tests editing a default region.
+   */
+  public function testDeleteDefaultRegion() {
+    // Create a new user, allow him to manage the blocks and the languages.
+    $admin_user = $this->drupalCreateUser(array(
+      'administer regions',
+    ));
+    $this->drupalLogin($admin_user);
+
+    $this->drupalGet('admin/structure/regions/manage/body/delete');
+    $this->assertResponse(200);
+
+    $this->drupalPost('admin/structure/regions/manage/body/delete', array(), t('Delete'));
+    $this->assertRaw(t('Region %label has been deleted.', array('%label' => 'Body')));
+    $this->assertNoText('body');
+  }
+
+  /**
+   * Tests adding a new region and all actions on that.
+   */
+  public function testNewRegion() {
+    // Create a new user, allow him to manage the blocks and the languages.
+    $admin_user = $this->drupalCreateUser(array(
+      'administer regions',
+    ));
+    $this->drupalLogin($admin_user);
+
+    $edit = array('label' => 'Banner', 'id' => 'banner');
+    $this->drupalPost('admin/structure/regions/add', $edit, t('Save'));
+    $this->assertText('banner');
+    $this->assertRaw(t('Region %label saved.', array('%label' => 'Banner')));
+
+    $edit = array('label' => 'Highlight');
+    $this->drupalPost('admin/structure/regions/manage/banner/edit', $edit, t('Save'));
+    $this->assertNoText('Banner');
+    $this->assertText('banner');
+    $this->assertRaw(t('Region %label saved.', array('%label' => 'Highlight')));
+
+    $edit = array('label' => 'Conflicting banner', 'id' => 'banner');
+    $this->drupalPost('admin/structure/regions/add', $edit, t('Save'));
+    $this->assertText(t('The machine-readable name is already in use. It must be unique.'));
+
+    $this->drupalGet('admin/structure/regions/manage/banner/edit');
+    $this->assertPattern('!disabled="disabled"(.+)id="edit-id"(.+)value="banner"!', 'Existing region name machine name field is disabled.');
+
+    $this->drupalPost('admin/structure/regions/manage/banner/delete', array(), t('Delete'));
+    $this->assertRaw(t('Region %label has been deleted.', array('%label' => 'Highlight')));
+    $this->assertNoText('banner');
+  }
+
+}
diff --git a/core/modules/region/region.admin.inc b/core/modules/region/region.admin.inc
new file mode 100644
index 0000000..1429ba9
--- /dev/null
+++ b/core/modules/region/region.admin.inc
@@ -0,0 +1,67 @@
+<?php
+
+/**
+ * @file
+ * Administration functions to maintain a common set of regions for layouts.
+ */
+
+use Drupal\region\Region;
+
+/**
+ * Page callback: Presents list of regions.
+ *
+ * @see region_menu()
+ */
+function region_page_list() {
+  $controller = entity_list_controller('region');
+  return $controller->render();
+}
+
+/**
+ * Page callback: Presents the region editing form.
+ *
+ * @see region_menu()
+ */
+function region_page_edit(Region $region) {
+  drupal_set_title(t('<em>Edit region</em> @label', array('@label' => $region->label())), PASS_THROUGH);
+  return entity_get_form($region);
+}
+
+/**
+ * Page callback: Provides the new region addition form.
+ *
+ * @see region_menu()
+ */
+function region_page_add() {
+  $region = entity_create('region', array());
+  return entity_get_form($region);
+}
+
+/**
+ * Page callback: Form constructor for region deletion confirmation form.
+ *
+ * @see region_menu()
+ */
+function region_delete_confirm($form, &$form_state, Region $region) {
+  // Always provide entity id in the same form key as in the entity edit form.
+  $form['id'] = array('#type' => 'value', '#value' => $region->id());
+  $form_state['region'] = $region;
+  return confirm_form($form,
+    t('Are you sure you want to remove the region %title?', array('%title' => $region->label())),
+    'admin/structure/regions',
+    t('This action cannot be undone.'),
+    t('Delete'),
+    t('Cancel')
+  );
+}
+
+/**
+ * Form submission handler for region_delete_confirm().
+ */
+function region_delete_confirm_submit($form, &$form_state) {
+  $region = $form_state['region'];
+  $region->delete();
+  drupal_set_message(t('Region %label has been deleted.', array('%label' => $region->label())));
+  watchdog('region', 'Region %label has been deleted.', array('%label' => $region->label()), WATCHDOG_NOTICE);
+  $form_state['redirect'] = 'admin/structure/regions';
+}
diff --git a/core/modules/region/region.info b/core/modules/region/region.info
new file mode 100644
index 0000000..e277443
--- /dev/null
+++ b/core/modules/region/region.info
@@ -0,0 +1,14 @@
+name = Region
+description = Maintains a common set of regions available to layouts.
+package = Core
+version = VERSION
+core = 8.x
+dependencies[] = config
+configure = admin/structure/regions
+
+
+; Information added by drush on 2012-11-09
+version = ""
+project = "drupal"
+datestamp = "1352493228"
+
diff --git a/core/modules/region/region.module b/core/modules/region/region.module
new file mode 100644
index 0000000..8bf35c7
--- /dev/null
+++ b/core/modules/region/region.module
@@ -0,0 +1,126 @@
+<?php
+
+/**
+ * @file
+ * Module to maintain a common set of regions for layouts.
+ */
+
+use Drupal\region\Region;
+
+/**
+ * Implements hook_menu().
+ */
+function region_menu() {
+  $items = array();
+  $items['admin/structure/regions'] = array(
+    'title' => 'Regions',
+    'description' => 'Manage list of regions that allow content to be placed.',
+    'page callback' => 'region_page_list',
+    'access callback' => 'user_access',
+    'access arguments' => array('administer regions'),
+    'file' => 'region.admin.inc',
+  );
+  $items['admin/structure/regions/add'] = array(
+    'title' => 'Add region',
+    'page callback' => 'region_page_add',
+    'access callback' => 'user_access',
+    'access arguments' => array('administer regions'),
+    'type' => MENU_LOCAL_ACTION,
+    'file' => 'region.admin.inc',
+  );
+  $items['admin/structure/regions/manage/%region'] = array(
+    'title' => 'Edit region',
+    'page callback' => 'region_page_edit',
+    'page arguments' => array(4),
+    'access callback' => 'user_access',
+    'access arguments' => array('administer regions'),
+    'type' => MENU_CALLBACK,
+    'file' => 'region.admin.inc',
+  );
+  $items['admin/structure/regions/manage/%region/edit'] = array(
+    'title' => 'Edit',
+    'type' => MENU_DEFAULT_LOCAL_TASK,
+    'weight' => -100,
+  );
+  $items['admin/structure/regions/manage/%region/delete'] = array(
+    'title' => 'Delete',
+    'page callback' => 'drupal_get_form',
+    'page arguments' => array('region_delete_confirm', 4),
+    'access callback' => 'user_access',
+    'access arguments' => array('administer regions'),
+    'type' => MENU_LOCAL_TASK,
+    'file' => 'region.admin.inc',
+  );
+  return $items;
+}
+
+/**
+ * Implements hook_permission().
+ */
+function region_permission() {
+  return array(
+    'administer regions' => array(
+      'title' => t('Administer regions'),
+      'description' => t('Manage list of regions available on the site.'),
+    ),
+  );
+}
+
+/**
+ * Implements hook_entity_info().
+ */
+function region_entity_info() {
+  $types['region'] = array(
+    'label' => 'Region',
+    'entity class' => 'Drupal\region\Region',
+    'controller class' => 'Drupal\Core\Config\Entity\ConfigStorageController',
+    'form controller class' => array(
+      'default' => 'Drupal\region\RegionFormController',
+    ),
+    'list controller class' => 'Drupal\Core\Config\Entity\ConfigEntityListController',
+    'list path' => 'admin/structure/regions',
+    'uri callback' => 'region_uri',
+    'config prefix' => 'region',
+    'entity keys' => array(
+      'id' => 'id',
+      'label' => 'label',
+      'uuid' => 'uuid',
+    ),
+  );
+  return $types;
+}
+
+/**
+ * Entity URI callback.
+ *
+ * @param Drupal\region\Region $region
+ *   Region configuration entity instance.
+ *
+ * @return array
+ *   Entity URI information.
+ */
+function region_uri(Region $region) {
+  return array(
+    'path' => 'admin/structure/regions/manage/' . $region->id(),
+  );
+}
+
+/**
+ * Load one region object by its identifier.
+ *
+ * @return Drupal\region\Region
+ *   Region configuration entity instance.
+ */
+function region_load($id) {
+  return entity_load('region', $id);
+}
+
+/**
+ * Load all region objects.
+ *
+ * @return array
+ *   List of Drupal\region\Region instances keyed by id.
+ */
+function region_load_all() {
+  return entity_load_multiple('region');
+}
diff --git a/core/modules/rlayout/config/grid.six_column_fluid_tablet.yml b/core/modules/rlayout/config/grid.six_column_fluid_tablet.yml
new file mode 100644
index 0000000..744496e
--- /dev/null
+++ b/core/modules/rlayout/config/grid.six_column_fluid_tablet.yml
@@ -0,0 +1,12 @@
+id: six_column_fluid_tablet
+label: Six column fluid
+type: equal_column
+options:
+  type: 'fluid'
+  width: 100
+  columns: 6
+  padding_width: 1.5
+  gutter_width: 2
+  breakpoints:
+    - 'module.rlayout.tablet'
+
diff --git a/core/modules/rlayout/config/grid.three_column_fluid_smartphone.yml b/core/modules/rlayout/config/grid.three_column_fluid_smartphone.yml
new file mode 100644
index 0000000..a5077bf
--- /dev/null
+++ b/core/modules/rlayout/config/grid.three_column_fluid_smartphone.yml
@@ -0,0 +1,12 @@
+id: three_column_fluid_smartphone
+label: Three column fluid
+type: equal_column
+options:
+  type: 'fluid'
+  width: 100
+  columns: 3
+  padding_width: 1.5
+  gutter_width: 2
+  breakpoints:
+    - 'module.rlayout.smartphone'
+
diff --git a/core/modules/rlayout/config/grid.twelve_column_fluid_standard.yml b/core/modules/rlayout/config/grid.twelve_column_fluid_standard.yml
new file mode 100644
index 0000000..ef98884
--- /dev/null
+++ b/core/modules/rlayout/config/grid.twelve_column_fluid_standard.yml
@@ -0,0 +1,12 @@
+id: twelve_column_fluid_standard
+label: Twelve column fluid
+type: equal_column
+options:
+  type: 'fluid'
+  width: 100
+  columns: 12
+  padding_width: 1.5
+  gutter_width: 2
+  breakpoints:
+    - 'module.rlayout.standard'
+
diff --git a/core/modules/rlayout/config/rlayout.breakpoints.yml b/core/modules/rlayout/config/rlayout.breakpoints.yml
new file mode 100644
index 0000000..d8f354c
--- /dev/null
+++ b/core/modules/rlayout/config/rlayout.breakpoints.yml
@@ -0,0 +1,3 @@
+smartphone: '(min-width: 0px)'
+tablet: 'all and (min-width: 321px) and (max-width: 760px)'
+standard: 'all and (min-width: 761px)'
diff --git a/core/modules/rlayout/config/rlayoutset.default.yml b/core/modules/rlayout/config/rlayoutset.default.yml
new file mode 100644
index 0000000..292e361
--- /dev/null
+++ b/core/modules/rlayout/config/rlayoutset.default.yml
@@ -0,0 +1,19 @@
+id: default
+label: Default layout
+regions:
+  - header_a
+  - header_b
+  - header_c
+  - subheader_a
+  - subheader_b
+  - subheader_c
+  - navigation
+  - title
+  - body
+  - sidebar_a
+  - sidebar_b
+  - sidebar_c
+  - footer_a
+  - footer_b
+  - footer_c
+overrides:
diff --git a/core/modules/rlayout/designer/app/libs/Grid/Grid.js b/core/modules/rlayout/designer/app/libs/Grid/Grid.js
new file mode 100644
index 0000000..ff7b42a
--- /dev/null
+++ b/core/modules/rlayout/designer/app/libs/Grid/Grid.js
@@ -0,0 +1,25 @@
+(function (RLD, $) {
+
+  RLD['Grid'] = (function () {
+
+    var plugin = 'Grid';
+    
+    function Grid() {
+      // Initialize the object.
+      this.init.apply(this, arguments);
+    }
+    /**
+     * Extend the InitClass Object.
+     */
+    Grid.prototype = new RLD.InitClass();
+    /**
+     *
+     */
+    Grid.prototype.setup = function () {
+      
+    };
+    
+    return Grid;
+    
+  }());
+}(ResponsiveLayoutDesigner, jQuery));
\ No newline at end of file
diff --git a/core/modules/rlayout/designer/app/libs/GridList/GridList.js b/core/modules/rlayout/designer/app/libs/GridList/GridList.js
new file mode 100644
index 0000000..2f039d8
--- /dev/null
+++ b/core/modules/rlayout/designer/app/libs/GridList/GridList.js
@@ -0,0 +1,58 @@
+(function (RLD, $) {
+  // Temp location.
+  RLD['GridList'] = (function () {
+
+    var plugin = 'GridList';
+
+    function GridList() {
+      this.items = [];
+      // Initialize the object.
+      this.init.apply(this, arguments);
+    }
+    /**
+     * Extend the InitClass Object.
+     */
+    GridList.prototype = new RLD.InitClass();
+    /**
+     *
+     */
+    GridList.prototype.setup = function () {
+      // Process list items.
+      if ('grids' in this) {
+        this.processList(this.grids);
+        delete this.grids;
+      }
+      else {
+        this.log('[RLD | ' + plugin + '] The list has no items at setup.');
+      }
+    };
+    /**
+     *
+     */
+    GridList.prototype.build = function () {
+      return this.$editor;
+    };
+    /**
+     *
+     */
+    GridList.prototype.processList = function (items) {
+      var i;
+      for (i = 0; i < items.length; i++) {
+        this.items.push(new RLD.Grid({
+          'machine_name': items[i].machine_name,
+          'columns': items[i].columns,
+          'classes': items[i].classes
+        }));
+      }
+    };
+    /**
+     *
+     */
+    GridList.prototype.update = function (type, list) {
+      this.items = type;
+    };
+
+    return GridList;
+    
+  }());
+}(ResponsiveLayoutDesigner, jQuery));
diff --git a/core/modules/rlayout/designer/app/libs/LayoutList/LayoutList.js b/core/modules/rlayout/designer/app/libs/LayoutList/LayoutList.js
new file mode 100644
index 0000000..fa81b04
--- /dev/null
+++ b/core/modules/rlayout/designer/app/libs/LayoutList/LayoutList.js
@@ -0,0 +1,72 @@
+(function (RLD, $) {
+  // Temp location.
+  RLD['LayoutList'] = (function () {
+
+    var plugin = 'LayoutList';
+
+    function LayoutList() {
+      this.items = [];
+      // Initialize the object.
+      this.init.apply(this, arguments);
+    }
+    /**
+     * Extend the InitClass Object.
+     */
+    LayoutList.prototype = new RLD.InitClass();
+    /**
+     *
+     */
+    LayoutList.prototype.setup = function () {
+      // Process list items.
+      if ('layouts' in this) {
+        this.processList(this.layouts);
+        delete this.layouts;
+      }
+      else {
+        this.log('[RLD | ' + plugin + '] The list has no items at setup.');
+      }
+    };
+    /**
+     *
+     */
+    LayoutList.prototype.processList = function (items) {
+      // The broadcaster just pipes events through.
+      var handlers = {};
+      var newSet = [];
+      var i, layoutStep, listener, fn;
+      // Create obects for each composite.
+      for (i = 0; i < items.length; i++) {
+        // Save the layout elements into a unit.
+        layoutStep = new RLD.LayoutStep({
+          'regionList': items[i].regionList,
+          'step': items[i].step,
+          'grid': items[i].grid
+        });
+        // Pust the layoutStep into the list.
+        this.items.push(layoutStep);
+        newSet.push(layoutStep);
+        
+      }
+      // Register pass-through topics.
+      this.transferSubscriptions(this.items);
+      // Return the items that were added.
+      return newSet;
+    };
+    /**
+     *
+     */
+    LayoutList.prototype.addItem = function (layout) {
+      var items = this.processList([layout]);
+      return items;
+    }
+    /**
+     *
+     */
+    LayoutList.prototype.update = function (type, list) {
+      this.items = list;
+    };
+
+    return LayoutList;
+    
+  }());
+}(ResponsiveLayoutDesigner, jQuery));
diff --git a/core/modules/rlayout/designer/app/libs/LayoutManager/LayoutManager.js b/core/modules/rlayout/designer/app/libs/LayoutManager/LayoutManager.js
new file mode 100644
index 0000000..b7e3456
--- /dev/null
+++ b/core/modules/rlayout/designer/app/libs/LayoutManager/LayoutManager.js
@@ -0,0 +1,426 @@
+(function (RLD, $) {
+  /**
+   * LayoutManager editor provides functionality to display, add and remove
+   * layout representations across arbitrary, user-defined breakpoint limits.
+   */
+  RLD['LayoutManager'] = (function build() {
+
+    var plugin = 'LayoutManager';
+
+    function LayoutManager() {
+      // Ui components.
+      this.options = {
+        'ui': {
+          'class-layout': 'rld-stepmanager',
+          'class-layout-tabs': 'rld-steps',
+          'class-layout-content': 'rld-layouts'
+        }
+      };
+      this.$editor = $();
+      this.$stepSelector = $();
+      this.$steps = $();
+      this.$layouts = $();
+      this.activeLayoutStep;
+      // Setup
+      this.init.apply(this, arguments);
+    }
+    /**
+     * Extend the InitClass Object.
+     */
+    LayoutManager.prototype = new RLD.InitClass();
+    /**
+     * Integrate instantiation options.
+     */
+    LayoutManager.prototype.setup = function () {
+      var fn, steps;
+      // Instantiate classes.
+      this.stepManager = new RLD.StepManager();
+      this.layoutList = new RLD.LayoutList();
+      // Define topics that will pass-through.
+      this.topic('regionOrderUpdated');
+      this.topic('layoutSaved');
+      this.topic('regionResized');
+      this.topic('regionResizing');
+      this.topic('regionResizeStarted');
+      // Transfer pass-through subscriptions.
+      this.transferSubscriptions([
+        this.stepManager,
+        this.regionList,
+        this.layoutList
+      ]);
+      // Register for events on the stepManager.
+      fn = $.proxy(this.switchStep, this);
+      this.stepManager.topic('stepActivated').subscribe(fn);
+      // Register for events on the regionList.
+      fn = $.proxy(this.insertRegion, this);
+      this.regionList.topic('regionAdded').subscribe(fn);
+      fn = $.proxy(this.removeRegion, this);
+      this.regionList.topic('regionRemoved').subscribe(fn);
+      // Register for events on the layoutList
+      fn = $.proxy(this.requestRegionRemove, this);
+      this.layoutList.topic('regionRemoved').subscribe(fn);
+      // Assemble the editor managers and containers.
+      this.$stepSelector = $('<div>', {
+        'class': this.ui['class-layout']
+      });
+      this.$steps = $('<ul>', {
+        'class': this.ui['class-layout-tabs']
+      });
+      this.$layouts = $('<div>', {
+        'class': this.ui['class-layout-content']
+      });
+      // Register Layouts into the layoutList
+      // For every step we'll register a layout.
+      steps = this.stepList.info('items');
+      // Create obects for each composite.
+      for (i = 0; i < steps.length; i++) {
+        // Save the composition elements into a unit.
+        this.registerLayoutStep(steps[i]);
+      }
+    };
+    /**
+     *
+     */
+    LayoutManager.prototype.build = function () {
+      // Assemble the editor fraemwork.
+      this.$editor = $('<div>', {
+        'class': 'rld-layout-manager'
+      })
+      .append(
+        this.$stepSelector
+        .append(
+          this.stepManager.build(this.$steps)
+        )
+      )
+      .append(
+        this.$layouts
+        .append(
+          $('<div>', {
+            'class': 'rld-screen clearfix',
+          })
+        )
+      );
+      /*this.$editor
+      .delegate('button.save', 'click.ResponsiveLayoutDesigner', {'type': 'save'}, this.update); */
+      return this.$editor;
+    };
+    /**
+     * A layout is a set of regions, in the context of a step, laid out on a grid.
+     */
+    LayoutManager.prototype.registerLayoutStep = function (step) {
+      // Add the LayoutSteps to the LayoutList.
+      this.layoutList.addItem({
+        'step': step,
+        'regionList': this.regionList,
+        'grid': this.gridList.getItem(step.grid.info('machine_name'))
+      });
+      // Add the Step to the StepManager.
+      this.stepManager.addItem(step);
+    };
+    /**
+     *
+     */
+    LayoutManager.prototype.switchStep = function (event, step) {
+      var args = arguments;
+      var id = this.stepManager.info('activeStep').info('breakpoint');
+      var $screen = this.$layouts.find('.rld-screen');
+      var $layout = $('<div>', {
+        'class': 'rld-layout'
+      });
+      var layout = this.getActiveLayout();
+      var i, grid, gridColumns, gridClasses;
+      // Clear out the current screen.
+      $screen.children('.rld-layout').hide(0, function () {
+        $(this).remove();
+      });
+      grid = layout.info('grid');
+      gridColumns = grid.info('columns');
+      gridClasses = grid.info('classes') || [];
+      if (gridClasses.length > 0) {
+        $screen.addClass();
+      }
+      $screen.animate({
+        width: layout.step.info('size')
+      });
+      // Append the frame to the screen.
+      $screen
+      .append(
+        $layout
+        .empty()
+        .addClass('rld-container-' + gridColumns)
+        .append(this.buildAddRegionButton('top'))
+        .append(this.buildGridUnderlay(gridColumns))
+        .append(layout.build())
+        .append(this.buildAddRegionButton('bottom'))
+      );
+
+      this.topic('stepActivated').publish(step);
+    };
+    /**
+     *
+     */
+    LayoutManager.prototype.getActiveLayout = function () {
+      var activeStep = this.stepManager.info('activeStep');
+      var layout;
+      for (i = 0; i < this.layoutList.info('items').length; i++) {
+        layout = this.layoutList.info('items')[i];
+        if (layout.step.info('machine_name') === activeStep.info('machine_name')) {
+          return layout;
+        }
+      }
+    };
+    /**
+     *
+     */
+    LayoutManager.prototype.buildGridUnderlay = function (columns, height) {
+      var $overlay = $('<div>', {
+        'class': 'rld-grid-underlay clearfix'
+      });
+      var cols = Number(columns);
+      var fn;
+      while (cols) {
+        $overlay.append(
+          $('<div>', {
+            'class': 'rld-span_1 rld-col rld-grid-col'
+          })
+        );
+        cols -= 1;
+      }
+      return $overlay;
+    };
+    /**
+     *
+     */
+    LayoutManager.prototype.buildAddRegionButton = function (location) {
+      var handler = $.proxy(this.addRegionHandler, this);
+      var $controls = $('<div>', {
+        'class': 'rld-layoutstep-controls' + ' ' + location
+      })
+      .append(
+        $('<button>', {
+          'text': 'Add region to ' + location
+        })
+        .bind('click', {'location': location}, handler)
+      );
+      return $controls;
+    };
+    /**
+     *
+     */
+    LayoutManager.prototype.addRegionHandler = function (event) {
+      event.preventDefault();
+      var regionList = this.regionList;
+      this.candidateRegionName = '';
+      this.candidateRegionMachineName = '';
+      // Dialog pieces.
+      var $input = $('<input>', {
+        'type': 'text'
+      });
+      var $machineName = $('<div>', {
+        'text': '',
+        'class': 'rld-description'
+      });
+      var $availableRegionSelectbox = $('<select>', {
+        'name': 'available-region-select'
+      })
+      .append(
+        $('<option>', {
+          'text': 'No selection',
+          'value': 'null',
+          'selected': 'selected'
+        })
+      );
+      // Populate the available regions select box with a list of regions.
+      var availableRegions = this.availableRegionList.info('items');
+      var i;
+      for (i = 0; i < availableRegions.length; i++) {
+        $('<option>', {
+          'text': availableRegions[i].label || 'No label',
+          'value': availableRegions[i].machine_name
+        })
+        .appendTo($availableRegionSelectbox);
+      }
+      // Machine name checking callback.
+      var machineNameCheck = $.proxy(this.regionList.guaranteeMachineName, this.regionList);
+      // Machine name writing callback.
+      var machineNamePrint = $.proxy(function machineNamePrintProxy(checker, $input, $display, event) {
+        var candidate = this.candidateRegionName = $input.val() || '';
+        var machine_name = candidate.replace(/\s+/g, '_').toLowerCase();
+        // Confine the machine name to 24 characters.
+        if (machine_name.length > 24) {
+          machine_name = machine_name.slice(0, 24);
+        }
+        this.candidateRegionMachineName = machine_name;
+        var isUnique = checker(machine_name);
+        if (isUnique) {
+          $display
+          .text(machine_name)
+          .css({
+            'color': 'black'
+          });
+        }
+        else {
+          $display
+          .text(machine_name)
+          .css({
+            'color': 'red'
+          });
+        }
+      }, this, machineNameCheck, $input, $machineName);
+      // Create and insert the dialog.
+      var $dialog = $('<div>', {
+        'class': 'rld-dialog'
+      });
+      if (availableRegions.length > 0) {
+        $dialog
+        .append($('<label>', {
+          'text': 'Existing region'
+        }))
+        .append($availableRegionSelectbox);
+      };
+      $dialog
+      .append($('<label>', {
+        'text': 'New region'
+      }))
+      .append($input)
+      .append($machineName)
+      .on({
+        'keydown': RLD.Utils.keyManager,
+        'keyup': machineNamePrint
+      },
+      'input',
+      {
+        'callback': machineNamePrint,
+        'pattern': /^[_]*[A-Za-z0-9\_\-\+\s]*$/
+      })
+      .dialog({
+        'title': 'Add a region',
+        'resizable': true,
+        'modal': true
+      });
+      // This is a touch circular, but we need the callback to have the context of the application,
+      // not the dialog box.
+      // Create the dialog callbacks.
+      var buttons = {};
+      var saveCallback = $.Callbacks();
+      var save = $.proxy(this.requestRegionAdd, this, event.data.location, $dialog);
+      // This here is expected to be the div#dialog, which it will be
+      // when the cancel function is called by the dialog.
+      var cancel = function () {
+        $(this).dialog('destroy');
+      };
+      saveCallback.add(save);
+      saveCallback.add(cancel);
+      buttons['Save'] = saveCallback.fire;
+      buttons['Cancel'] = cancel;
+      $dialog.dialog('option', 'buttons', buttons);
+    };
+    /**
+     *
+     */
+    LayoutManager.prototype.requestRegionAdd = function (location, $dialog, event) {
+      // If an available region is selected, add it.
+      var region;
+      var $selectedAvailableRegion = $dialog.find('[name="available-region-select"]').find('option').filter(':selected');
+      if ($selectedAvailableRegion.length > 0 && $selectedAvailableRegion.val() !== 'null') {
+        var region = this.availableRegionList.getItem($selectedAvailableRegion.val());
+        this.regionList.insertItem({
+          'machine_name': region.machine_name,
+          'label': region.label
+        }, location);
+        // Remove the region from the list of available regions.
+        this.availableRegionList.removeItem(region);
+        return; // This isn't the best interaction. It's just stub code for now.
+      }
+      // this.availableRegionList.removeItem(region.machine_name);
+      // If a new region is named, add it.
+      this.regionList.insertItem({
+        'machine_name': this.candidateRegionMachineName,
+        'label': this.candidateRegionName
+      }, location);
+    };
+    /**
+     *
+     */
+    LayoutManager.prototype.insertRegion = function (event, updatedRegionList, newRegionItems, location) {
+      this.getActiveLayout().insertRows(newRegionItems, location);
+      // Publish the regionAdded topic.
+      this.topic('regionAdded').publish(event, this);
+    };
+    /**
+     *
+     */
+    LayoutManager.prototype.requestRegionRemove = function (event, layoutStep, region) {
+      // Remove the item from the regionList.
+      this.regionList.removeItem(region);
+      // Add the region to the list of available regions.
+      this.availableRegionList.addItem(region);
+    };
+    /**
+     *
+     */
+    LayoutManager.prototype.removeRegion = function (event, region) {
+      var $region = region.info('$editor');
+      var $prev = $region.prev('.rld-region');
+      var $next = $region.next('.rld-region');
+      var span = region.info('span');
+      var activeStep = this.stepManager.info('activeStep');
+      var layoutManager = this;
+      var layout = this.getActiveLayout();
+      var passiveRegion, replacementRegion;
+      // If region has no siblings, hide row. Otherwise, hide region.
+      if ($prev.length === 0 && $next.length === 0) {
+        $region.closest('.rld-row').slideUp(function () {
+          $(this).remove();
+        });
+      }
+      else {
+        $region.slideUp(function () {
+          $(this).remove();
+          if ($prev.length > 0) {
+            passiveRegion = $prev.data('RLD/Region');
+          }
+          else if ($next.length > 0) {
+            passiveRegion = $next.data('RLD/Region');
+          }
+          if (passiveRegion !== undefined) {
+            span = passiveRegion.alterSpan(span, true);
+            // Save any changes to regions.
+            // This doesn't belong here at all, but it's what we've got for the moment.
+            var r;
+            var regionList = layout.regionList.info('items');
+            for (r in regionList) {
+              if (regionList.hasOwnProperty(r)) {
+                // If the region already has an override, update it.
+                if ('span' in regionList[r] && regionList[r].span > 0) {
+                  var item = layout.step.regionList.getItem(regionList[r].info('machine_name'))
+                  if (item) {
+                    item.alterColumns(regionList[r].span);
+                  }
+                  // If the region doesn't have an override yet, create one. This can't be a reference to the
+                  // canonical regionList regions, it needs to be a new object.
+                  else {
+                    var temp = regionList[r].snapshot();
+                    temp.columns = temp.span;
+                    layout.step.regionList.addItem(temp);
+                  }
+                }
+              }
+            }
+          }
+        });
+      }
+      layoutManager.topic('regionRemoved').publish(event, layoutManager);
+    };
+    /**
+     *
+     */
+    LayoutManager.prototype.hideRegion = function (event) {
+      this.topic('regionHidden').publish(event, this);
+    };
+
+    return LayoutManager;
+
+  }());
+
+}(ResponsiveLayoutDesigner, jQuery));
diff --git a/core/modules/rlayout/designer/app/libs/LayoutPreviewer/LayoutPreviewer.js b/core/modules/rlayout/designer/app/libs/LayoutPreviewer/LayoutPreviewer.js
new file mode 100644
index 0000000..7fe1454
--- /dev/null
+++ b/core/modules/rlayout/designer/app/libs/LayoutPreviewer/LayoutPreviewer.js
@@ -0,0 +1,220 @@
+(function (RLD, $) {
+  /**
+   * LayoutPreviewer editor provides functionality to display, add and remove
+   * layout representations across arbitrary, user-defined breakpoint limits.
+   */
+  RLD['LayoutPreviewer'] = (function build() {
+
+    var plugin = 'LayoutPreviewer';
+    
+    function LayoutPreviewer() {
+      // Ui components.
+      this.options = {
+        'ui': {
+          'class-layout': 'rld-stepmanager',
+          'class-layout-tabs': 'rld-steps'
+        }
+      };
+      this.$editor = $();
+      this.$stepSelector = $();
+      this.activeLayoutStep;
+      // Setup
+      this.init.apply(this, arguments);
+    }
+    /**
+     * Extend the InitClass Object.
+     */
+    LayoutPreviewer.prototype = new RLD.InitClass();
+    /**
+     * Integrate instantiation options.
+     */
+    LayoutPreviewer.prototype.setup = function () {
+      var fn, steps;
+      // Instantiate classes.
+      this.stepManager = new RLD.StepManager();
+      this.layoutList = new RLD.LayoutList();
+      // Define topics that will pass-through.
+      // -- none.
+      // Transfer pass-through subscriptions.
+      this.transferSubscriptions([
+        this.stepManager,
+        this.layoutList
+      ]);
+      // Register for events on the stepManager.
+      fn = $.proxy(this.switchStep, this);
+      this.stepManager.topic('stepActivated').subscribe(fn);
+      // Assemble the editor managers and containers.
+      this.$stepSelector = $('<div>', {
+        'class': this.ui['class-layout']
+      });
+      this.$steps = $('<ul>', {
+        'class': this.ui['class-layout-tabs']
+      });
+      this.$layouts = $('<div>', {
+        'class': this.ui['class-layout-content']
+      });
+      // Register Layouts into the layoutList
+      // For every step we'll register a layout.
+      steps = this.stepList.info('items');
+      // Create obects for each composite.
+      for (i = 0; i < steps.length; i++) {
+        // Save the composition elements into a unit.
+        this.registerLayoutStep(steps[i]);
+      }
+      // Register a DOM ready handler.
+      $(document).on('ready', $.proxy(this.injectPreviewDOM, this));
+    };
+    /**
+     *
+     */
+    LayoutPreviewer.prototype.build = function () {
+      // Assemble the editor fraemwork.
+      this.$editor = $('<div>', {
+        'class': 'rld-layout-previewer'
+      })
+      .append(
+        this.$stepSelector
+        .append(
+          this.stepManager.build(this.$steps)
+        )
+      );
+      /*this.$editor
+      .delegate('button.save', 'click.ResponsiveLayoutDesigner', {'type': 'save'}, this.update); */
+      return this.$editor;
+    };
+    /**
+     *
+     */
+    LayoutPreviewer.prototype.switchStep = function (event, step) {
+      var width, frame, $frame, fn;
+      var $editor = this.$editor;
+      var grid = this.gridList.getItem(step.grid['machine_name']);
+      var $frame = $('.rld-previewer');
+      if ($frame.length === 0) {
+        var preview = $('<div>', {}).load( window.location.href, function (data, status, jqXHR) {
+          var $html = $(this);
+          var $head = $html.find('meta, link, title, style, script');
+          var $body = $html.find('#page-wrapper');
+          $head = $('<div>', {
+            'html': $head
+          });
+          $body = $('<div>', {
+            'html': $body
+          });
+          frame = document.createElement('iframe');
+          // Hard-coded offset. This is bad bad bad. 
+          frame.height = document.documentElement.clientHeight - 120;
+          frame.className = 'rld-modal rld-previewer';
+          document.body.appendChild(frame);
+          var content = '<!DOCTYPE html><html><head>' + $head.html() + '</head><body>' + $body.html() + '</body></html>';
+          
+          frame.contentWindow.document.open('text/html', 'replace');
+          frame.contentWindow.document.write(content);
+          frame.contentWindow.document.close();
+          var $frame = $('.rld-previewer');
+          width = Number(step.info('size'));
+          $frame.animate({
+            width: width,
+            left: (document.documentElement.clientWidth - width ) / 2
+          });
+        });
+        $('.rld-previewer');
+        $('<div>', {
+          'class': 'rld-modal rld-modal-screen'
+        })
+        .css({
+          'display': 'none'
+        })
+        .appendTo('body')
+        .fadeIn();
+        $('<div>', {
+          'class': 'rld-modal rld-modal-close',
+          'html': $('<a>', {
+            'href': '#',
+            'text': 'Close'
+          })
+          .on({
+            'click': function (event) {
+              // The following functions are acting globally on the page. This is bad bad bad.
+              // They should only apply with the application or the editor.
+              $('.rld-steps .rld-active').removeClass('rld-active');
+              $('.rld-modal').fadeOut(function () {
+                $(this).remove();
+              });
+            }
+          })
+        })
+        .prependTo($editor);
+      }
+      width = Number(step.info('size'));
+      $frame.animate({
+        width: width,
+        left: (document.documentElement.clientWidth - width ) / 2
+      });
+      this.topic('stepActivated').publish(step);
+    };
+    /**
+     *
+     */
+    LayoutPreviewer.prototype.injectPreviewDOM = function (event) {
+      var steps = this.stepList.info('items');
+      var grids = this.gridList.info('items')
+      var breakUpPayload = {};
+      var step;
+      for (step in steps) {
+        if (steps.hasOwnProperty(step)) {
+          // breakUpPayload[step.machine_name] = $.proxy(this.switchStep, this, step, );
+        }
+      }
+    };
+    /**
+     *
+     */
+    LayoutPreviewer.prototype.getActiveLayout = function () {
+      var activeStep = this.stepManager.info('activeStep');
+      var layout;
+      for (i = 0; i < this.layoutList.info('items').length; i++) {
+        layout = this.layoutList.info('items')[i];
+        if (layout.step.info('machine_name') === activeStep.info('machine_name')) {
+          return layout;
+        }
+      }
+    };
+    /**
+     *
+     */
+    LayoutPreviewer.prototype.buildGridUnderlay = function (columns, height) {
+      var $overlay = $('<div>', {
+        'class': 'rld-grid-underlay clearfix'
+      });
+      var cols = Number(columns);
+      var fn;
+      while (cols) {
+        $overlay.append(
+          $('<div>', {
+            'class': 'rld-span_1 rld-col rld-grid-col'
+          })
+        );
+        cols -= 1;
+      }
+      return $overlay;
+    };
+    /**
+     * A layout is a set of regions, in the context of a step, laid out on a grid.
+     */
+    LayoutPreviewer.prototype.registerLayoutStep = function (step) {
+      // Add the LayoutSteps to the LayoutList.
+      this.layoutList.addItem({
+        'step': step,
+        'regionList': this.regionList,
+        'grid': this.gridList.getItem(step.grid.info('machine_name'))
+      });
+      // Add the Step to the StepManager.
+      this.stepManager.addItem(step);
+    };
+
+    return LayoutPreviewer;
+    
+  }());
+
+}(ResponsiveLayoutDesigner, jQuery));
\ No newline at end of file
diff --git a/core/modules/rlayout/designer/app/libs/LayoutStep/LayoutStep.js b/core/modules/rlayout/designer/app/libs/LayoutStep/LayoutStep.js
new file mode 100644
index 0000000..ff2a252
--- /dev/null
+++ b/core/modules/rlayout/designer/app/libs/LayoutStep/LayoutStep.js
@@ -0,0 +1,484 @@
+(function (RLD, $) {
+  
+  RLD['LayoutStep'] = (function () {
+
+    var plugin = 'LayoutStep';
+
+    // Layout Class
+    function LayoutStep() {
+      this.deltaColumns = 0;
+      // Initialize the object.
+      this.init.apply(this, arguments);
+    }
+    /**
+     * Extend the InitClass Object.
+     */
+    LayoutStep.prototype = new RLD.InitClass();
+    
+    LayoutStep.prototype.setup = function () {
+      // Define topics that will pass-through.
+      this.topic('regionOrderUpdated');
+      this.topic('regionAdded');
+      this.topic('regionRemoved');
+      this.topic('regionResized');
+      this.topic('regionResizing');
+      this.topic('regionResizeStarted');
+    };
+    
+    LayoutStep.prototype.build = function (options, items) {
+      this.$editor = $('<div>', {});
+      var regions = items || this.regionList.info('items');
+      this.$editor.append(this.buildRows(regions).contents());
+      // Bind behaviors.
+      fn = $.proxy(this.sortRows, this);
+      this.$editor.sortable({
+        // Make a placeholder visible when dragging.
+        placeholder: "ui-state-highlight",
+        // When the dragging and dropping is done, save updated region
+        // list in our local list.
+        deactivate: fn
+      });
+      // Return the $editor as a jQuery object.
+      return this.$editor;
+    };
+    
+    LayoutStep.prototype.sortRows = function (event, data) {
+      var regionList = [];
+      var i;
+      // Get the region objects in their new order.
+      var $regions = data.sender.find('.rld-region');
+      for (i = 0; i < $regions.length; i++) {
+        regionList.push($($regions[i]).data('RLD/Region'));
+      }
+      this.regionList.update(regionList);
+      // 
+      this.topic('regionOrderUpdated').publish(this);
+    };
+    LayoutStep.prototype.modifyRegionBuild = function ($region) {
+      var region = $region.data('RLD/Region');
+      var fn;
+      // Add splittrs to the regions.
+      $region
+      .prepend(
+        $('<div>', {
+          'class': 'rld-splitter rld-splitter-left'
+        })
+        .data('RLD/Region/Splitter-side', 'left')
+      )
+      .append(
+        $('<div>', {
+          'class': 'rld-splitter rld-splitter-right'
+        })
+        .data('RLD/Region/Splitter-side', 'right')
+      )
+      .append(
+        $('<a>', {
+          'class': 'rld-region-close',
+          'href': '#',
+          'text': 'X',
+          'title': 'Close',
+        })
+      );
+      // Region resize.
+      fn = $.proxy(this.startRegionResize, this);
+      $region
+      .on({
+        'mousedown.ResponsiveLayoutDesigner': fn
+      }, '.rld-splitter', {'region': region});
+      // Region remove.
+      $region.on({
+        'click.ResponsiveLayoutDesigner': this.removeRegion
+      },'.rld-region-close', {'manager': this});
+      // Return the editor as a DOM fragment.
+      return $region
+    };
+    /**
+     *
+     */
+    LayoutStep.prototype.startRegionResize = function (event) {
+      this.$editor.sortable('disable');
+      event.stopImmediatePropagation();
+      var data = event.data;
+      var region = data.region;
+      var $region = region.info('$editor');
+      var $splitter = $(event.target);
+      // @todo eventually the row should be stored in state, not structure.
+      var $row = $region.closest('.rld-row');
+      var i, widthOffset, originalColumn;
+      // Mark the region as active.
+      region.info('active', true);
+      // Mark the splitter active.
+      $splitter.addClass('splitter-active');
+      // Since the resize function will be called on mousemove, we don't want
+      // to calculate the state of the row's region more than once. So we
+      // pass this information into the handlers.
+      // Determine if the splitter is on the left or right side of region.
+      data.$row = $row;
+      data.side = $splitter.data('RLD/Region/Splitter-side');
+      data.width = $region.outerWidth(true);
+      // Find all the regions/placeholders in this row.
+      data.units = $row.find('.rld-unit').map(function (index, element) {
+        return $(this).data('RLD/Region');
+      });
+      // Calculate the column size so regions can be snapped to grid columns.
+      data.totalColumns = Number(this.grid.info('columns'));
+      data.frame = Math.floor(Number(this.step.info('size')) / data.totalColumns);
+      // Store the X origin of the original click.
+      data.originX = event.pageX;
+      // Get the column the resize started in.
+      widthOffset = (data.side === 'right') ? data.width : 0;
+      originalColumn = Math.floor(($region.position().left + widthOffset) / data.frame);
+      data.originColumn = (data.side === 'left') ? ++originalColumn : originalColumn;
+      // Calculate the left and right bounds for the resizing.
+      data.rightMaxTraversal = data.totalColumns - data.originColumn;
+      data.leftMaxTraversal = (data.originColumn -1) * -1;
+      // Add behaviors.
+      fn = $.proxy(this.resizeRegion, this);
+      $(document).bind('mousemove.regionResize', data, fn);
+      fn = $.proxy(this.finishRegionResize, this);
+      $(document).bind('mouseup.regionResize', data, fn);
+      // Call listeners.
+      this.topic('regionResizeStarted').publish(this);
+    };
+    /**
+     *
+     */
+    LayoutStep.prototype.resizeRegion = function (event) {
+      event.stopImmediatePropagation();
+      var data = event.data;
+      var region = data.region;
+      var bypass= false;
+      // Calculate the number of grid columns the mouse has traversed.
+      var columnsTraversed = Math.floor((event.pageX - data.originX) / data.frame);
+      // We want regions resized from the right to resize on the trailing
+      // edge of the column, not the leading edge.
+      if (columnsTraversed < 0 ) {
+        columnsTraversed += 1;
+      }
+      // Get the difference between the distance we know we've covered in previous loops,
+      // and where the mouse is in this loop.
+      var traversedChunk = columnsTraversed - this.deltaColumns;
+      // This is the amount that the region might be changed by.
+      var proposedDelta = this.deltaColumns + traversedChunk;
+      // Check to see if the region needs to be sized up to the edge.
+      if ((proposedDelta === data.leftMaxTraversal || proposedDelta === data.rightMaxTraversal) && proposedDelta !== 0) {
+        bypass = true;
+      }
+      // Check to see if we are totally off the screen.
+      if (proposedDelta <= data.leftMaxTraversal || proposedDelta >= data.rightMaxTraversal) {
+        proposedDelta = (proposedDelta > 0) ? data.rightMaxTraversal : (proposedDelta < 0) ? data.leftMaxTraversal : proposedDelta;
+      }
+      // Only resize the region if the frame changes.
+      if (bypass || columnsTraversed !== this.deltaColumns) {
+        this.deltaColumns = proposedDelta;
+        // Get an object of two regions: the one to be expanded and the one to be contracted.
+        var affectedRegions = this.getAffectedRegions(region, data, traversedChunk);
+        // Resize the affected regions by the amount traversed chunk of columns.
+        if (affectedRegions.right) {
+          affectedRegions.right.alterSpan((traversedChunk * -1), true);
+        }
+        if (affectedRegions.left) {
+          affectedRegions.left.alterSpan(traversedChunk, true);
+        }
+      }
+      // this.topic('regionResizing').publish(this);
+    };
+    /**
+     *
+     */
+    LayoutStep.prototype.finishRegionResize = function (event) {
+      this.$editor.sortable('enable');
+      event.stopImmediatePropagation();
+      var layout = this;
+      var data = event.data;
+      var region = data.region;
+      var $region = region.info('$editor');
+      // Perform a final resize.
+      this.resizeRegion.apply(this, arguments);
+      // Move the next available region up to the placeholder.
+      var placeholder = this.getActivePlaceholder(data);
+      if (placeholder) {
+        var layout = this; // hack, hack, hack...
+        var $placeholder = placeholder.info('$editor');
+        var $nextRow = data.$row.next('.rld-row');
+        var $candidateRegion = $nextRow.find('.rld-region:first');
+        if ($candidateRegion.length > 0) {
+          var size = placeholder.info('span');
+          $candidateRegion.animate({
+            width: 0
+          });
+          $candidateRegion.queue(function (next) {
+            var $shiftedRegion = $candidateRegion.detach();
+            var shiftedRegion = $shiftedRegion.data('RLD/Region');
+            $placeholder.animate({
+              width: 0
+            });
+            $placeholder.queue(function (next) {
+              var $this = $(this);
+              $this.data('RLD/Region').alterSpan(0);
+              $this.removeAttr('style');
+              next();
+            });
+            $placeholder.queue(function (next) {
+              $shiftedRegion[(data.side === 'left') ? 'insertAfter' : 'insertBefore']($placeholder);
+              $shiftedRegion.animate({
+                'width': size * data.frame
+              });
+              $shiftedRegion.queue(function (next) {
+                var $this = $(this);
+                $this.data('RLD/Region').alterSpan(size);
+                $this.removeAttr('style');
+                next();
+              });
+              $shiftedRegion.queue(function (next) {
+                var $regions = $nextRow.find('.rld-region');
+                if ($regions.length === 0) {
+                  $nextRow.slideUp(function () {$(this).remove()});
+                }
+                if ($regions.length === 1) {}
+                if ($regions.length > 1) {}
+                // Save any changes to regions.
+                // This doesn't belong here at all, but it's what we've got for the moment.
+                var r;
+                var regionList = layout.regionList.info('items');
+                for (r in regionList) {
+                  if (regionList.hasOwnProperty(r)) {
+                    // If the region already has an override, update it.
+                    if ('span' in regionList[r] && regionList[r].span > 0 && regionList[r].span < data.totalColumns) {
+                      var item = layout.step.regionList.getItem(regionList[r].info('machine_name'))
+                      if (item) {
+                        item.alterColumns(regionList[r].span);
+                      }
+                      // If the region doesn't have an override yet, create one. This can't be a reference to the
+                      // canonical regionList regions, it needs to be a new object.
+                      else {
+                        var temp = regionList[r].snapshot();
+                        temp.columns = temp.span;
+                        layout.step.regionList.addItem(temp);
+                      }
+                    }
+                  }
+                }
+                // Call listeners for this event.
+                layout.topic('regionResized').publish(layout);
+                next();
+              });
+              next();
+            });
+            next();
+          });
+        }
+      }      
+      // Clean up state.
+      region.info('active', null);
+      this.deltaColumns = 0;
+      $region.find('.splitter').removeClass('splitter-active');
+      $(document).unbind('.regionResize');
+    }
+    /**
+     *
+     */
+    LayoutStep.prototype.removeRegion = function (event) {
+      event.preventDefault();
+      var $region = $(this).closest('.rld-region');
+      var region = $region.data('RLD/Region');
+      event.data.manager.topic('regionRemoved').publish(event, event.data.manager, region);
+    };
+    /**
+     *
+     */
+    LayoutStep.prototype.getAffectedRegions = function (region, data, traversedChunk) {
+      var units = data.units;
+      var activeSide = (data.side === 'left') ? 'right' : 'left';
+      var candidateSide = (data.side === 'left') ? 'left' : 'right';
+      var regions = {};
+      // Expanding and contracting checks for the active and candidate regions.
+      var isActiveContracting = ((activeSide === 'left' && traversedChunk < 0) || (activeSide === 'right' && traversedChunk > 0));
+      var isActiveExpanding = ((activeSide === 'left' && traversedChunk > 0) || (activeSide === 'right' && traversedChunk < 0));
+      var isCandidateContracting = ((candidateSide === 'left' && traversedChunk < 0) || (candidateSide === 'right' && traversedChunk > 0));
+      var isCandidateExpanding = ((candidateSide === 'left' && traversedChunk > 0) || (candidateSide === 'right' && traversedChunk < 0));
+      var i, index, candidate;
+      // Assume nothing is changing.
+      regions[activeSide] = null;
+      regions[candidateSide] = null;
+      // Don't allow the active region to contract smaller than one column or expand more than the total number of columns.
+      if ((region.columns === 1 && isActiveContracting) || ((region.columns === data.totalColumns) && isActiveExpanding)) {
+        return regions;
+      }
+      // If the active region can be altered, then determine which unit will be the passive unit.
+      // This is a zero-sum game. Someone has to make room or take room.
+      // Get the index of the active region from the units.
+      index = this.getActiveRegionIndex(units);
+      // Try candidate units until one can be manipulated.
+      for (i = (data.side === 'left') ? (index - 1) : (index + 1); i >= 0 && i < units.length; (data.side === 'left') ? i-- : i++) {
+        // The try-catch is here to make sure we don't access an index of units
+        // that doesn't exist and blow up the application.
+        try {
+          candidate = units[i];
+          // If the candidate is a placeholder, just use it.
+          if (candidate.type === 'placeholder') {
+            regions[candidateSide] = candidate;
+            break;
+          }
+          // Don't allow the candidate region to contract smaller than one column or expand more than the total number of columns.
+          if ((candidate.columns === 1 && isCandidateContracting) || ((candidate.columns === data.totalColumns) && isCandidateExpanding)) {
+            return regions;
+          }
+          // The candidate can be manipulated.
+          regions[candidateSide] = candidate;
+          break;
+        }
+        catch (error) {
+          regions[candidateSide] = null;
+        }
+      }
+      // The region can be resized. We should have a candidate as well.
+      regions[activeSide] = region;
+      return regions;
+    }
+    /**
+     *
+     */
+    LayoutStep.prototype.getActivePlaceholder = function (data) {
+      var units = data.units;
+      var activeRegionIndex = this.getActiveRegionIndex(units);
+      var placeHolderIndex = (activeRegionIndex === 1 && data.side === 'left') ? 0 : (units.length - 1);
+      var placeholder = units[placeHolderIndex];
+      if (placeholder.type === 'placeholder') {
+        if (units[placeHolderIndex].span > 0) {
+          return units[placeHolderIndex];
+        }
+      }
+      return null;
+    };
+    /**
+     *
+     */
+    LayoutStep.prototype.getActiveRegion = function (units) {
+      return units[this.getActiveRegionIndex(units)];
+    };
+    /**
+     *
+     */
+    LayoutStep.prototype.getActiveRegionIndex = function (units) {
+      var i;
+      for (i = 0; i < units.length; i++) {
+        if ('active' in units[i] && units[i].active) {
+          return i;
+        }
+      }
+      return null;
+    };
+    /**
+     *
+     */
+    LayoutStep.prototype.buildRows = function (regions, options) {
+      var $container = $('<div>', {});
+      var step = this.step;
+      var grid = this.grid;
+      var count = 0;
+      // The size of a region may be overridden in this step.
+      var regionOverrides = step.info('regionList').info('items');
+      var $row;
+      var i, k, fn, region, $region, span;
+      // Build rows and regions.
+      for (i = 0; i < regions.length; i++) {
+        var override = undefined;
+        var classes = ['rld-col rld-unit'];
+        // Start a new row if the spans in the previous row are sufficient or exceed the allotment.
+        if ((count === 0) || (count >= grid.columns)) {
+          // Append a placeholder to the end of a row.
+          if (count >= grid.columns) {
+            $row.append(
+              new RLD.Region({
+                'type': 'placeholder'
+              })
+              .build({
+                'classes': classes
+              })
+            );
+          }
+          // Create a new row.
+          $row = $('<div>', {
+            'class': 'rld-row clearfix'
+          })
+          // Append a placeholder to the start of the row.
+          .append(
+            new RLD.Region({
+              'type': 'placeholder'
+            })
+            .build({
+              'classes': classes
+            })
+          )
+          // Append the row to the editor.
+          .appendTo($container);
+          // Restart the row span count.
+          count = 0;
+        }
+        region = regions[i];
+        // If this step has region overrides, get the override that matches this region, if any.
+        if (regionOverrides.length > 0) {
+          for (k = 0; k < regionOverrides.length; k++) {         
+            if (region.info('machine_name') === regionOverrides[k]['machine_name']) {
+              override = regionOverrides[k];
+              break;
+            }
+          }
+        }
+        // If an override for this region exists, use it.
+        if (override !== undefined) {
+          span = override.columns;
+          count += override.columns;
+        }
+        // Otherwise the region is assumed to be full width.
+        else {
+          span = grid.columns;
+          count = grid.columns;
+        }
+        // Build the region.
+        $region = regions[i].build({
+          'classes': classes
+        });
+        // Alter its span.
+        $region
+        .data('RLD/Region')
+        // Get the Region object and update its span.
+        .alterSpan(span)
+        // Append it to the row.
+        $row.append(
+          this.modifyRegionBuild($region)
+        );
+        // Append a placeholder to the end of a row if this is the last item processed.
+        if (i === (regions.length - 1)) {
+          $row.append(
+            new RLD.Region({
+              'type': 'placeholder'
+            })
+            .build({
+              'classes': classes
+            })
+          );
+        }
+      }
+      return $container;
+    };
+    /**
+     *
+     */
+    LayoutStep.prototype.insertRows = function (items, location) {
+      var $editor = this.$editor;
+      // Get a well-formed region, ready to insert into a layout.
+      var $rows = this.buildRows(items).contents();
+      // Insert the wrapped region into the editor.
+      $rows.hide()
+      [(location !== undefined && location === 'top') ? 'prependTo' : 'appendTo']($editor);
+      // Reveal the wrapped regions in a pretty way.
+      $editor
+      .find($rows)
+      .slideDown(500);
+    };
+    return LayoutStep;
+    
+  }());
+}(ResponsiveLayoutDesigner, jQuery));
diff --git a/core/modules/rlayout/designer/app/libs/Region/Region.js b/core/modules/rlayout/designer/app/libs/Region/Region.js
new file mode 100644
index 0000000..c419c0a
--- /dev/null
+++ b/core/modules/rlayout/designer/app/libs/Region/Region.js
@@ -0,0 +1,101 @@
+(function (RLD, $) {
+
+  RLD['Region'] = (function () {
+
+    var plugin = 'Region';
+    /**
+     *
+     */
+    function Region() {
+      this.$editor = $('<div>', {});
+      this.type = 'region';
+      this.columns = 0; // The number of columns this region consumes in a step.
+      this.span = 0; // A temporary column consumption count for rendering a view.
+      this.columnClass = 'rld-span_';
+      // Initialize the object.
+      this.init.apply(this, arguments);
+    }
+    /**
+     * Extend the InitClass Object.
+     */
+    Region.prototype = new RLD.InitClass();
+    /**
+     *
+     */
+    Region.prototype.setup = function () {
+      this.span = this.columns;
+    };
+    /**
+     *
+     */
+    Region.prototype.build = function (options) {
+      // @todo this classes stuff needs to be generalized.
+      var classes = [];
+      var style = {};
+      classes.push('rld-' + this.type);
+      var fn;
+      if (options && 'classes' in options && 'length' in options.classes && options.classes.length > 0) {
+        classes = classes.concat(options.classes).join(' ');
+      }
+      if (options && 'style' in options && typeof options.style === 'object') {
+        style = $.extend(style, options.style);
+      }
+      
+      this.$editor = $('<div>', {
+        'id': ('label' in this) ? 'rld-region-' + this.label.split(' ').join('_') : '',
+        'class': classes,
+        'html': $('<div>', {
+          'class': 'rld-inner',
+          'html': $('<p>', {
+            'text': this.label
+          })
+        })
+      })
+      .css(style);
+      // Save a reference to the model object to data().
+      this.$editor
+      .data('RLD/Region', this);
+    
+      return this.$editor;
+    };
+    /**
+     *
+     */
+    Region.prototype.alterColumns = function (columns, isRelative) {
+      if (isRelative) {
+        this.columns += Number(columns);
+      }
+      else {
+        this.columns = Number(columns);
+      }
+      if (this.columns < 0) {
+        this.columns = 0;
+      }
+      // Change the view to match the number of columns.
+      this.alterSpan(this.columns);
+      // Return the view.
+      return this.$editor;
+    };
+    /**
+     *
+     */
+    Region.prototype.alterSpan = function (span, isRelative) {
+      if (isRelative) {
+        this.span += Number(span);
+      }
+      else {
+        this.span = Number(span);
+      }
+      if (this.span < 0) {
+        this.span = 0;
+      }
+      var span = this.columnClass + this.span;
+      this.$editor.supplantClass(this.columnClass, span);
+      // Return the new span.
+      return span;
+    };
+  
+    return Region;
+    
+  }());
+}(ResponsiveLayoutDesigner, jQuery));
diff --git a/core/modules/rlayout/designer/app/libs/RegionList/RegionList.js b/core/modules/rlayout/designer/app/libs/RegionList/RegionList.js
new file mode 100644
index 0000000..798a09c
--- /dev/null
+++ b/core/modules/rlayout/designer/app/libs/RegionList/RegionList.js
@@ -0,0 +1,119 @@
+(function (RLD, $) {
+  // Temp location.
+  RLD['RegionList'] = (function () {
+
+    var plugin = 'RegionList';
+
+    function RegionList() {
+      this.items = [];
+      // Initialize the object.
+      this.init.apply(this, arguments);
+    }
+    /**
+     * Extend the InitClass Object.
+     *
+     * Options passed into the constructor are assigned as
+     * properties of the instance.
+     */
+    RegionList.prototype = new RLD.InitClass();
+    /**
+     * Called by the InitClass prototype.
+     */
+    RegionList.prototype.setup = function () {
+      // Format the regions.
+      if ('regions' in this) {
+        this.processList(this.regions);
+        delete this.regions;
+      }
+      else {
+        this.log('[RLD | RegionList] The RegionList instance has no Regions at setup.');
+      }
+    };
+    /**
+     *
+     */
+    RegionList.prototype.processList = function (items, location) {
+      var newSet = [];
+      var i, item, region;
+      for (i = 0; i < items.length; i++) {
+        item = items[i];
+        // Check if this item is already an item.
+        if ('init' in item && typeof item['init'] === 'function') {
+          region = item;
+        }
+        else {
+          region = new RLD.Region({
+            'label': ('label' in item) ? item['label'] : 'No label',
+            'machine_name': ('machine_name' in item) ? item['machine_name'] : 'no_machine_name',
+            'classes': ('classes' in item) ? item['classes'] : [],
+            'columns': ('columns' in item) ? item['columns'] : null
+          });
+        };
+        // Add the new region to the list.
+        this.items[(location !== undefined && location === 'top') ? 'unshift' : 'push'](region);
+        newSet.push(region);
+      }
+      // Transfer pass-through subscriptions.
+      this.transferSubscriptions(this.items);
+      // Return the items that were added.
+      return newSet;
+    };
+    /**
+     * @todo, this method needs better argument type handling. It could
+     * be either an array or an object.
+     *
+     * @todo this should be a private method.
+     */
+    RegionList.prototype.addItem = function (items, location) {
+      if (typeof items === 'object' && !('length' in items)) {
+        var items = [items];
+      }
+      return this.processList(items, location)
+    };
+    /**
+     * This is public method, an interface for this.addItem().
+     *
+     * @todo, this method needs better argument type handling. It could
+     * be either an array or an object.
+     */
+    RegionList.prototype.insertItem = function (item, location) {
+      var newItems = this.addItem(item, location);
+      this.topic('regionAdded').publish(this.items, newItems, location);
+    };
+    /**
+     *
+     */
+    RegionList.prototype.removeItem = function (region) {
+      var items = this.items;
+      var i;
+      for (i = 0; i < items.length; i++) {
+        if (items[i].machine_name === region.machine_name) {
+          this.items.splice(i, 1);
+        }
+      }
+      this.topic('regionRemoved').publish(region);
+    };
+    /**
+     *
+     */
+    RegionList.prototype.update = function (type, list) {
+      this.items = type;
+    };
+    /**
+     *
+     */
+    RegionList.prototype.guaranteeMachineName = function (name) {
+      var regions = this.items;
+      var i;
+      for (i = 0; i < regions.length; i++) {
+        if (regions[i].machine_name === name) {
+          return false;
+        }
+      }
+      return true;
+    };
+
+    return RegionList;
+    
+  }());
+}(ResponsiveLayoutDesigner, jQuery));
diff --git a/core/modules/rlayout/designer/app/libs/Step/Step.js b/core/modules/rlayout/designer/app/libs/Step/Step.js
new file mode 100644
index 0000000..d6688bd
--- /dev/null
+++ b/core/modules/rlayout/designer/app/libs/Step/Step.js
@@ -0,0 +1,54 @@
+(function (RLD, $) {
+  // Temp location.
+  RLD['Step'] = (function () {
+
+    var plugin = 'Step';
+    
+    function Step() {
+      this.options = {
+        'breakpoint': '0'
+      };
+      // Initialize the object.
+      this.init.apply(this, arguments);
+    }
+    /**
+     * Extend the InitClass Object.
+     */
+    Step.prototype = new RLD.InitClass();
+    /**
+     *
+     */
+    Step.prototype.setup = function () {
+      this.topic('stepRegionOverridden');
+    }
+    /**
+     *
+     */
+    Step.prototype.supplantRegion = function (region) {
+      var items = this.regionList.info('items');
+      var i, index;
+      for (i = 0; i < items.length; i++) {
+        if (items[i].machine_name === region.machine_name) {
+          index = i;
+          break;
+        }
+      }
+      if (index !== undefined) {
+        this.regionList.info('items').splice(index, 1, region);
+      }
+      else {
+        this.regionList.addItem(region);
+      }
+      this.topic('stepRegionOverridden').publish(region); 
+    };
+    /**
+     *
+     */
+    Step.prototype.removeRegion = function (region) {
+      
+    };
+
+    return Step;
+    
+  }());
+}(ResponsiveLayoutDesigner, jQuery));
\ No newline at end of file
diff --git a/core/modules/rlayout/designer/app/libs/StepList/StepList.js b/core/modules/rlayout/designer/app/libs/StepList/StepList.js
new file mode 100644
index 0000000..2fb9449
--- /dev/null
+++ b/core/modules/rlayout/designer/app/libs/StepList/StepList.js
@@ -0,0 +1,90 @@
+(function (RLD, $) {
+  // Temp location.
+  RLD['StepList'] = (function () {
+
+    var plugin = 'StepList';
+
+    function StepList() {
+      this.items = [];
+      // Initialize the object.
+      this.init.apply(this, arguments);
+    }
+    /**
+     * Extend the InitClass Object.
+     */
+    StepList.prototype = new RLD.InitClass();
+    /**
+     *
+     */
+    StepList.prototype.setup = function () {
+      // Process list items.
+      if ('steps' in this) {
+        this.processList(this.steps);
+        delete this.steps;
+      }
+      else {
+        this.log('[RLD | ' + plugin + '] The list has no items at setup.');
+      }
+      // Calculate the step sizes.
+      this.processStepSizes();
+      
+    };
+    /**
+     *
+     */
+     StepList.prototype.processList = function (items) {
+      var i;
+      for (i = 0; i < items.length; i++) {
+        this.items.push(new RLD.Step({
+          'label': items[i].label,
+          'machine_name': items[i].machine_name,
+          'breakpoint': items[i].breakpoint,
+          'regionList': new RLD.RegionList({
+            'regions': items[i].regions
+          }),
+          'grid': new RLD.Grid({
+            'machine_name': items[i].grid
+          })
+        }));
+      }
+    };
+    /**
+     *
+     */
+    StepList.prototype.update = function (type, list) {
+      this.stepItems = type;
+      this.topic('stepOrderUpdated').publish(this);
+    };
+    /**
+     * @Todo, the steps will need to be sorted by breakpoint
+     * before the sizes can be calculated.
+     */
+    StepList.prototype.processStepSizes = function () {
+      var i;
+      if ('items' in this) {
+        var i, k, step, breakMin, breakMax, size;
+        for (i = 0; i < this.items.length; i++) {
+          step = this.items[i];
+          breakMin = Number(step.info('breakpoint')) || 0;
+          if (this.items[i + 1] !== undefined) {
+            breakMax = Number(this.items[i + 1].info('breakpoint'));
+            size = breakMax - breakMin;
+            // Add all of the previous breakpoint sizes to this step size.
+            if (i > 0) {
+              size += this.items[i - 1].info('size');
+            }
+          }
+          else {
+            // The largest step should be at least 600. If it exceeds 600, it needs
+            // an uppder bound, so we add 100 to its breakpoint size.
+            size = (breakMin < 600) ? 600 : breakMin + 250;
+          }
+          this.items[i].info('size', size);
+        }
+      }
+    };
+
+    return StepList;
+    
+  }());
+}(ResponsiveLayoutDesigner, jQuery));
diff --git a/core/modules/rlayout/designer/app/libs/StepManager/StepManager.js b/core/modules/rlayout/designer/app/libs/StepManager/StepManager.js
new file mode 100644
index 0000000..16ec5af
--- /dev/null
+++ b/core/modules/rlayout/designer/app/libs/StepManager/StepManager.js
@@ -0,0 +1,88 @@
+(function (RLD, $) {
+
+  RLD['StepManager'] = (function () {
+
+    var plugin = 'StepManager';
+
+    function StepManager() {
+      this.steps = [];
+      this.activeStep;
+      // Initialize the object.
+      this.init.apply(this, arguments);
+    }
+    /**
+     * Extend the InitClass Object.
+     */
+    StepManager.prototype = new RLD.InitClass();
+    /**
+     *
+     */
+    StepManager.prototype.setup = function (options) {
+      // UI objects.
+      this.$stepContainer = $('<div>', {});
+      this.activeStep = this.activeStep || this.steps[0];
+    };
+    /**
+     *
+     */
+    StepManager.prototype.build = function ($stepContainer) {
+      this.$editor = $('<div>', {});
+      var handler, i, step, breakpoint, size, label, id;
+      this.$stepContainer = ($stepContainer.length > 0) ? $stepContainer : this.$stepContainer;
+      // Clear the UI.
+      this.$stepContainer.children().remove();
+      // Build the list of steps.
+      for (i = 0; i < this.steps.length; i++) {
+        step = this.steps[i];
+        breakpoint = step.info('breakpoint');
+        size = step.info('size');
+        label = step.info('label');
+        id = 'breakpoint-' + breakpoint;
+        this.$stepContainer
+        .append(
+          $('<li>', {
+            'class': 'rld-tab'
+          })
+          .append(
+            $('<a>', {
+              'class': 'rld-link',
+              'href': '#' + id,
+              'text': size + 'px'
+            })
+            .data('RLD/Step', step)
+          )
+        );
+      }
+      // Attach behaviors.
+      this.$stepContainer.delegate('a', 'click.RLD.StepManager', {'manager': this}, this.activateStep);
+      // Attach the steps and layouts to the $editor and return it.
+      return this.$editor
+      .append(this.$stepContainer);
+    };
+    /**
+     *
+     */
+    StepManager.prototype.addItem = function (step) {
+      this.steps.push(step);
+    };
+    /**
+     *
+     */
+    StepManager.prototype.activateStep = function (event) {
+      event.preventDefault();
+      var $stepLink = $(this);
+      var manager = event.data.manager;
+      var step = $stepLink.data('RLD/Step');
+      if (step === undefined) {
+        step = manager.steps[0];
+      }
+      manager.activeStep = step;
+      manager.info('$editor').find('a').removeClass('rld-active');
+      $stepLink.addClass('rld-active');
+      manager.topic('stepActivated').publish(event, step);
+    };
+    
+    return StepManager;
+    
+  }());
+}(ResponsiveLayoutDesigner, jQuery));
\ No newline at end of file
diff --git a/core/modules/rlayout/designer/app/libs/Utils/Utils.js b/core/modules/rlayout/designer/app/libs/Utils/Utils.js
new file mode 100644
index 0000000..5dde78b
--- /dev/null
+++ b/core/modules/rlayout/designer/app/libs/Utils/Utils.js
@@ -0,0 +1,84 @@
+(function (RLD, $) {
+
+  function mapKeyToChar(isShifted, keyCode) {
+    if (keyCode === 27
+      || keyCode === 8
+      || keyCode === 9
+      || keyCode === 20
+      || keyCode === 16
+      || keyCode === 17
+      || keyCode === 91
+      || keyCode === 13
+      || keyCode === 92
+      || keyCode === 18) {
+      return false;
+    }
+    if (typeof isShifted != "boolean" || typeof keyCode != "number") {
+      return false;
+    }
+    var charMap = [];
+    charMap[192] = "~";
+    charMap[49] = "!";
+    charMap[50] = "@";
+    charMap[51] = "#";
+    charMap[52] = "$";
+    charMap[53] = "%";
+    charMap[54] = "^";
+    charMap[55] = "&";
+    charMap[56] = "*";
+    charMap[57] = "(";
+    charMap[48] = ")";
+    charMap[109] = "_";
+    charMap[107] = "+";
+    charMap[219] = "{";
+    charMap[221] = "}";
+    charMap[220] = "|";
+    charMap[59] = ":";
+    charMap[222] = "\"";
+    charMap[188] = "<";
+    charMap[190] = ">";
+    charMap[191] = "?";
+    charMap[32] = " ";
+    var character = "";
+    if (isShifted) {
+      if (keyCode >= 65 && keyCode <= 90) {
+        character = String.fromCharCode(keyCode);
+      }
+      else {
+        character = charMap[keyCode];
+      }
+    }
+    else {
+      if (keyCode >= 65 && keyCode <= 90) {
+        character = String.fromCharCode(keyCode).toLowerCase();
+      }
+      else {
+        character = String.fromCharCode(keyCode);
+      }
+    }
+    return character;
+  }
+
+  RLD['Utils'] = {};
+  /**
+   * Keymanager
+   */
+  RLD['Utils'].keyManager = function (event) {
+    var pattern = event.data.pattern;
+    var callback = event.data.callback;
+      // Get the key.
+    var key = mapKeyToChar(event.shiftKey, event.keyCode);
+    if (key && typeof pattern === 'object' && 'exec' in pattern && typeof callback === 'function') {
+      // Invoke callback if the key is allowed or the delete key is pressed.
+      if (pattern.exec(key) || $.inArray(key, [8]) > -1) {
+        event.key = key;
+        callback.apply(this, arguments);
+      }
+      else {
+        console.log(event.keyCode);
+        // The key(s) are illegal, do nothing.
+        event.preventDefault();
+      } 
+    }
+  };
+}(ResponsiveLayoutDesigner, jQuery));
\ No newline at end of file
diff --git a/core/modules/rlayout/designer/app/main.js b/core/modules/rlayout/designer/app/main.js
new file mode 100644
index 0000000..ed88af4
--- /dev/null
+++ b/core/modules/rlayout/designer/app/main.js
@@ -0,0 +1,314 @@
+(function (window, $) {
+  var RLD = (function(){
+    /**
+     * Extend jQuery to smooth out version differences.
+     */
+    $.Event.prototype.getDelegator = function () {
+      if ('delegateTarget' in this) {
+        return this.delegateTarget;
+      }
+      if ('liveFired' in this) {
+        return this.liveFired;
+      }
+      return null;
+    };
+    // Identify jQuery events from other objects.
+    $.Event.prototype.__marker = 'jQueryEvent';
+    /**
+     * Create the InitClass object that all other objects will extend.
+     */
+    var InitClass = (function () {
+
+      var plugin = 'InitClass';
+
+      function InitClass() {
+        // Don't set anything in here, or all objects will inherit these values.
+      }
+      /**
+       * Safe logging function.
+       */
+      InitClass.prototype.log = function (message, type) {
+        if ('console' in window) {
+          var type = type || 'log';
+          if (type in console) {
+            console[type](message);
+          }
+        }
+      };
+      /**
+       *
+       */
+      InitClass.prototype.init = function (opts) {
+        // Create a topics property for pub/sub event handling.
+        this.topics = {};
+        // Process the options for this instance.
+        var prop;
+        var options = ('options' in this) ? this.options : {};
+        options = $.extend({}, options, opts);
+        for (prop in options) {
+          if (options.hasOwnProperty(prop)) {
+            this[prop] = options[prop];
+          }
+        }
+        // Delete the options.
+        if ('options' in this) {
+          delete this.options;
+        }
+        // Call the object's setup method.
+        this.setup.apply(this);
+      };
+      /**
+       *
+       */
+      InitClass.prototype.setup = function () {};
+      /**
+       *
+       */
+      InitClass.prototype.info = function (property, value) {              
+        if (value !== undefined) {
+          this[property] = value;
+          return;
+        }
+        if (property in this) {
+          return this[property];
+        }
+        return;
+      };
+      /**
+       *
+       */
+      InitClass.prototype.build = function (options) {
+        return this.$editor;
+      };
+      /**
+       *
+       */
+      InitClass.prototype.addItem = function (item) {
+        this.items.push(item);
+      };
+      /**
+       *
+       */
+      InitClass.prototype.getItem = function (index) {
+        var i;
+        for (i = 0; i < this.items.length; i++) {
+          for (property in this.items[i]) {
+            if ('machine_name' in this.items[i] && this.items[i]['machine_name'] === index) {
+                return this.items[i];
+            }
+          }
+        }
+        this.log('[RLD | ' + plugin + '] Item not found in this set.', 'info');
+        return null;
+      };
+      /**
+       *
+       */
+      InitClass.prototype.snapshot = function (index) {
+        var snapshot = {};
+        var prop;
+        for (prop in this) {
+          if (this.hasOwnProperty(prop)) {
+            snapshot[prop] = this[prop];
+          }
+        }
+        return snapshot;
+      };
+      /**
+       *
+       */
+      InitClass.prototype.topic = function(id) {
+        var callbacks;
+        var topic = id && this.topics[id];
+        if (!topic) {
+          callbacks = jQuery.Callbacks('unique');
+          topic = {
+            publish: function () {
+              // Create a jQuery Event for consistency and shift it into the arguments.
+              if (!(arguments.length > 0 && typeof arguments[0] === 'object' && '__marker' in arguments[0] && arguments[0].__marker === 'jQueryEvent')) {
+                var e = $.Event(id);
+                // Unshift in the original target for reference if this event bubbles.
+                e.type = id;
+                Array.prototype.unshift.call(arguments, e); 
+              }
+              callbacks.fireWith(this, arguments);
+            },
+            subscribe: callbacks.add,
+            unsubscribe: callbacks.remove
+          };
+          if (id) {
+            this.topics[id] = topic;
+          }
+        }
+        return topic;
+      };
+      /**
+       *
+       */
+      InitClass.prototype.transferSubscriptions = function (subscribers) {
+        var subs = subscribers;
+        var topics = this.topics;
+        var i, k, top, id, sub;
+        if (!('length' in subscribers && subscribers.length > 0)) {
+          subs = [subscribers];
+        }
+        for (i = 0; i < subs.length; i++) {
+          sub = subs[i];
+          if ('topic' in sub) {
+            for (top in topics) {
+              if (topics.hasOwnProperty(top)) {
+                sub.topic(top).subscribe(this.topic(top).publish); 
+              }
+            }
+          }
+        }
+      };
+      
+      return InitClass;
+    }());
+
+    /**
+     * The ResponsiveLayoutDesigner is a facade for a set of sub-systems that manage
+     * the configuration of a responsive layout through a browser.
+     */
+    function ResponsiveLayoutDesigner() {
+      var options = {};
+      var plugin = 'ResponsiveLayoutDesigner';
+      this.steps = {};
+      this.regions = {};
+      this.grids = {};
+      // Initialize the object.
+      this.init.apply(this, arguments);
+    }
+    /**
+     * Extend the RLD with the InitClass.
+     */
+    ResponsiveLayoutDesigner.prototype = new InitClass();
+    /**
+     * Provide the InitClass for all other Classes to extend.
+     */
+    ResponsiveLayoutDesigner.InitClass = InitClass;
+    /**
+     * Implement the init() interface.
+     */
+    ResponsiveLayoutDesigner.prototype.setup = function () {
+      // Merge in user options.
+      var regionList, availableRegionList, stepList, gridList;
+      // Create the application root node.
+      this.$editor = $('<div>', {
+        'class': 'rld-application'
+      });
+      // Instansiate the LayoutManager.
+      // this.regions is a simple object. The RegionList provides methods to
+      // manipulate this simple set.
+      regionList = new RLD.RegionList();
+      availableRegionList = new RLD.RegionList();
+      if ('regions' in this) {
+        if ('active' in this.regions) {
+          regionList.addItem(this.regions.active);
+        }
+        if ('available' in this.regions) {
+          availableRegionList.addItem(this.regions.available);
+        }
+        delete this.regions;
+      }
+      else {
+        this.log('[RLD | ' + plugin + '] No regions provided.');
+      }
+      if ('steps' in this) {
+        stepList = new RLD.StepList({
+          'steps': this.steps
+        });
+        delete this.steps;
+      }
+      else {
+        this.log('[RLD | ' + plugin + '] No steps provided.');
+      }
+      if ('grids' in this) {
+        gridList = new RLD.GridList({
+          'grids': this.grids
+        });
+        delete this.grids;
+      }
+      else {
+        this.log('[RLD | ' + plugin + '] No grids provided.');
+      }
+      // Create a layout manager.
+      this.layoutManager = new RLD.LayoutManager({
+        'stepList': stepList,
+        'regionList': regionList,
+        'availableRegionList': availableRegionList,
+        'gridList': gridList
+      });
+      // Create a layoutPreviewer.
+      this.layoutPreviewer = new RLD.LayoutPreviewer({
+        'stepList': stepList,
+        'gridList': gridList
+      });
+      // Define topics that will pass-through.
+      this.topic('stepActivated');
+      this.transferSubscriptions(this.layoutPreviewer);
+      this.topic('regionOrderUpdated');
+      this.topic('layoutSaved');
+      this.topic('regionAdded');
+      this.topic('regionRemoved');
+      this.topic('regionResized');
+      this.topic('regionResizing');
+      this.topic('regionResizeStarted');
+      // Transfer pass-through subscriptions.
+      this.transferSubscriptions(this.layoutManager);
+    };
+    /**
+     * Generate a view of the class instance.
+     *
+     * Returns a DOM fragment.
+     */
+    ResponsiveLayoutDesigner.prototype.build = function () {
+      // Build the layoutManager and attach it to the $editor.
+      this.layoutManager.build().appendTo(this.$editor);
+      // Activate the first step.
+      var firstStep = this.layoutManager.stepList.info('items')[0];
+      var simpleClick = $.Event('click');
+      simpleClick.data = {'manager': this.layoutManager.stepManager};
+      this.layoutManager.stepManager.activateStep.call(this.layoutManager.stepManager.info('$editor').find('a:first').get(0), simpleClick);
+      return this.$editor;
+    };
+
+    ResponsiveLayoutDesigner.prototype.snapshot = function () {
+      return this.layoutManager;
+    };
+
+    return ResponsiveLayoutDesigner;
+    
+  }());
+  
+  // Expose ResponsiveLayoutDesigner to the global object
+  return (window.ResponsiveLayoutDesigner = RLD);
+}(window, jQuery));
+/**
+ * supplantClass() jQuery plugin
+ *
+ * Adds the replacement class string to each element.
+ *
+ * If a class or classes contain the needle, they are removed from the element.
+ */
+(function ($) {
+	// Add the plugin as a property of the jQuery fn object.
+	$.fn['supplantClass'] = function (needle, replacement) {
+	  return this.each(function (index, element) {
+      var $this = $(this);
+      var cl = [];
+      // Get an array of classes the excludes any that contain the needle.
+      var classes = ($this.attr('class') || '').split(' ');
+      for (var i = 0; i < classes.length; i++) {
+        if (classes[i].indexOf(needle) === -1) {
+          cl.push(classes[i]);
+        }
+      }
+      // Push the replacement in all cases.
+      $.merge(cl, replacement.split(' '));
+      // Create a string and assign it to the object.
+      $this.removeAttr('class').addClass(cl.join(' '));
+    });
+	};
+}(jQuery));
diff --git a/core/modules/rlayout/designer/assets/css/application.css b/core/modules/rlayout/designer/assets/css/application.css
new file mode 100644
index 0000000..d821310
--- /dev/null
+++ b/core/modules/rlayout/designer/assets/css/application.css
@@ -0,0 +1,311 @@
+/* @group This styling needs to be removed eventually. It's presentation and it doesn't belong here. */
+.rld-steps a {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+/* @end */
+.clearfix::after {
+  clear: both;
+  content: ' ';
+  display: block;
+  height: 0;
+  visibility: hidden;
+  width: 100%;
+}
+.rld-screen {
+  margin: 0 auto;
+  max-width: 1024px;
+  text-align: center;
+}
+.rld-iframe {
+  margin: 0 auto;
+}
+
+/* @group Layout */
+
+/* @group StepManager */
+.rld-layout-manager,
+.rld-layout-previewer {
+  text-align: center;
+}
+.rld-layout-manager .rld-stepmanager,
+.rld-layout-previewer .rld-stepmanager {
+  margin: 0 auto;
+}
+.rld-steps {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.rld-steps .rld-tab {
+  display: inline-block;
+  margin-left: 1em;
+  margin-right: 1em;
+  position: relative;
+  vertical-align: middle;
+}
+.rld-steps .rld-tab::before,
+.rld-steps .rld-tab::after {
+  background-attachment: scroll;
+  background-color: transparent;
+  background-repeat: no-repeat;
+  content: ' ';
+  display: block;
+  position: absolute;
+}
+.rld-steps .rld-tab::before {
+  background-color: #7d7d7d;
+  height: 1px;
+  left: -22px;
+  top: 1.2em;
+  width: 20px;
+}
+.rld-steps .rld-tab:first-child::before {  
+  background-color: transparent;
+  background-image: url("../images/small-screen.png");
+  background-position: left center;
+  height: 22px;
+  left: -28px;
+  top: 6px;
+  width: 25px;
+}
+.rld-steps .rld-tab:last-child::after {
+  background-image: url("../images/large-screen.png");
+  background-position: right center;
+  height: 22px;
+  right: -39px;
+  top: 6px;
+  width: 35px;
+}
+.rld-steps .rld-tab .rld-link {
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+  display: inline-block;
+  line-height: 1.8em;
+  padding: 5px;
+}
+.rld-layout-previewer .rld-tab .rld-link {
+  color: #ccc;
+}
+.rld-layout-manager .rld-tab .rld-link {
+  color: #484848;
+}
+.rld-link.rld-active::after {
+  border-style: solid;
+  border-width: 6px 4px;
+  bottom: 2px;
+  content: ' ';
+  display: block;
+  height: 0px;
+  left: 40%;
+  position: absolute;
+  width: 0px;
+}
+.rld-layout-previewer .rld-link.rld-active::after {
+  border-color: transparent transparent #ccc transparent;
+}
+.rld-layout-manager .rld-link.rld-active::after {
+  border-color: transparent transparent #484848 transparent;
+}
+.rld-layouts {
+  margin-top: 0.5em;
+  padding: 1em;
+}
+
+/* @end */
+
+/* @end */
+
+/* @group Region and row styles */
+
+.rld-layouts {
+  position: relative;
+}
+.rld-layout {
+  position: relative;
+}
+.rld-row {
+  -webkit-user-select: none;
+  cursor: move;
+}
+.rld-placeholder,
+.rld-region {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  float: left;
+  margin-bottom: 15px;
+  position: relative;
+}
+.rld-region {
+  width: 100%; /* splitter def: 960px */
+}
+.rld-region > .rld-inner {
+  background-color: #555;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+  color: white;
+  height: 4em;
+  margin: 0 2px;
+  padding: 0 1em;
+}
+.rld-placeholder {
+  background-color: white;
+  background-color: rgba(255,255,255,0.6667);
+  color: #ccc;
+  height: 4em;
+  outline: 1px dashed #31cbff;
+  outline-offset: -5px;
+  overflow: hidden;
+  width: 0;
+}
+.rld-region .rld-region-close {
+  position: absolute;
+  right: 14px;
+  top: 7px;
+  background-color: #cdcdcd;
+  border-radius: 10px;
+  color: #484848;
+  padding: 4px;
+  cursor: default;
+  font-size: 0.8em;
+  line-height: 0.8em;
+  text-decoration: none;
+}
+.rld-col.rld-region {
+  padding: 0;
+}
+.rld-grid-underlay {
+  bottom: 24px;
+  height: auto;
+  margin: 0.25em 0;
+  min-height: 20px;
+  position: absolute;
+  top: 24px;
+  width: 100%;
+}
+.rld-grid-underlay + * {
+  margin-top: 24px;
+}
+.rld-grid-col {
+  background-color: #E0E3E8;
+  border-color: white;
+  border-style: solid;
+  border-width: 0 2px;
+  height: 100%;
+  min-height: 1em;
+  outline: 1px solid #B8B8B8;
+  outline-offset: -3px;
+}
+.rld-layoutstep-controls {
+  margin-bottom: 5px;
+}
+.rld-splitter {
+  background-attachment: scroll;
+  background-image: url('../images/grippie.png');
+  background-position: center center;
+  background-repeat: no-repeat;
+  bottom: 0;
+	cursor: e-resize;	/* in case col-resize isn't supported */
+	cursor: col-resize;
+	height: 100%;
+  position: absolute;
+  top: 0;
+  width: 12px;
+  z-index: 1;
+}
+.rld-splitter:hover {
+  background-color: rgba(0, 0, 0, 0.3333);
+}
+.rld-splitter-left {
+  background-position: left center;
+  left: 3px;
+  -moz-border-radius: 5px 0 0 5px;
+  -webkit-border-radius: 5px 0 0 5px;
+  border-radius: 5px 0 0 5px;
+}
+.rld-splitter-right {
+  background-position: right center;
+  right: 3px;
+  -moz-border-radius: 0 5px 5px 0;
+  -webkit-border-radius: 0 5px 5px 0;
+  border-radius: 0 5px 5px 0;
+}
+.rld-splitter-active {
+  background: url('../images/grippie-active.png') 0 -3px;
+}
+
+/* @end */
+
+/* @grid */
+
+/* @group Sortable */
+
+.ui-sortable .ui-state-highlight {
+  height: 50px;
+  padding: 10px;
+  margin: 1em 0;
+}
+.ui-sortable .region .drag-icon {
+  font-size: 2em;
+  margin-right: 1em;
+}
+.ui-sortable .region .remove-icon {
+  position: absolute;
+  right: 5px;
+  top: 20px;
+  background-color: #cdcdcd;
+  border-radius: 10px;
+  color: #484848;
+  padding: 4px;
+  cursor: default;
+}
+
+/* @end */
+
+/* @end */
+
+/* @group Previewer */
+
+.rld-previewer {
+  border: 1px solid #484848;
+  position: absolute;
+  top: 100px;
+}
+@media (max-width:600px) {
+  .rld-layout-previewer {
+    display: none;    
+  }
+}
+.rld-modal-screen {
+  background-color: white;
+  bottom: 0;
+  height: 100%;
+  opacity: 0.9;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.rld-modal-close {
+  position: absolute;
+  margin-top: 5px;
+  right: 10px;
+}
+.rld-modal-close a {
+  background-color: #59a;
+  border: 1px solid #3F3F3F;
+  border-radius: 7px;
+  box-sizing: border-box;
+  color: white;
+  display: inline-block;
+  letter-spacing: 1.5pt;
+  padding: 0.08333em 0.3333em;
+}
+.rld-modal-close a:hover {
+  background-color: #666666;
+  color: white;
+  text-decoration: none;
+}
+
+/* @end */
\ No newline at end of file
diff --git a/core/modules/rlayout/designer/assets/css/grid.css b/core/modules/rlayout/designer/assets/css/grid.css
new file mode 100644
index 0000000..18c93b2
--- /dev/null
+++ b/core/modules/rlayout/designer/assets/css/grid.css
@@ -0,0 +1,117 @@
+/* Generic column setup */
+.rld-col {
+  -webkit-box-sizing:border-box;
+  -moz-box-sizing:border-box;
+  box-sizing:border-box;
+  float:left;
+}
+
+
+
+/* 1. 3 Column Grid 0px - 349px 
+----------------------------------------------------------------------------- */
+
+.rld-container-3 .rld-span_1 {
+  width:33.3333333333%;
+}
+.rld-container-3 .rld-span_2 {
+  width:66.6666666667%;
+}
+.rld-container-3 .rld-span_3 {
+  width:100%;
+}
+
+/* 2. 6 Column Grid 350px - 759px 
+----------------------------------------------------------------------------- */
+
+.rld-container-6 .rld-span_1 {
+  width:16.6666666667%;
+}
+.rld-container-6 .rld-span_2 {
+  width:33.3333333333%;
+}
+.rld-container-6 .rld-span_3 {
+  width:50%;
+}
+.rld-container-6 .rld-span_4 {
+  width:66.6666666667%;
+}
+.rld-container-6 .rld-span_5 {
+  width:83.3333333333%;
+}
+.rld-container-6 .rld-span_6 {
+  width:100%;
+}
+
+/* 3. 10 Column Grid 760px - 959px 
+----------------------------------------------------------------------------- */
+.rld-container-10 .rld-span_1 {
+  width:10%;
+}
+.rld-container-10 .rld-span_2 {
+  width:20%;
+}
+.rld-container-10 .rld-span_3 {
+  width:30%;
+}
+.rld-container-10 .rld-span_4 {
+  width:40%;
+}
+.rld-container-10 .rld-span_5 {
+  width:50%;
+}
+.rld-container-10 .rld-span_6 {
+  width:60%;
+}
+.rld-container-10 .rld-span_7 {
+  width:70%;
+}
+.rld-container-10 .rld-span_8 {
+  width:80%;
+}
+.rld-container-10 .rld-span_9 {
+  width:90%;
+}
+.rld-container-10 .rld-span_10 {
+  width:100%;
+}
+
+/* 4. 12 Column Grid 960px - Infinity 
+----------------------------------------------------------------------------- */
+
+.rld-container-12 .rld-span_1 {
+  width:8.3333333333%;
+}
+.rld-container-12 .rld-span_2 {
+  width:16.6666666667%;
+}
+.rld-container-12 .rld-span_3 {
+  width:25%;
+}
+.rld-container-12 .rld-span_4 {
+  width:33.3333333333%;
+}
+.rld-container-12 .rld-span_5 {
+  width:41.6666666667%;
+}
+.rld-container-12 .rld-span_6 {
+  width:50%;
+}
+.rld-container-12 .rld-span_7 {
+  width:58.3333333333%;
+}
+.rld-container-12 .rld-span_8 {
+  width:66.6666666667%;
+}
+.rld-container-12 .rld-span_9 {
+  width:75%;
+}
+.rld-container-12 .rld-span_10 {
+  width:83.3333333333%;
+}
+.rld-container-12 .rld-span_11 {
+  width:91.6666666667%;
+}
+.rld-container-12 .rld-span_12 {
+  width:100%;
+}
\ No newline at end of file
diff --git a/core/modules/rlayout/designer/assets/images/grippie-active.png b/core/modules/rlayout/designer/assets/images/grippie-active.png
new file mode 100644
index 0000000..5f5e75d
--- /dev/null
+++ b/core/modules/rlayout/designer/assets/images/grippie-active.png
@@ -0,0 +1,14 @@
+PNG
+
+   IHDR      =   eF%   	pHYs    ~  
+OiCCPPhotoshop ICC profile  xڝSgTS=BKKoR RB&*!	J!QEEȠQ,
+!{kּ>H3Q5B.@
+$p d!s# ~<<+" x M0B\t8K @zB @F&S  `cb P- `' { [!  eD h; VE X0 fK9 - 0IWfH    0Q) { `##x  FW<+*  x<$9E[-qWW.(I+6aa@.y24  x6_-"bbϫp@  t~,/;m%h^uf@ Wp~<<EJB[aW}g_Wl~<$2]GLϒ	bG"IbX*QqD2"B)%d,>5 j>{-]cK'Xt  o(hw?G% fIq  ^D$.Tʳ?  D*A,`6B$BB
+dr`)B(Ͱ*`/@4Qhp.U=pa(	Aa!ڈbX#!H$ ɈQ"K5H1RT UH=r9\F; 2G1Q=C7Fdt1r=6Ыhڏ>C03l0.B8,	c˱"VcϱwE	6wB aAHXLXNH $4	7	Q'"K&b21XH,#/{C7$C2'ITFnR#,4H#dk9, +ȅ3![
+b@qS(RjJ4e2AURݨT5ZBRQ4u9̓IKhhitݕNWGwǈg(gwLӋT071oUX**|
+J&*/TުUUT^S}FU3S	ԖUPSSg;goT?~YYLOCQ_ cx,!ku5&|v*=9C3J3WRf?qtN	(~))4L1e\kXHQG6EYAJ'\'GgSSݧ
+M=:.kDwn^Loy}/TmGX$<5qo</QC]@Caaᄑ<FFi\$mmƣ&&!&KMMRM);L;L֙͢5=12כ߷`ZxZ,eIZYnZ9YXUZ]F%ֻNNgðɶۮm}agbgŮ}}=Z~sr:V:ޚΜ?}/gX3)iSGggs󈋉K.>.ȽJtq]zۯ6iܟ4)Y3sCQ?0k߬~OCOg#/c/Wװwa>>r><72Y_7ȷOo_C#dz %gA[z|!?:eAAA!h쐭!ΑiP~aa~'W?pX15wCsDDDޛg1O9-J5*>.j<74?.fYXXIlK9.*6nl{/]py.,:@LN8A*%w%
+yg"/6шC\*NH*Mz쑼5y$3,幄'LLݛ:v m2=:1qB!Mggfvˬen/kY-
+BTZ(*geWf͉9+̳ې7ᒶKW-X潬j9<qy
++V<*mOW~&zMk^ʂkU
+}]OX/Yߵa>(xoʿܔĹdff-[nڴVE/(ۻC<e;?TTTT6ݵan{4[>ɾUUMfeI?m]Nmq#׹=TR+Gw-6U#pDy	:v{vg/jBFS[b[O>zG4<YyJTiӓgό}~.`ۢ{cjotE;;\tWW:_mt<Oǻ\kz{f7y՞9=ݽzo~r'˻w'O_@AC݇?[jwGCˆ8>99?rCd&ˮ/~јѡ򗓿m|x31^VwwO| (hSЧc3-    cHRM  z%        u0  `  :  o_F   (IDATxb3 LX0    L>    IENDB`
\ No newline at end of file
diff --git a/core/modules/rlayout/designer/assets/images/grippie.png b/core/modules/rlayout/designer/assets/images/grippie.png
new file mode 100644
index 0000000..bf78930
--- /dev/null
+++ b/core/modules/rlayout/designer/assets/images/grippie.png
@@ -0,0 +1,14 @@
+PNG
+
+   IHDR      =   eF%   	pHYs    ~  
+OiCCPPhotoshop ICC profile  xڝSgTS=BKKoR RB&*!	J!QEEȠQ,
+!{kּ>H3Q5B.@
+$p d!s# ~<<+" x M0B\t8K @zB @F&S  `cb P- `' { [!  eD h; VE X0 fK9 - 0IWfH    0Q) { `##x  FW<+*  x<$9E[-qWW.(I+6aa@.y24  x6_-"bbϫp@  t~,/;m%h^uf@ Wp~<<EJB[aW}g_Wl~<$2]GLϒ	bG"IbX*QqD2"B)%d,>5 j>{-]cK'Xt  o(hw?G% fIq  ^D$.Tʳ?  D*A,`6B$BB
+dr`)B(Ͱ*`/@4Qhp.U=pa(	Aa!ڈbX#!H$ ɈQ"K5H1RT UH=r9\F; 2G1Q=C7Fdt1r=6Ыhڏ>C03l0.B8,	c˱"VcϱwE	6wB aAHXLXNH $4	7	Q'"K&b21XH,#/{C7$C2'ITFnR#,4H#dk9, +ȅ3![
+b@qS(RjJ4e2AURݨT5ZBRQ4u9̓IKhhitݕNWGwǈg(gwLӋT071oUX**|
+J&*/TުUUT^S}FU3S	ԖUPSSg;goT?~YYLOCQ_ cx,!ku5&|v*=9C3J3WRf?qtN	(~))4L1e\kXHQG6EYAJ'\'GgSSݧ
+M=:.kDwn^Loy}/TmGX$<5qo</QC]@Caaᄑ<FFi\$mmƣ&&!&KMMRM);L;L֙͢5=12כ߷`ZxZ,eIZYnZ9YXUZ]F%ֻNNgðɶۮm}agbgŮ}}=Z~sr:V:ޚΜ?}/gX3)iSGggs󈋉K.>.ȽJtq]zۯ6iܟ4)Y3sCQ?0k߬~OCOg#/c/Wװwa>>r><72Y_7ȷOo_C#dz %gA[z|!?:eAAA!h쐭!ΑiP~aa~'W?pX15wCsDDDޛg1O9-J5*>.j<74?.fYXXIlK9.*6nl{/]py.,:@LN8A*%w%
+yg"/6шC\*NH*Mz쑼5y$3,幄'LLݛ:v m2=:1qB!Mggfvˬen/kY-
+BTZ(*geWf͉9+̳ې7ᒶKW-X潬j9<qy
++V<*mOW~&zMk^ʂkU
+}]OX/Yߵa>(xoʿܔĹdff-[nڴVE/(ۻC<e;?TTTT6ݵan{4[>ɾUUMfeI?m]Nmq#׹=TR+Gw-6U#pDy	:v{vg/jBFS[b[O>zG4<YyJTiӓgό}~.`ۢ{cjotE;;\tWW:_mt<Oǻ\kz{f7y՞9=ݽzo~r'˻w'O_@AC݇?[jwGCˆ8>99?rCd&ˮ/~јѡ򗓿m|x31^VwwO| (hSЧc3-    cHRM  z%        u0  `  :  o_F   (IDATxbؽ{3 LX0    UKCZ|    IENDB`
\ No newline at end of file
diff --git a/core/modules/rlayout/designer/assets/images/large-screen.png b/core/modules/rlayout/designer/assets/images/large-screen.png
new file mode 100644
index 0000000..035312c
--- /dev/null
+++ b/core/modules/rlayout/designer/assets/images/large-screen.png
@@ -0,0 +1,5 @@
+PNG
+
+   IHDR         xw   sBIT|d   	pHYs    ~   tEXtCreation Time 8/18/12%A=   tEXtSoftware Adobe Fireworks CS6輲   IDAT8핱0E_d؀`2ݕ&P^dl 	L9`9Tu|DU+ e8=3`
+)EK0M#dE~%j#ϸNCCJYeSq ; ˀyvW
+xnTulAD!/DU3HYFME]NfWB]zy\K U.Mr    IENDB`
\ No newline at end of file
diff --git a/core/modules/rlayout/designer/assets/images/small-screen.png b/core/modules/rlayout/designer/assets/images/small-screen.png
new file mode 100644
index 0000000..d8888c0
--- /dev/null
+++ b/core/modules/rlayout/designer/assets/images/small-screen.png
@@ -0,0 +1,4 @@
+PNG
+
+   IHDR         V2/   sBIT|d   	pHYs    ~   tEXtCreation Time 8/18/12%A=   tEXtSoftware Adobe Fireworks CS6輲   IDAT8퓽0F=#$#lFHwmFH	la FyɒLg#a 7
+yt03$r"_a)^gX2%Cśw8K>$͎R2'~n@vRMeu    IENDB`
\ No newline at end of file
diff --git a/core/modules/rlayout/designer/assets/js/plugins/breakup/MIT-LICENSE.txt b/core/modules/rlayout/designer/assets/js/plugins/breakup/MIT-LICENSE.txt
new file mode 100644
index 0000000..a5ab045
--- /dev/null
+++ b/core/modules/rlayout/designer/assets/js/plugins/breakup/MIT-LICENSE.txt
@@ -0,0 +1,7 @@
+Copyright (c) 2012 Jesse Renee Beach
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
\ No newline at end of file
diff --git a/core/modules/rlayout/designer/assets/js/plugins/breakup/README.md b/core/modules/rlayout/designer/assets/js/plugins/breakup/README.md
new file mode 100644
index 0000000..8acf76b
--- /dev/null
+++ b/core/modules/rlayout/designer/assets/js/plugins/breakup/README.md
@@ -0,0 +1,54 @@
+BreakUp Plugin
+=======
+
+A jQuery plugin that fires custom events when configured breakpoints have been breached.
+
+
+Summary
+=======
+
+Register callbacks with custom breakpoint events to support responsive development in browser. This plugin makes it easier to trigger javascript responsive step behaviors without writing custom breakpoint checking code.
+
+
+API
+=======
+
+$.Breakup(breakpoints [, options,] selector [, arguments]) returns a BreakUp object.
+
+**breakpoints** is an object whose properties are breakpoint minimum values, and whose values are functions. These functions will be called when a breakpoint is crossed. The 'this' context of the callback will be the set of selected elements. The first argument of the callback will be the *breakChanged* event. Additional arguments passed to the BreakUp function (see below) will be provided to the callback function.
+
+```javascript
+{
+  'default': small,
+  '450': narrow,
+  '600': tablet,
+  '750': desktop,
+  '900': large
+}
+```
+
+**options** (optional) is an object with the following possible values
+
+<table>
+  <thead>
+    <tr>
+      <th>Property</th>
+      <th>Value</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>namespace</td>
+      <td>A string representing a namespace for the breakChanged event.</td>
+    </tr>
+  </tbody>
+</table>
+
+**selector** is either a jQuery object of elements, a string selector that can be passed to the jQuery function or the window or document objects. BreakUp will not work without elements to act on. 
+
+**arguments** is any number of argument of any type. They will all be passed to the breakpoint's callback function.
+
+Examples
+=======
+
+See http://jessebeach.github.com/breakup/ for a live example.
\ No newline at end of file
diff --git a/core/modules/rlayout/designer/assets/js/plugins/breakup/grunt.js b/core/modules/rlayout/designer/assets/js/plugins/breakup/grunt.js
new file mode 100644
index 0000000..4f4828b
--- /dev/null
+++ b/core/modules/rlayout/designer/assets/js/plugins/breakup/grunt.js
@@ -0,0 +1,10 @@
+module.exports = function(grunt) {
+  grunt.initConfig({
+    min: {
+      dist: {
+        src: ['jquery.breakup.js'],
+        dest: 'jquery.breakup.min.js'
+      }
+    }
+  });
+};
\ No newline at end of file
diff --git a/core/modules/rlayout/designer/assets/js/plugins/breakup/jquery.breakup.js b/core/modules/rlayout/designer/assets/js/plugins/breakup/jquery.breakup.js
new file mode 100644
index 0000000..018ae40
--- /dev/null
+++ b/core/modules/rlayout/designer/assets/js/plugins/breakup/jquery.breakup.js
@@ -0,0 +1,257 @@
+/*jslint bitwise: true, eqeqeq: true, immed: true, newcap: true, nomen: false,
+ onevar: false, plusplus: false, regexp: true, undef: true, white: false, indent: 2
+ browser: true */
+
+/*global window: true define: true jQuery: true */
+
+/**
+ * A jQuery plugin.
+ *
+ * Register arbitrary functions to be fired against jQuery objects when
+ * specified break points are entered.
+ *
+ * Author: Jesse Renee Beach
+ * Author URI: http://qemist.us
+ * Author Twitter: @jessebeach
+ * Author Github: https://github.com/jessebeach
+ *
+ */
+
+// The plugin factory function.
+(function ($) {
+  var pluginName = 'BreakUp';
+  var $ = jQuery;
+  // plugin defaults
+  var defaults = {
+    'breakpoints': {
+      '0': $.noop
+    },
+    'options': {
+      'namespace': pluginName
+    }
+  };
+  // Add the plugin as a property of the jQuery fn object.
+  $[pluginName] = (function () {
+    // Functions for manipulating the arguments variable.
+    var shift = Array.prototype.shift;
+    var unshift = Array.prototype.unshift;
+    var slice = Array.prototype.slice;
+    var splice = Array.prototype.splice;
+    /**
+     * Build a new BreakUp object.
+     */
+    function BreakUp() {
+      this.currentBreak = undefined;
+      this.breakPoints = {};
+      this.updated = false;
+      this.namespace = pluginName;
+      this.$elements = $();
+      // Initialize the plugin instance.
+      this.initialize.apply(this, arguments);
+    }
+     
+    BreakUp.prototype.initialize = function (breakpoints, options, selector) {
+      var bp, opts, fn;
+      // Determine if breakpoints were passed in. If not, return, there's nothing to do.
+      if (typeof breakpoints === 'string' || (typeof breakpoints === 'object' && 'jquery' in breakpoints)) {
+        this.log('[' + pluginName + '] No breakpoints were provided for BreakUp to act on.', 'info');
+        return;
+      }
+      // Merge user options with default options.
+      bp = $.extend({}, defaults.breakpoints, breakpoints);
+      // Strip the breakpoints from the arguments list.
+      shift.call(arguments);
+      // Unshift the merged breakpoints back into the arguments.
+      unshift.call(arguments, bp);
+      // Options is a jquery object or selector
+      if ((typeof options === 'object' && 'jquery' in options) || typeof options === 'string') {
+        // Slip an undefined into the arguments where the options should be.
+        splice.call(arguments, 1, 0, undefined);
+      }
+      // Process the options.
+      if (options) {
+        opts = $.extend({}, defaults.options, options);
+        this.namespace = opts.namespace;
+        // More options to come...
+      }
+      // A selector is necessary to create a context. It cannot be empty. First check
+      // for a string selector.
+      if (typeof selector === 'string' || selector === window || selector === document) {
+        this.$elements = $(selector);
+        // If the selector was provided as something other than a jQuery obejct,
+        // we need to replace the corresponding argument with the jQuery selector version.
+        splice.call(arguments, 2, 1, this.$elements);
+      }
+      // Then check for a jQuery object. 
+      else if (typeof selector === 'object' && 'jquery' in selector) {
+        this.$elements = selector;
+      }
+      // If the selector matched nothing, error out.
+      if (this.$elements.length === 0) {
+        this.log('[' + pluginName + '] Neither a jQuery object nor a valid selector were provided for BreakUp to act on.', 'info');
+        return;
+      }
+      // The arguments should only contain the breakpoints, the context elements,
+      // and additional arguments for the callbacks from this point on.
+      // The options are needed only for initialization, so we remove them.
+      splice.call(arguments, 1, 1);
+      this.registerBreakPoints.apply(this, arguments);
+      // Register a handler on the window resize and load events.
+      fn = this.buildProxy(this.breakCheck, this);
+      $(window).bind('resize' + '.' + this.namespace, fn);
+      $(window).bind('load' + '.' + this.namespace, fn);
+    };
+    /**
+     * Given an object of breakpoint properties and functions associated with those properties,
+     * store them internally for reference later.
+     */
+    BreakUp.prototype.registerBreakPoints = function (breakpoints) {
+      var bps = breakpoints;
+      var br;
+      var index;
+      if (typeof bps === 'object') {
+        // Remove the breakpoints from the arguments array.
+        shift.call(arguments);
+        // Loop through the breakpoints.
+        for (br in bps) {
+          if (bps.hasOwnProperty(br)) {
+            if (isNaN(br) && br !== 'default') {
+              this.log('[' + pluginName + '] The breakpoint property name \"' + br + '\" is not valid. The property must convert to a number or be the word \"default\".', 'info');
+              continue;
+            }
+            if (typeof bps[br] === 'function') {
+              // Represent the default breakpoint as zero internally.
+              index = (br === 'default') ? '0': br;
+              // Unshift the function into the arguments.
+              unshift.call(arguments, bps[br]);
+              var args = slice.call(arguments);
+              // Build a proxy from the function and store it.
+              this.breakPoints[index] = this.buildProxy.apply(this, arguments);
+              // Shift the function off the arguments.
+              shift.call(arguments);
+            }
+            else {
+              this.log('[' + pluginName + '] ' + bps[br] + ', for the breakpoint ' + br + ' is not a function.', 'info');
+            }
+          }
+        }
+      }
+    };
+    /**
+     * Gets the current breakpoint.
+     *
+     * @return (String) candidate: the number-as-a-string index in the list of breakPoints
+     * of the current break point as determined by the screen size.
+     */
+    BreakUp.prototype.getBreakPoint = function () {
+      var br;
+      var candidate;
+      var screen = this.getScreenWidth();
+      for (br in this.breakPoints) {
+        if (this.breakPoints.hasOwnProperty(br)) {
+          if (Number(br) <= screen && (Number(br) > Number(candidate) || Number(br) === 0)) {
+            candidate = br;
+          }
+        }
+      }
+      return candidate;
+    };
+    /**
+     * Returns the stored set of breakpoints and their functions.
+     */
+    BreakUp.prototype.listBreakPoints = function () {
+      return this.breakPoints;
+    };
+     /**
+     * Get the current break point and call the function associated with it.
+     */
+    BreakUp.prototype.breakChangeHandler = function (event) {
+      // updated will be set to false when a new breakpoint is encountered.
+      if (!this.updated) {
+        var callback = this.getBreakPointHandler();
+        if (typeof callback === 'function') {
+          // Pass the event object through to the callback.
+          callback(event);
+          this.updated = true;
+          return;
+        }
+        else {
+          this.log('[' + pluginName + '] The handler for the current breakpoint is not a function.', 'info');
+        }
+      }
+    };
+    /**
+     * Get the function associated with a stored breakpoint.
+     */
+    BreakUp.prototype.getBreakPointHandler = function () {
+      return this.breakPoints[this.getBreakPoint()];
+    };
+    /**
+     * Check to see if the screen is in a new breakpoint. Also
+     * called on page load.
+     */
+    BreakUp.prototype.breakCheck = function (event) {
+      var br = this.getBreakPoint();
+      if (this.currentBreak !== br) {
+        // Note the current breakpoint.
+        this.currentBreak = br;
+        this.updated = false;
+        // And do something.
+        this.breakChangeHandler(event);
+      }
+    };
+    
+    /**
+     * Returns a function with 'this' set as the context object.
+     *
+     * All additional arguments are passed through to the returned function.
+     */
+    BreakUp.prototype.buildProxy = function (fn, context) {
+      var f = fn;
+      var c = context;
+      // Pull the top two args -- fn and context -- off the arguments array.
+      for (var i = 0; i < 2; i++) {
+        Array.prototype.shift.call(arguments);
+      }
+      // Get a local reference to the arguments.
+      var args = Array.prototype.slice.call(arguments);
+      return function () {
+        // Push the callers arguments into the arguments list.
+        // This will most likely be an $.Event object.
+        for (var i = 0; i < arguments.length; i++) {
+          args.unshift(arguments[i]);
+        }
+        f.apply(c, args);
+      };
+    };
+    /**
+    * Get the screen width.
+    */
+    BreakUp.prototype.getScreenWidth = function () {
+      return window.innerWidth || document.documentElement.offsetWidth || document.documentElement.clientWidth;
+    };
+    /**
+     *
+     */
+    BreakUp.prototype.setNameSpace = function (ns) {
+      this.namespace = ns;
+    };
+    /**
+     * 
+     */
+    BreakUp.prototype.getNameSpace = function () {
+      return this.namespace;
+    };
+  	/**
+     * Simple console logging utility that won't blow up in older browsers.
+     */
+    BreakUp.prototype.log = function (message, type) {
+      if ('console' in window) {
+        var t = type || 'log';
+        console[t](message);
+      }
+    };
+    // Return a new BreakUp object.
+    return BreakUp;
+  }());
+}(jQuery));
diff --git a/core/modules/rlayout/designer/assets/js/plugins/breakup/jquery.breakup.min.js b/core/modules/rlayout/designer/assets/js/plugins/breakup/jquery.breakup.min.js
new file mode 100644
index 0000000..4dea445
--- /dev/null
+++ b/core/modules/rlayout/designer/assets/js/plugins/breakup/jquery.breakup.min.js
@@ -0,0 +1 @@
+(function(a){if(typeof define=="function"&&define.amd)define(["jquery"],a);else{if(window.jQuery===undefined)return typeof window.console=="object"&&typeof window.console.log=="function"&&console.log('The plugin "BreakUp" failed to run because jQuery is not present.'),null;a()}})(function(){var a="BreakUp",b=jQuery,c={breakpoints:{0:b.noop},options:{namespace:a}};b[a]=function(){function h(){this.currentBreak=undefined,this.breakPoints={},this.updated=!1,this.namespace=a,this.$elements=b(),this.initialize.apply(this,arguments)}var d=Array.prototype.shift,e=Array.prototype.unshift,f=Array.prototype.slice,g=Array.prototype.splice;return h.prototype.initialize=function(f,h,i){var j,k,l;if(typeof f=="string"||typeof f=="object"&&"jquery"in f){this.log("["+a+"] No breakpoints were provided for BreakUp to act on.","info");return}j=b.extend({},c.breakpoints,f),d.call(arguments),e.call(arguments,j),(typeof h=="object"&&"jquery"in h||typeof h=="string")&&g.call(arguments,1,0,undefined),h&&(k=b.extend({},c.options,h),this.namespace=k.namespace),typeof i=="string"||i===window||i===document?(this.$elements=b(i),g.call(arguments,2,1,this.$elements)):typeof i=="object"&&"jquery"in i&&(this.$elements=i);if(this.$elements.length===0){this.log("["+a+"] Neither a jQuery object nor a valid selector were provided for BreakUp to act on.","info");return}g.call(arguments,1,1),this.registerBreakPoints.apply(this,arguments),l=this.buildProxy(this.breakCheck,this),b(window).bind("resize."+this.namespace,l),b(window).bind("load."+this.namespace,l)},h.prototype.registerBreakPoints=function(b){var c=b,g,h;if(typeof c=="object"){d.call(arguments);for(g in c)if(c.hasOwnProperty(g)){if(isNaN(g)&&g!=="default"){this.log("["+a+'] The breakpoint property name "'+g+'" is not valid. The property must convert to a number or be the word "default".',"info");continue}if(typeof c[g]=="function"){h=g==="default"?"0":g,e.call(arguments,c[g]);var i=f.call(arguments);this.breakPoints[h]=this.buildProxy.apply(this,arguments),d.call(arguments)}else this.log("["+a+"] "+c[g]+", for the breakpoint "+g+" is not a function.","info")}}},h.prototype.getBreakPoint=function(){var a,b,c=this.getScreenWidth();for(a in this.breakPoints)this.breakPoints.hasOwnProperty(a)&&Number(a)<=c&&(Number(a)>Number(b)||Number(a)===0)&&(b=a);return b},h.prototype.listBreakPoints=function(){return this.breakPoints},h.prototype.breakChangeHandler=function(b){if(!this.updated){var c=this.getBreakPointHandler();if(typeof c=="function"){c(b),this.updated=!0;return}this.log("["+a+"] The handler for the current breakpoint is not a function.","info")}},h.prototype.getBreakPointHandler=function(){return this.breakPoints[this.getBreakPoint()]},h.prototype.breakCheck=function(a){var b=this.getBreakPoint();this.currentBreak!==b&&(this.currentBreak=b,this.updated=!1,this.breakChangeHandler(a))},h.prototype.buildProxy=function(a,b){var c=a,d=b;for(var e=0;e<2;e++)Array.prototype.shift.call(arguments);var f=Array.prototype.slice.call(arguments);return function(){for(var a=0;a<arguments.length;a++)f.unshift(arguments[a]);c.apply(d,f)}},h.prototype.getScreenWidth=function(){return window.innerWidth||document.documentElement.offsetWidth||document.documentElement.clientWidth},h.prototype.setNameSpace=function(a){this.namespace=a},h.prototype.getNameSpace=function(){return this.namespace},h.prototype.log=function(a,b){if("console"in window){var c=b||"log";console[c](a)}},h}()});
\ No newline at end of file
diff --git a/core/modules/rlayout/lib/Drupal/rlayout/Plugin/Derivative/Layout.php b/core/modules/rlayout/lib/Drupal/rlayout/Plugin/Derivative/Layout.php
new file mode 100644
index 0000000..15ebee1
--- /dev/null
+++ b/core/modules/rlayout/lib/Drupal/rlayout/Plugin/Derivative/Layout.php
@@ -0,0 +1,60 @@
+<?php
+
+/**
+ * @file
+ * Definition of Drupal\rlayout\Plugin\Derivative\Layout.
+ */
+
+namespace Drupal\rlayout\Plugin\Derivative;
+
+use Drupal\Component\Plugin\Derivative\DerivativeInterface;
+
+/**
+ * Layout plugin derivative definition.
+ */
+class Layout implements DerivativeInterface {
+
+  /**
+   * List of derivatives.
+   *
+   * Associative array keyed by responsive layout machine name. The values of
+   * the array are associative arrays themselves with metadata about the
+   * layout such as the order of regions and breakpoint overrides.
+   *
+   * @var array
+   */
+  protected $derivatives = array();
+
+  /**
+   * Implements DerivativeInterface::getDerivativeDefinition().
+   */
+  public function getDerivativeDefinition($derivative_id, array $base_plugin_definition) {
+    if (!empty($this->derivatives) && !empty($this->derivatives[$derivative_id])) {
+      return $this->derivatives[$derivative_id];
+    }
+    $this->getDerivativeDefinitions($base_plugin_definition);
+    return $this->derivatives[$derivative_id];
+  }
+
+  /**
+   * Implements DerivativeInterface::getDerivativeDefinitions().
+   */
+  public function getDerivativeDefinitions(array $base_plugin_definition) {
+    // Use module_invoke() because plugins are active even if the module is not
+    // enabled.
+    $this->derivatives = array();
+    $layouts = module_invoke('rlayout', 'load_all');
+    if (!empty($layouts)) {
+      foreach ($layouts as $key => $layout) {
+        $this->derivatives[$key] = array(
+          'id' => $layout->id(),
+          'title' => $layout->label(),
+          'available regions' => $layout->regions,
+          'region overrides' => $layout->overrides,
+          'class' => 'Drupal\rlayout\Plugin\layout\layout\ResponsiveLayout',
+        );
+      }
+    }
+    return $this->derivatives;
+  }
+}
diff --git a/core/modules/rlayout/lib/Drupal/rlayout/Plugin/layout/layout/ResponsiveLayout.php b/core/modules/rlayout/lib/Drupal/rlayout/Plugin/layout/layout/ResponsiveLayout.php
new file mode 100644
index 0000000..bd71bc8
--- /dev/null
+++ b/core/modules/rlayout/lib/Drupal/rlayout/Plugin/layout/layout/ResponsiveLayout.php
@@ -0,0 +1,44 @@
+<?php
+
+/**
+ * @file
+ * Definition of Drupal\rlayout\Plugin\layout\layout\ResponsiveLayout.
+ */
+
+namespace Drupal\rlayout\Plugin\layout\layout;
+
+use Drupal\Component\Plugin\Discovery\DiscoveryInterface;
+use Drupal\layout\Plugin\LayoutInterface;
+use Drupal\Component\Plugin\PluginBase;
+use Drupal\Core\Annotation\Plugin;
+
+/**
+ * @Plugin(
+ *  id = "responsive_layout",
+ *  derivative = "Drupal\rlayout\Plugin\Derivative\Layout"
+ * )
+ */
+class ResponsiveLayout extends PluginBase implements LayoutInterface {
+
+  /**
+   * Overrides Drupal\Component\Plugin\PluginBase::__construct().
+   */
+  public function __construct(array $configuration, $plugin_id, DiscoveryInterface $discovery) {
+    // Get definition by discovering the declarative information.
+    $definition = $discovery->getDefinition($plugin_id);
+    foreach ($definition['regions'] as $region => $title) {
+      if (!isset($configuration['regions'][$region])) {
+        $configuration['regions'][$region] = array();
+      }
+    }
+    parent::__construct($configuration, $plugin_id, $discovery);
+  }
+
+  /**
+   * Implements Drupal\layout\Plugin\LayoutInterface::renderLayout().
+   */
+  public function renderLayout($admin = FALSE) {
+    $definition = $this->getDefinition();
+    return '@todo Temporary';
+  }
+}
diff --git a/core/modules/rlayout/lib/Drupal/rlayout/RLayout.php b/core/modules/rlayout/lib/Drupal/rlayout/RLayout.php
new file mode 100644
index 0000000..51415db
--- /dev/null
+++ b/core/modules/rlayout/lib/Drupal/rlayout/RLayout.php
@@ -0,0 +1,52 @@
+<?php
+
+/**
+ * @file
+ * Definition of Drupal\rlayout\RLayout.
+ */
+
+namespace Drupal\rlayout;
+
+use Drupal\Core\Config\Entity\ConfigEntityBase;
+
+/**
+ * Defines the layout entity.
+ */
+class RLayout extends ConfigEntityBase {
+
+  /**
+   * The layout ID (machine name).
+   *
+   * @var string
+   */
+  public $id;
+
+  /**
+   * The layout UUID.
+   *
+   * @var string
+   */
+  public $uuid;
+
+  /**
+   * The layout label.
+   *
+   * @var string
+   */
+  public $label;
+
+  /**
+   * List of regions used in this layout.
+   *
+   * @var array
+   */
+  public $regions;
+
+  /**
+   * Region width overrides for different breakpoints.
+   *
+   * @var array
+   */
+  public $overrides;
+
+}
diff --git a/core/modules/rlayout/lib/Drupal/rlayout/RLayoutFormController.php b/core/modules/rlayout/lib/Drupal/rlayout/RLayoutFormController.php
new file mode 100644
index 0000000..d109b7d
--- /dev/null
+++ b/core/modules/rlayout/lib/Drupal/rlayout/RLayoutFormController.php
@@ -0,0 +1,186 @@
+<?php
+
+/**
+ * @file
+ * Definition of Drupal\rlayout\RLayoutFormController.
+ */
+
+namespace Drupal\rlayout;
+
+use Drupal\Core\Entity\EntityInterface;
+use Drupal\Core\Entity\EntityFormController;
+use Drupal\region\Region;
+
+/**
+ * Form controller for the layout edit/add forms.
+ */
+class RLayoutFormController extends EntityFormController {
+
+  /**
+   * Overrides Drupal\Core\Entity\EntityFormController::prepareEntity().
+   *
+   * Prepares the layout object filling in a few default values.
+   */
+  protected function prepareEntity(EntityInterface $layout) {
+    if (empty($layout->regions)) {
+      if ($default = rlayout_load('default')) {
+        // Attempt to clone the default layout if available.
+        $layout->regions = $default->regions;
+        $layout->overrides = $default->overrides;
+      }
+      else {
+        // If the default cannot be cloned, set some defaults.
+        $layout->regions = array();
+        $default_regions = region_load_all();
+        foreach ($default_regions as $region) {
+          $layout->regions[] = $region->id();
+        }
+        $layout->overrides = array();
+      }
+    }
+  }
+
+  /**
+   * Overrides Drupal\Core\Entity\EntityFormController::form().
+   */
+  public function form(array $form, array &$form_state, EntityInterface $layout) {
+    $form['label'] = array(
+      '#type' => 'textfield',
+      '#title' => t('Label'),
+      '#maxlength' => 255,
+      '#default_value' => $layout->label(),
+      '#description' => t("Example: 'Front page', 'Section page'."),
+      '#required' => TRUE,
+    );
+    $form['id'] = array(
+      '#type' => 'machine_name',
+      '#default_value' => $layout->id(),
+      '#machine_name' => array(
+        'exists' => 'rlayout_load',
+        'source' => array('label'),
+      ),
+      '#disabled' => !$layout->isNew(),
+    );
+
+    $layoutdata = array();
+    $default_regions = region_load_all();
+    foreach ($layout->regions as $id) {
+      $layoutdata['regions'][] = array(
+        'id' => $id,
+        'label' => $default_regions[$id]->label(),
+      );
+    }
+    $layoutdata['overrides'] = (array) $layout->overrides;
+
+    $form['layout_regions'] = array(
+      '#type' => 'textarea',
+      '#title' => t('Region and bunnypoint configuration'),
+      '#default_value' => drupal_json_encode($layoutdata),
+      '#suffix' => '<div id="responsive-layout-designer"></div>',
+    );
+
+    $form['#attached'] = array(
+      'library' => array(
+        array('system', 'jquery.ui.dialog'),
+        array('system', 'jquery.ui.sortable'),
+        array('rlayout', 'rlayout-designer'),
+        array('rlayout', 'rlayout-admin'),
+      ),
+      'js' => array(
+        array(
+          'data' => array(
+            'responsiveLayout' => array(
+              'layout' => $layout,
+              'defaultRegions' => region_load_all(),
+              'defaultBreakpoints' => rlayout_breakpoints_load_all(),
+              'defaultGrids' => entity_load_multiple('grid'),
+            ),
+          ),
+          'type' => 'setting',
+        ),
+      ),
+      'css' => array(
+        array(
+          // Embed the grid css inline for now. Yeah, I know this is evil.
+          // It is just a prototype for now, ok? I know it is evil. Yes.
+          'data' => rlayout_breakpoint_get_css(FALSE),
+          'type' => 'inline',
+        ),
+      ),
+    );
+
+  // JSON2 is required for stringifying JavaScript data structures in older browsers.
+  /*$name = 'json2';
+  if (!libraries_detect($name)) {
+    watchdog('responsive', 'The JSON-js library is recommended for this module to function properly. Some older browsers do not provide the JSON function natively. Please visit !url to obtain this library.',
+      array(
+        '!url' => l('JSON-js (Github)', 'https://github.com/douglascrockford/JSON-js',
+          array(
+            'absolute' => TRUE,
+            'external' => TRUE
+          )
+        )
+      ),
+      WATCHDOG_NOTICE
+    );
+  }
+  else {
+    libraries_load($name);
+  }*/
+
+    return parent::form($form, $form_state, $layout);
+  }
+
+  /**
+   * Overrides Drupal\Core\Entity\EntityFormController::actions().
+   */
+  protected function actions(array $form, array &$form_state) {
+    // Only includes a Save action for the entity, no direct Delete button.
+    return array(
+      'submit' => array(
+        '#value' => t('Save'),
+        '#validate' => array(
+          array($this, 'validate'),
+        ),
+        '#submit' => array(
+          array($this, 'submit'),
+          array($this, 'save'),
+        ),
+      ),
+    );
+  }
+
+  /**
+   * Overrides Drupal\Core\Entity\EntityFormController::save().
+   */
+  public function save(array $form, array &$form_state) {
+    $layout = $this->getEntity($form_state);
+
+    $default_regions = region_load_all();
+    $new_layout_settings = drupal_json_decode($form_state['values']['layout_regions']);
+
+    if (!empty($new_layout_settings)) {
+      $layout->regions = array();
+      foreach ($new_layout_settings['regions'] as $region) {
+        $layout->regions[] = $region['id'];
+
+        /*/ Save region in common regions list in case it is new.
+        if (!isset($default_regions[$region['id']])) {
+          $region = (object) array(
+            'id' => $region['id'],
+            'label' => $region['label'],
+          );
+          region_save($region);
+        }*/
+      }
+      $layout->overrides = $new_layout_settings['overrides'];
+    }
+    $layout->save();
+
+    watchdog('layout', 'Layout @label saved.', array('@label' => $layout->label()), WATCHDOG_NOTICE);
+    drupal_set_message(t('Layout %label saved.', array('%label' => $layout->label())));
+
+    $form_state['redirect'] = 'admin/structure/layouts';
+  }
+
+}
diff --git a/core/modules/rlayout/rlayout-admin.css b/core/modules/rlayout/rlayout-admin.css
new file mode 100644
index 0000000..2d239c3
--- /dev/null
+++ b/core/modules/rlayout/rlayout-admin.css
@@ -0,0 +1,23 @@
+/* @group Base layout editor */
+
+.form-item-layout-regions {
+  display: none;
+}
+
+.rld-inner p {
+  margin: 0;
+}
+
+/* @end */
+
+/* @group ResponsiveLayoutDesigner */
+
+.rld-layouts {
+  border: 1px solid #d0d0d1;
+}
+
+.rld-controls button {
+  display: none;
+}
+
+/* @end */
diff --git a/core/modules/rlayout/rlayout-admin.js b/core/modules/rlayout/rlayout-admin.js
new file mode 100644
index 0000000..44066a7
--- /dev/null
+++ b/core/modules/rlayout/rlayout-admin.js
@@ -0,0 +1,149 @@
+(function ($, ResponsiveLayoutDesigner, JSON) {
+
+/**
+ * Safe logging function.
+ */
+function log (message, type) {
+  if ('console' in window) {
+    var type = type || 'log';
+    if (type in console) {
+      console[type](message);
+    }
+  }
+}
+
+Drupal.responsiveLayout = Drupal.responsiveLayout || {};
+
+Drupal.behaviors.responsiveLayoutAdmin = {
+  attach: function(context) {
+    // Initialize responsive layout editor.
+    Drupal.responsiveLayout.init();
+  }
+}
+
+/**
+ * Initialize responsive layout editor.
+ */
+Drupal.responsiveLayout.init = function() {
+  // Initialize region list and per-breakpoint columns.
+  var regionList = [];
+  var regionNames = {};
+  var layoutConfig = JSON.parse($('#edit-layout-regions').val());
+  for (var regionIndex in layoutConfig.regions) {
+    regionList.push({
+      'machine_name': layoutConfig.regions[regionIndex].id,
+      'label': layoutConfig.regions[regionIndex].label,
+    });
+    regionNames[layoutConfig.regions[regionIndex].id] = '';
+  }
+
+  // More regions that are available for this layout to use (but not currently
+  // in use).
+  var availableRegionList = [];
+  for (var existingRegionName in Drupal.settings.responsiveLayout.defaultRegions) {
+    if (!(existingRegionName in regionNames)) {
+      availableRegionList.push({
+        'machine_name': existingRegionName,
+        'label': Drupal.settings.responsiveLayout.defaultRegions[existingRegionName].label
+      });
+    }
+  }
+
+  // Build a list of grids for the editor.
+  var gridList = [];
+  for (var gridIndex in Drupal.settings.responsiveLayout.defaultGrids) {
+    gridList.push({
+      'machine_name': Drupal.settings.responsiveLayout.defaultGrids[gridIndex].id,
+      'columns': Drupal.settings.responsiveLayout.defaultGrids[gridIndex].options.columns,
+      'classes': ['rld-container-' + Drupal.settings.responsiveLayout.defaultGrids[gridIndex].id],
+    });
+  }
+
+  // Build a list of breakpoints for the editor.
+  var breakpointList = [];
+  for (var breakpointIndex in Drupal.settings.responsiveLayout.defaultBreakpoints) {
+    var overrideList = [];
+    var name = Drupal.settings.responsiveLayout.defaultBreakpoints[breakpointIndex].id;
+    for (var overrideIndex in layoutConfig.overrides[name]) {
+      overrideList.push({
+        'machine_name': layoutConfig.overrides[name][overrideIndex].id,
+        'columns': layoutConfig.overrides[name][overrideIndex].columns,
+      });
+    }
+    breakpointList.push({
+      'label': Drupal.settings.responsiveLayout.defaultBreakpoints[breakpointIndex].label,
+      'machine_name': name,
+      // @todo: make sure that em/px based breakpoints work alike (also on server side).
+      'breakpoint': Drupal.settings.responsiveLayout.defaultBreakpoints[breakpointIndex].width,
+      'grid': Drupal.settings.responsiveLayout.defaultBreakpoints[breakpointIndex].grid,
+      'regions': overrideList,
+    });
+  }
+
+  // Instantiate a layout designer.
+  this.editor = new ResponsiveLayoutDesigner({
+    'regions': {
+      'active': regionList,
+      'available': availableRegionList
+    },
+    'steps': breakpointList,
+    'grids': gridList,
+  });
+
+  // var save = $.proxy(this.save, this);
+
+  // Register event listeners. Just update our representation of the layout
+  // for any event for now.
+  this.editor.topic('regionOrderUpdated').subscribe(Drupal.responsiveLayout.recordState);
+  this.editor.topic('regionAdded').subscribe(Drupal.responsiveLayout.recordState);
+  this.editor.topic('regionRemoved').subscribe(Drupal.responsiveLayout.recordState);
+  this.editor.topic('regionHidden').subscribe(Drupal.responsiveLayout.recordState);
+  this.editor.topic('regionResized').subscribe(Drupal.responsiveLayout.recordState);
+
+  // Insert the editor in the DOM.
+  this.editor.build().appendTo('#responsive-layout-designer');
+
+  // Save a reference to the editor to the DOM for development.
+  window.RLDEditor = this.editor;
+}
+
+/**
+ * Respond to app updates.
+ *
+ * This is generic so we don't have to have a callback for each event we'd like
+ * to track during prototyping.
+ */
+Drupal.responsiveLayout.recordState = function(event) {
+
+  var layoutSettings = {'regions' : [], 'overrides': {}};
+  // Get a dump of the state of the application.
+  var layoutManager = Drupal.responsiveLayout.editor.snapshot();
+  var regionList = layoutManager.info('regionList');
+  var regions = regionList.info('items');
+  for (var i = 0; i < regions.length; i++) {
+    layoutSettings.regions.push({'id': regions[i].info('machine_name'), 'label': regions[i].info('label')});
+  }
+
+  var stepList = layoutManager.info('stepList');
+  var steps = stepList.info('items');
+  for (var i = 0; i < steps.length; i++) {
+    layoutSettings.overrides[steps[i].machine_name] = [];
+    if (steps[i].regionList.items.length) {
+      for (var r = 0; r < steps[i].regionList.items.length; r++) {
+        layoutSettings.overrides[steps[i].machine_name].push({
+          'id': steps[i].regionList.items[r].machine_name,
+          'columns': steps[i].regionList.items[r].columns
+        });
+      }
+    }
+  }
+
+  // The value of the textarea is saved to the server when the whole layout is
+  // saved. We do not have live AJAX communication because the interaction is
+  // built with rapid changes in mind (ordering, adding new regions, resizing),
+  // and we don't have a live preview needed given the useful builder view
+  // itself.
+  $('#edit-layout-regions').val(JSON.stringify(layoutSettings));
+}
+
+})(jQuery, ResponsiveLayoutDesigner, window.JSON);
diff --git a/core/modules/rlayout/rlayout.admin.inc b/core/modules/rlayout/rlayout.admin.inc
new file mode 100644
index 0000000..e82ce56
--- /dev/null
+++ b/core/modules/rlayout/rlayout.admin.inc
@@ -0,0 +1,67 @@
+<?php
+
+/**
+ * @file
+ * Administration functions to maintain a set of layouts.
+ */
+
+use Drupal\rlayout\RLayout;
+
+/**
+ * Page callback: Presents list of layouts.
+ *
+ * @see layout_menu()
+ */
+function rlayout_page_list() {
+  $controller = entity_list_controller('rlayout');
+  return $controller->render();
+}
+
+/**
+ * Page callback: Presents the layout editing form.
+ *
+ * @see layout_menu()
+ */
+function rlayout_page_edit(RLayout $layout) {
+  drupal_set_title(t('<em>Edit layout</em> @label', array('@label' => $layout->label())), PASS_THROUGH);
+  return entity_get_form($layout);
+}
+
+/**
+ * Page callback: Provides the new layout addition form.
+ *
+ * @see layout_menu()
+ */
+function rlayout_page_add() {
+  $layout = entity_create('rlayout', array());
+  return entity_get_form($layout);
+}
+
+/**
+ * Page callback: Form constructor for layout deletion confirmation form.
+ *
+ * @see layout_menu()
+ */
+function rlayout_delete_confirm($form, &$form_state, RLayout $layout) {
+  // Always provide entity id in the same form key as in the entity edit form.
+  $form['id'] = array('#type' => 'value', '#value' => $layout->id());
+  $form_state['layout'] = $layout;
+  return confirm_form($form,
+    t('Are you sure you want to remove the layout %title?', array('%title' => $layout->label())),
+    'admin/structure/layouts',
+    t('This action cannot be undone.'),
+    t('Delete'),
+    t('Cancel')
+  );
+}
+
+/**
+ * Form submission handler for layout_delete_confirm().
+ */
+function rlayout_delete_confirm_submit($form, &$form_state) {
+  $layout = $form_state['layout'];
+  $layout->delete();
+  drupal_set_message(t('Layout %label has been deleted.', array('%label' => $layout->label())));
+  watchdog('layout', 'Layout %label has been deleted.', array('%label' => $layout->label()), WATCHDOG_NOTICE);
+  $form_state['redirect'] = 'admin/structure/layouts';
+}
diff --git a/core/modules/rlayout/rlayout.info b/core/modules/rlayout/rlayout.info
new file mode 100644
index 0000000..09f13c5
--- /dev/null
+++ b/core/modules/rlayout/rlayout.info
@@ -0,0 +1,19 @@
+name = Responsive layouts
+description = Responsive layout editor.
+package = Core
+version = VERSION
+core = 8.x
+dependencies[] = config
+configure = admin/structure/layouts
+
+dependencies[] = layout
+dependencies[] = breakpoint
+dependencies[] = region
+dependencies[] = grid
+
+
+; Information added by drush on 2012-11-09
+version = ""
+project = "drupal"
+datestamp = "1352493228"
+
diff --git a/core/modules/rlayout/rlayout.module b/core/modules/rlayout/rlayout.module
new file mode 100644
index 0000000..9d2a7b4
--- /dev/null
+++ b/core/modules/rlayout/rlayout.module
@@ -0,0 +1,252 @@
+<?php
+
+/**
+ * @file
+ * Responsive layout builder tool for Panels.
+ */
+
+use Drupal\rlayout\RLayout;
+
+/**
+ * Implements hook_menu().
+ */
+function rlayout_menu() {
+  $items = array();
+  $items['admin/structure/layouts'] = array(
+    'title' => 'Layouts',
+    'description' => 'Manage list of layouts.',
+    'page callback' => 'rlayout_page_list',
+    'access callback' => 'user_access',
+    'access arguments' => array('administer layouts'),
+    'file' => 'rlayout.admin.inc',
+  );
+  $items['admin/structure/layouts/add'] = array(
+    'title' => 'Add layout',
+    'page callback' => 'rlayout_page_add',
+    'access callback' => 'user_access',
+    'access arguments' => array('administer layouts'),
+    'type' => MENU_LOCAL_ACTION,
+    'file' => 'rlayout.admin.inc',
+  );
+  $items['admin/structure/layouts/manage/%rlayout'] = array(
+    'title' => 'Edit layout',
+    'page callback' => 'rlayout_page_edit',
+    'page arguments' => array(4),
+    'access callback' => 'user_access',
+    'access arguments' => array('administer layouts'),
+    'type' => MENU_CALLBACK,
+    'file' => 'rlayout.admin.inc',
+  );
+  $items['admin/structure/layouts/manage/%rlayout/edit'] = array(
+    'title' => 'Edit',
+    'type' => MENU_DEFAULT_LOCAL_TASK,
+    'weight' => -10,
+  );
+  $items['admin/structure/layouts/manage/%rlayout/delete'] = array(
+    'title' => 'Delete',
+    'page callback' => 'drupal_get_form',
+    'page arguments' => array('rlayout_delete_confirm', 4),
+    'access callback' => 'user_access',
+    'access arguments' => array('administer layouts'),
+    'type' => MENU_LOCAL_TASK,
+    'file' => 'rlayout.admin.inc',
+  );
+  return $items;
+}
+
+/**
+ * Implements hook_permission().
+ */
+function rlayout_permission() {
+  return array(
+    'administer layouts' => array(
+      'title' => t('Administer responsive layouts'),
+      'description' => t('Administer backend settings for responsive layouts.'),
+    ),
+  );
+}
+
+/**
+ * Implements hook_entity_info().
+ */
+function rlayout_entity_info() {
+  $types['rlayout'] = array(
+    'label' => 'Responsive layout',
+    'entity class' => 'Drupal\rlayout\RLayout',
+    'controller class' => 'Drupal\Core\Config\Entity\ConfigStorageController',
+    'form controller class' => array(
+      'default' => 'Drupal\rlayout\RLayoutFormController',
+    ),
+    'list controller class' => 'Drupal\Core\Config\Entity\ConfigEntityListController',
+    'list path' => 'admin/structure/layouts',
+    'uri callback' => 'rlayout_uri',
+    'config prefix' => 'rlayoutset',
+    'entity keys' => array(
+      'id' => 'id',
+      'label' => 'label',
+      'uuid' => 'uuid',
+    ),
+  );
+  return $types;
+}
+
+/**
+ * Entity URI callback.
+ *
+ * @param Drupal\rlayout\RLayout $layout
+ *   Layout configuration entity instance.
+ *
+ * @return array
+ *   Entity URI information.
+ */
+function rlayout_uri(RLayout $layout) {
+  return array(
+    'path' => 'admin/structure/layouts/manage/' . $layout->id(),
+  );
+}
+
+/**
+ * Load one layout object by its identifier.
+ *
+ * @return Drupal\rlayout\RLayout
+ *   Layout configuration entity instance.
+ */
+function rlayout_load($id) {
+  return entity_load('rlayout', $id);
+}
+
+/**
+ * Load all layout objects.
+ *
+ * @return array
+ *   List of Drupal\rlayout\RLayout instances keyed by id.
+ */
+function rlayout_load_all() {
+  return entity_load_multiple('rlayout');
+}
+
+/**
+ * Helper function to return processed breakpoint information for layouts.
+ *
+ * @todo
+ *   Currently tied to one breakpoint group in rlayout, but it should be
+ *   made independent and configurable.
+ */
+function rlayout_breakpoints_load_all() {
+  $grid_breakpoints = entity_load('breakpoint_group', 'module.rlayout.rlayout');
+  $breakpoint_info = array();
+  foreach ($grid_breakpoints->breakpoints as $key => $breakpoint) {
+    // Only include this breakpoint in the output if we found a grid for it.
+    // Other type of breakpoints are not useful for us, since we cannot display
+    // an editing interface without a grid for each breakpoint.
+    if ($grid = rlayout_breakpoint_find_grid($key)) {
+      // @todo This considers em and px based widths the same number. This is due
+      // to the JS responsive layout designer not being able to take qualified
+      // widths. It can only take numbers. Should be fixed there first and then
+      // here.
+      $low_width = 0;
+      if (preg_match('!min-width: (\d+)[ep]!', $breakpoint->mediaQuery, $found)) {
+        $low_width = $found[1];
+      }
+      $breakpoint_info[$key] = (object) array(
+        'id' => $key,
+        'label' => $breakpoint->label,
+        'width' => $low_width,
+        'grid' => $grid,
+        'mediaQuery' => $breakpoint->mediaQuery,
+      );
+    }
+  }
+  return $breakpoint_info;
+}
+
+/**
+ * Find the (first) grid matching this breakpoint.
+ */
+function rlayout_breakpoint_find_grid($breakpoint_key) {
+  $all_grids = entity_load_multiple('grid');
+  foreach ($all_grids as $grid) {
+    if (!empty($grid->options['breakpoints']) && in_array($breakpoint_key, $grid->options['breakpoints'])) {
+      return $grid->id();
+    }
+  }
+  return FALSE;
+}
+
+/**
+ * Implements hook_library_info().
+ */
+function rlayout_library_info() {
+  $path = drupal_get_path('module', 'rlayout');
+  $rld_path = $path . '/designer';
+
+  $libraries['rlayout-designer'] = array(
+    'title' => 'Responsive layout designer',
+    'version' => '0.1',
+    'js' => array(
+      $rld_path . '/assets/js/plugins/breakup/jquery.breakup.js' => array(),
+      $rld_path . '/app/main.js' => array(),
+      $rld_path . '/app/libs/Utils/Utils.js' => array(),
+      $rld_path . '/app/libs/LayoutManager/LayoutManager.js' => array(),
+      $rld_path . '/app/libs/LayoutPreviewer/LayoutPreviewer.js' => array(),
+      $rld_path . '/app/libs/LayoutList/LayoutList.js' => array(),
+      $rld_path . '/app/libs/LayoutStep/LayoutStep.js' => array(),
+      $rld_path . '/app/libs/StepManager/StepManager.js' => array(),
+      $rld_path . '/app/libs/StepList/StepList.js' => array(),
+      $rld_path . '/app/libs/Step/Step.js' => array(),
+      $rld_path . '/app/libs/RegionList/RegionList.js' => array(),
+      $rld_path . '/app/libs/Region/Region.js' => array(),
+      $rld_path . '/app/libs/GridList/GridList.js' => array(),
+      $rld_path . '/app/libs/Grid/Grid.js' => array(),
+    ),
+    'css' => array(
+      $rld_path . '/assets/css/application.css' => array(),
+      $rld_path . '/assets/css/grid.css' => array(),
+    ),
+  );
+
+  $libraries['rlayout-admin'] = array(
+    'title' => 'Layout admin interface',
+    'version' => '0.1',
+    'js' => array(
+      $path . '/rlayout-admin.js' => array(),
+    ),
+    'css' => array(
+      $path . '/rlayout-admin.css' => array(),
+    ),
+  );
+  return $libraries;
+}
+
+/**
+ * Build CSS for the breakpoints with media queries.
+ *
+ * @param boolean $include_media_queries
+ *   Whether generate one flat CSS without media queries (useful for
+ *   administration), or wrap breakpoints with media queries (for frontend).
+ *
+ * @todo
+ *   Figure out a good way to avoid equal max/min-weights in subsequent
+ *   breakpoints if that is a problem.
+ */
+function rlayout_breakpoint_get_css($include_media_queries = TRUE) {
+  $breakpoints = rlayout_breakpoints_load_all();
+
+  $breakpoint_css = array();
+  foreach ($breakpoints as $name => $breakpoint) {
+    $grid = entity_load('grid', $breakpoint->grid);
+    if ($include_media_queries) {
+      $breakpoint_css[] =
+        '@media ' . $breakpoint->mediaQuery . ' {';
+      // Get grid CSS from gridbuilder and apply some extra indentation.
+      $breakpoint_css[] = '  ' . str_replace("\n", "\n  ", $grid->getGridCss('.panel-responsive', '.rld-span-' . $name . '_'));
+      $breakpoint_css[] = "\n}";
+    }
+    else {
+      $breakpoint_css[] = $grid->getGridCss(NULL, NULL, TRUE);
+    }
+  }
+  $css = join("\n", $breakpoint_css);
+
+  return $css;
+}
diff --git a/core/modules/shortcut/shortcut.base.css b/core/modules/shortcut/shortcut.base.css
index 90a1046..5af1151 100644
--- a/core/modules/shortcut/shortcut.base.css
+++ b/core/modules/shortcut/shortcut.base.css
@@ -5,19 +5,6 @@
  */
 
 /**
- * Toolbar.
- */
-#edit-shortcuts {
-  float: right; /* LTR */
-}
-#shortcut-toolbar ul {
-  float: left; /* LTR */
-}
-#shortcut-toolbar .icon {
-  float: left; /* LTR */
-}
-
-/**
  * Add/remove links.
  */
 .add-or-remove-shortcuts .icon {
diff --git a/core/modules/shortcut/shortcut.module b/core/modules/shortcut/shortcut.module
index 9bbb12a..9ec9e3d 100644
--- a/core/modules/shortcut/shortcut.module
+++ b/core/modules/shortcut/shortcut.module
@@ -713,18 +713,28 @@ function shortcut_preprocess_page(&$variables) {
 }
 
 /**
- * Implements hook_page_alter().
- */
-function shortcut_page_alter(&$page) {
-  if (isset($page['page_top']['toolbar'])) {
-    // If the toolbar is available, add a pre-render function to display the
-    // current shortcuts in the toolbar drawer.
-    $page['page_top']['toolbar']['#pre_render'][] = 'shortcut_toolbar_pre_render';
-  }
+ * Implements hook_toolbar_register_tabs().
+ */
+function shortcut_toolbar_register_tabs() {
+  $tab['shortcuts'] = array(
+    'tab' => array(
+      'title' => t('Shortcuts'),
+      'href' => '',
+      'html' => FALSE,
+      'attributes' => array(
+        'title' => t('Shortcuts'),
+      ),
+    ),
+    'tray' => array(
+      '#pre_render' => array('shortcut_toolbar_pre_render'),
+    ),
+  );
+
+  return $tab;
 }
 
 /**
- * Pre-render function for adding shortcuts to the toolbar drawer.
+ * Pre-render function for adding shortcuts to the toolbar.
  */
 function shortcut_toolbar_pre_render($toolbar) {
   $links = shortcut_renderable_links();
@@ -734,8 +744,6 @@ function shortcut_toolbar_pre_render($toolbar) {
       drupal_get_path('module', 'shortcut') . '/shortcut.theme.css',
     ),
   );
-  $links['#prefix'] = '<div id="shortcut-toolbar">';
-  $links['#suffix'] = '</div>';
   $shortcut_set = shortcut_current_displayed_set();
   $configure_link = NULL;
   if (shortcut_set_edit_access($shortcut_set)) {
@@ -747,13 +755,18 @@ function shortcut_toolbar_pre_render($toolbar) {
     );
   }
 
-  $drawer = array(
-    'shortcuts' => $links,
+  $links_wrapper = array(
+    'shortcuts' => array(
+      '#type' => 'container',
+      '#attributes' => array(
+        'class' => array('toolbar-list'),
+      ),
+      'links' => $links,
+    ),
     'configure' => $configure_link,
   );
 
-  $toolbar['toolbar_drawer'][] = $drawer;
-  return $toolbar;
+  return $links_wrapper;
 }
 
 /**
diff --git a/core/modules/shortcut/shortcut.theme.css b/core/modules/shortcut/shortcut.theme.css
index 9e2dc69..d690169 100644
--- a/core/modules/shortcut/shortcut.theme.css
+++ b/core/modules/shortcut/shortcut.theme.css
@@ -5,45 +5,6 @@
  */
 
 /**
- * Toolbar.
- */
-.toolbar #edit-shortcuts {
-  line-height: 24px;
-  padding: 5px 10px;
-}
-#edit-shortcuts:focus,
-#edit-shortcuts:hover,
-#edit-shortcuts.active {
-  text-decoration: underline;
-}
-#shortcut-toolbar ul {
-  line-height: 24px;
-  margin-left: 5px; /* LTR */
-  padding: 5px 0;
-}
-#shortcut-toolbar a {
-  border-radius: 5px;
-  margin-right: 5px; /* LTR */
-  padding: 0 5px;
-}
-#shortcut-toolbar a:focus,
-#shortcut-toolbar a:hover,
-#shortcut-toolbar a.active:focus {
-  background: #555;
-}
-#shortcut-toolbar a.active:hover,
-#shortcut-toolbar a.active {
-  background-color: #000;
-}
-#shortcut-toolbar .icon {
-  background-color: #444;
-  border-radius: 5px;
-  height: 30px;
-  margin-right: 5px; /* LTR */
-  width: 30px;
-}
-
-/**
  * Add/remove links.
  */
 .add-or-remove-shortcuts .icon {
@@ -65,15 +26,27 @@
 .remove-shortcut a:hover .icon {
   background-position: -12px -12px; /* LTR */
 }
-.add-or-remove-shortcuts .text {
-  padding: 0 6px 0 10px; /* LTR */
+
+/**
+ * Toolbar icon.
+ */
+.toolbar-main .shortcuts .tab {
+  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iNDkuOTk5NSIgeTE9IjQuNTQ1NCIgeDI9IjQ5Ljk5OTUiIHkyPSIxMDQuNTQ1OSI+DQoJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0NDQ0NDQyIvPg0KCTxzdG9wICBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiM5OTk5OTkiLz4NCjwvbGluZWFyR3JhZGllbnQ+DQo8cG9seWdvbiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0idXJsKCNTVkdJRF8xXykiIHBvaW50cz0iMTMuNjM2LDAgMTMuNjM2LDEwMCA0OS42MzYsNzYuNzI3IDg2LjM2MywxMDAgDQoJODYuMzYzLDAgIi8+DQo8L3N2Zz4NCg==);
+}
+.toolbar-main .shortcuts .tab:active,
+.toolbar-main .shortcuts.active .tab {
+  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iNDkuOTk5NSIgeTE9Ijk2LjQ1NTEiIHgyPSI0OS45OTk1IiB5Mj0iLTMuNTQ0OSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIDEwMSkiPg0KCTxzdG9wICBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNGRkZGRkYiLz4NCgk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojRTVFNUU1Ii8+DQo8L2xpbmVhckdyYWRpZW50Pg0KPHBvbHlnb24gZmlsbD0idXJsKCNTVkdJRF8xXykiIHBvaW50cz0iMTMuNjM2LDAgMTMuNjM2LDEwMCA0OS42MzYsNzYuNzI3IDg2LjM2MywxMDAgODYuMzYzLDAgIi8+DQo8L3N2Zz4NCg==);
+}
+.toolbar-main #edit-shortcuts {
+  display: block;
+}
+.toolbar-main .vertical #edit-shortcuts {
+  text-align: right;
+  padding: 1em;
 }
-.add-or-remove-shortcuts a:focus .text,
-.add-or-remove-shortcuts a:hover .text {
-  background-color: #5f605b;
-  border-radius: 0 5px 5px 0; /* LTR */
-  color: #fff;
-  cursor: pointer;
-  font-size: 10px;
-  line-height: 12px;
+.toolbar-main .horizontal #edit-shortcuts {
+  border-left: 1px solid #d9d9d9;
+  float: left;
+  margin-left: 0.3333em;
+  padding: 1em 0.3333em 1em 0.6667em;
 }
diff --git a/core/modules/system/system.module b/core/modules/system/system.module
index 98b0427..98d8010 100644
--- a/core/modules/system/system.module
+++ b/core/modules/system/system.module
@@ -1390,6 +1390,15 @@ function system_library_info() {
     ),
   );
 
+  $libraries['matchMedia'] = array(
+    'title' => 'window.matchMedia polyfill',
+    'website' => 'http://drupal.org/node/1815602',
+    'version' => '1.0',
+    'js' => array(
+      'core/misc/matchMedia.js' => array(),
+    ),
+  );
+
   // Farbtastic.
   $libraries['jquery.farbtastic'] = array(
     'title' => 'Farbtastic',
@@ -1893,7 +1902,6 @@ function system_library_info() {
       array('system', 'jquery'),
     ),
   );
-
   $libraries['drupal.tableselect'] = array(
     'title' => 'Tableselect',
     'version' => VERSION,
diff --git a/core/modules/toolbar/config/toolbar.breakpoints.yml b/core/modules/toolbar/config/toolbar.breakpoints.yml
new file mode 100755
index 0000000..0cae5cc
--- /dev/null
+++ b/core/modules/toolbar/config/toolbar.breakpoints.yml
@@ -0,0 +1 @@
+wide: 'all and (min-width: 60em)'
diff --git a/core/modules/toolbar/config/toolbar.config.yml b/core/modules/toolbar/config/toolbar.config.yml
new file mode 100755
index 0000000..79522f0
--- /dev/null
+++ b/core/modules/toolbar/config/toolbar.config.yml
@@ -0,0 +1,2 @@
+breakpoints:
+  - 'module.toolbar.wide'
diff --git a/core/modules/toolbar/css/toolbar.base-rtl.css b/core/modules/toolbar/css/toolbar.base-rtl.css
new file mode 100644
index 0000000..00e0669
--- /dev/null
+++ b/core/modules/toolbar/css/toolbar.base-rtl.css
@@ -0,0 +1,25 @@
+.toolbar-main,
+.toolbar-main * {
+  text-align: right;
+}
+.toolbar-main ul li {
+  float: right;
+}
+.toolbar-main ul li a {
+  display: inline-block;
+  float: none;
+  zoom: 1;
+}
+.toolbar-main-user {
+  float: left;
+}
+.toolbar-main .toolbar-main-user li {
+  float: none;
+  display: inline;
+}
+.toolbar-main-menu {
+  float: none;
+}
+.toolbar-main-home {
+  float: right;
+}
diff --git a/core/modules/toolbar/css/toolbar.base.css b/core/modules/toolbar/css/toolbar.base.css
new file mode 100644
index 0000000..9dbf8d1
--- /dev/null
+++ b/core/modules/toolbar/css/toolbar.base.css
@@ -0,0 +1,230 @@
+/**
+ * @file toolbar.admin.css
+ *
+ *
+ * Aggressive resets so we can achieve a consistent look in hostile CSS
+ * environments.
+ */
+body.toolbar-tray-open {
+  -moz-box-sizing: border-box;
+  -o-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.toolbar-main,
+.toolbar-main * {
+  -moz-box-sizing: border-box;
+  -o-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  margin: 0;
+  outline: 0;
+  padding: 0;
+  vertical-align: baseline;
+}
+.toolbar-main {
+  font-size: 100%;
+  line-height: 1;
+}
+.toolbar-main ul,
+.toolbar-main ul li,
+.toolbar-main .menu li {
+  list-style: none;
+}
+.toolbar-main .menu li {
+  padding-top: 0;
+}
+/**
+ * Administration menu.
+ */
+.toolbar-main .bar {
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 600;
+}
+.toolbar-main .bar li {
+  display: block;
+}
+.toolbar-main .bar a {
+  display: block;
+}
+@media screen and (min-width: 16.5em) {
+  .toolbar-main .bar li {
+    float: left; /* LTR */
+  }
+}
+@media screen and (min-width: 28.125em) {
+  .toolbar-main .bar {
+    position: fixed;
+  }
+}
+/**
+ * Toolbar tray.
+ */
+.toolbar-main .tray {
+  display: none;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.toolbar-main .tray.vertical {
+  bottom: 0;
+  height: 100%;
+  left: -100%;
+  position: absolute;
+  width: 100%;
+  z-index: 600;
+}
+.toolbar-main .tray.horizontal {
+  left: 0; /* LTR */
+  height: 0;
+  position: absolute;
+  width: 100%;
+  z-index: 600;
+}
+.toolar-main .tray .lining {
+  position: relative;
+}
+.toolbar-main .tray.vertical > .slider {
+  left: -100%; /* LTR */
+  position: absolute;
+  width: 100%;
+}
+.toolbar-main .tray.active {
+  display: block;
+}
+.toolbar-main .horizontal.active {
+  height: auto;
+}
+.toolbar-main .tray.vertical.active,
+.toolbar-main .tray.vertical.active > .slider {
+  left: 0; /* LTR */
+}
+@media screen and (min-width: 16.5em) {
+  .toolbar-main .tray.vertical {
+    bottom: 0;
+    position: absolute;
+    width: 240px;
+    width: 15rem;
+  }
+}
+@media screen and (min-width: 28.125em) {
+  .toolbar-main .tray.horizontal,
+  .toolbar-main .tray.vertical {
+    position: fixed;
+  }
+}
+/**
+ * At larger screen sizes, the tray pushes the page content
+ * using padding instead of left.
+ */
+@media screen and (min-width: 28.125em) {
+  body.toolbar-tray-open.toolbar-vertical {
+    overflow: auto;
+  }
+  body.toolbar-tray-open.toolbar-vertical {
+    padding-left: 240px;
+    padding-left: 15rem;
+  }
+}
+/**
+ * Toolbar menus.
+ */
+.toolbar-main .menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.toolbar-main .interactive-menu {
+  height: 100%;
+}
+.toolbar-main .interactive-menu-offset {
+  height: 100%;
+  position: relative;
+}
+.toolbar-main .box {
+  display: block;
+  line-height: 1em; /* this prevents the value "normal" from being returned as the line-height */
+  position: relative;
+  width: auto;
+}
+.toolbar-main .dormant {
+  display: none;
+}
+.toolbar-main .trail > ul { /* Show the sub-menus */
+  display: block;
+}
+.toolbar-main .active > ul {
+  z-index: 51; /* Pull the active trail li's above the other li's */
+}
+.toolbar-main .tray .interactive-menu li {
+  display: block;
+}
+.toolbar-main .interactive-menu a {
+  display: block;
+  line-height: 1;
+  overflow: hidden;
+}
+.toolbar-main .tray .interactive-menu li a,
+.toolbar-main .toolbar-list a {
+  display: block;
+}
+.toolbar-main .handle {
+  float: right;
+}
+.toolbar-main .handle:hover {
+  cursor: pointer;
+}
+.toolbar-main .horizontal .toolbar-list li {
+  float: left;
+}
+.toolbar-main .horizontal .toolbar-list li + li {
+  margin-left: 0.5em; /* LTR */
+}
+.toolbar-main .horizontal .interactive-menu .handle,
+.toolbar-main .horizontal .interactive-menu .level-2 {
+  display: none;
+}
+/**
+ * ToolBar icons.
+ */
+.toolbar-main .bar .tab,
+.toolbar-main .bar .active .tab,
+.toolbar-main .bar .tab:active,
+.toolbar-main .level-1 > li > .box > a {
+  background-attachment: scroll;
+  background-color: transparent;
+  background-image: none;
+  background-position: -999em -999em;
+  background-repeat: no-repeat;
+}
+/**
+ * ToolBar tray orientation toggle.
+ */
+.toolbar-main .toggle-orientation {
+  display: none;
+}
+.toolbar-main .horizontal .toggle-orientation {
+  bottom: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.toolbar-main .vertical .toggle-orientation {
+  float: right;
+  width: 100%;
+}
+@media screen and (min-width: 16.5em) {
+  .toolbar-main .toggle-orientation {
+    display: block;
+  }
+  .toolbar-main .administration .toggle-orientation {
+    display: none;
+  }
+}
+@media screen and (min-width: 28.125em) {
+  .toolbar-main .administration .toggle-orientation {
+    display: block;
+  }
+}
diff --git a/core/modules/toolbar/css/toolbar.icons-rtl.css b/core/modules/toolbar/css/toolbar.icons-rtl.css
new file mode 100644
index 0000000..e69de29
diff --git a/core/modules/toolbar/css/toolbar.icons.css b/core/modules/toolbar/css/toolbar.icons.css
new file mode 100644
index 0000000..8ca753f
--- /dev/null
+++ b/core/modules/toolbar/css/toolbar.icons.css
@@ -0,0 +1,79 @@
+/**
+ * @file toolbar.icons.css
+ */
+
+@media screen and (min-width: 16.5em) {
+  .toolbar-main .bar .tab,
+  .toolbar-main .bar .active .tab,
+  .toolbar-main .bar .tab:active,
+  .toolbar-main .level-1 > li > .box > a {
+    background-size: 1.75em 1.75em;
+  }
+  .toolbar-main .bar .tab,
+  .toolbar-main .bar .active .tab,
+  .toolbar-main .bar .tab:active {
+    background-position: center center;
+    text-indent: -9999px; /* LTR */
+    width: 3em;
+  }
+  .toolbar-main .level-1 > li > .box > a {
+    background-position: 0.4545em center;
+    padding-left: 2.5em;
+  }
+  .toolbar-main .level-2 {
+    margin-left: 2.1667em;
+  }
+  /* ToolBar bar icons. */
+  .toolbar-main .bar .home .tab{
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iNDkuOTk5NSIgeTE9IjYiIHgyPSI0OS45OTk1IiB5Mj0iOTIuNjIyMyI+DQoJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0NDQ0NDQyIvPg0KCTxzdG9wICBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiM5OTk5OTkiLz4NCjwvbGluZWFyR3JhZGllbnQ+DQo8cG9seWdvbiBmaWxsPSJ1cmwoI1NWR0lEXzFfKSIgcG9pbnRzPSI4Mi4wMDEsMzguODg0IDgyLjAwMSwxNS4wNzYgNjcuOTk5LDE1LjA3NiA2Ny45OTksMjQuNTAxIDUwLDYgMCw1Ny4zODMgMTIsNTcuMzgzIA0KCTEyLDkwLjYxNSA0Myw5MC42MTUgNDMsNjMuNDIyIDU3LjAwMSw2My40MjIgNTcuMDAxLDkwLjYxNSA4Ny45OTksOTAuNjE1IDg3Ljk5OSw1Ny4zODMgMTAwLDU3LjM4MyAiLz4NCjwvc3ZnPg0K);
+  }
+  .toolbar-main .bar .home .tab:active {
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iNTAiIHkxPSI5NSIgeDI9IjUwIiB5Mj0iOC4zNzc3IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIC0xIDAgMTAxKSI+DQoJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0ZGRkZGRiIvPg0KCTxzdG9wICBvZmZzZXQ9IjAuOTk1MSIgc3R5bGU9InN0b3AtY29sb3I6I0U1RTVFNSIvPg0KPC9saW5lYXJHcmFkaWVudD4NCjxwb2x5Z29uIGZpbGw9InVybCgjU1ZHSURfMV8pIiBwb2ludHM9IjgyLjAwMSwzOC44ODQgODIuMDAxLDE1LjA3NiA2Ny45OTksMTUuMDc2IDY3Ljk5OSwyNC41MDEgNTAsNiAwLDU3LjM4MyAxMiw1Ny4zODMgDQoJMTIsOTAuNjE1IDQzLDkwLjYxNSA0Myw2My40MjIgNTcuMDAxLDYzLjQyMiA1Ny4wMDEsOTAuNjE1IDg3Ljk5OSw5MC42MTUgODcuOTk5LDU3LjM4MyAxMDAsNTcuMzgzICIvPg0KPC9zdmc+DQo=);
+  }
+  .toolbar-main .bar .administration .tab {
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iNDkuOTk5NSIgeTE9IjUiIHgyPSI0OS45OTk1IiB5Mj0iOTQuMDEyNiI+DQoJCTxzdG9wICBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNDQ0NDQ0MiLz4NCgkJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6Izk5OTk5OSIvPg0KCTwvbGluZWFyR3JhZGllbnQ+DQoJPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9InVybCgjU1ZHSURfMV8pIiBkPSJNMCw3Ni43Mjh2MTguMTgyaDEwMFY3Ni43MjhIMHogTTAsNHYxOC4xODJoMTAwVjRIMHoNCgkJIE0wLDQwLjM2M3YxOC4xODNoMTAwVjQwLjM2M0gweiIvPg0KPC9nPg0KPC9zdmc+DQo=);
+  }
+  .toolbar-main .bar .administration .tab:active,
+  .toolbar-main .bar .administration.active .tab {
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iNDkuOTk5NSIgeTE9IjUiIHgyPSI0OS45OTk1IiB5Mj0iOTQuMDEyNiI+DQoJCTxzdG9wICBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNGRkZGRkYiLz4NCgkJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6I0U1RTVFNSIvPg0KCTwvbGluZWFyR3JhZGllbnQ+DQoJPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9InVybCgjU1ZHSURfMV8pIiBkPSJNMCw3Ni43Mjh2MTguMTgyaDEwMFY3Ni43MjhIMHogTTAsNHYxOC4xODJoMTAwVjRIMHoNCgkJIE0wLDQwLjM2M3YxOC4xODNoMTAwVjQwLjM2M0gweiIvPg0KPC9nPg0KPC9zdmc+DQo=);
+  }
+  /* Main menu icons. */
+  .toolbar-main #toolbar-link-admin-dashboard {
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiM3Nzc3NzciIGQ9Ik05NC44MjUsNDAuNDU2aC03LjU3NmMtMC45MDgtMy42MzQtMi4zMzMtNy4wNjItNC4xOS0xMC4yMDVsNS4zMzItNS4zMzINCgljMS45NTItMS45NTIsMi4zMjgtNC43NDIsMC44MzgtNi4yMzJsLTguMDktOC4wOTFjLTEuNDktMS40ODktNC4yODEtMS4xMTQtNi4yMzIsMC44MzlsLTUuMjg5LDUuMjg4DQoJYy0zLjE1Mi0xLjg4OC02LjU5Ni0zLjM0LTEwLjI0OS00LjI3VjVjMC0yLjc2MS0xLjcwNy01LTMuODEzLTVINDQuMTEyYy0yLjEwNiwwLTMuODE0LDIuMjM5LTMuODE0LDV2Ny40NTQNCgljLTMuNjUzLDAuOTI5LTcuMDk2LDIuMzgxLTEwLjI0OCw0LjI2OWwtNS4yODctNS4yODdjLTEuOTUyLTEuOTUyLTQuNzQzLTIuMzI4LTYuMjMyLTAuODM5bC04LjA5MSw4LjA5MQ0KCWMtMS40OSwxLjQ4OS0xLjExNCw0LjI4LDAuODM4LDYuMjMybDUuMzMsNS4zM2MtMS44NTcsMy4xNDQtMy4yODMsNi41NzItNC4xOTEsMTAuMjA3SDQuODQzYy0yLjc2MSwwLTUsMS43MDctNSwzLjgxM3YxMS40NDINCgljMCwyLjEwNiwyLjIzOSwzLjgxMyw1LDMuODEzdjAuMDAyaDcuNjVjMC45MzEsMy41OTQsMi4zNjksNi45ODIsNC4yMywxMC4wOWwtNS40NDUsNS40NDVjLTEuOTUyLDEuOTUzLTIuMzI4LDQuNzQyLTAuODM5LDYuMjMyDQoJbDguMDkxLDguMDkxYzEuNDksMS40OSw0LjI4MSwxLjExMyw2LjIzMy0wLjgzOWw1LjQ4OC01LjQ4OGMzLjA5OCwxLjgzLDYuNDcxLDMuMjQ0LDEwLjA0Nyw0LjE1M3Y3Ljc3MWMwLDIuNzYxLDEuNzA4LDUsMy44MTQsNQ0KCWgxMS40NDNjMi4xMDcsMCwzLjgxNC0yLjIzOSwzLjgxNC01aC0wLjAwMXYtNy43NzFjMy41NzYtMC45MDksNi45NS0yLjMyNCwxMC4wNDktNC4xNTRsNS40ODksNS40ODgNCgljMS45NTEsMS45NTIsNC43NDIsMi4zMjksNi4yMzIsMC44MzlsOC4wOS04LjA5MWMxLjQ4OS0xLjQ4OSwxLjExMy00LjI4LTAuODM4LTYuMjMxbC01LjQ0Ny01LjQ0Nw0KCWMxLjg2LTMuMTA3LDMuMjk5LTYuNDk2LDQuMjI5LTEwLjA5aDcuNjUyYzIuNzYxLDAsNS0xLjcwNyw1LTMuODEzVjQ0LjI3Qzk5LjgyNSw0Mi4xNjQsOTcuNTg2LDQwLjQ1Niw5NC44MjUsNDAuNDU2eiBNNjguNzUsNTANCgljMCwxMC4zNTUtOC4zOTUsMTguNzUtMTguNzUsMTguNzVjLTEwLjM1NSwwLTE4Ljc1LTguMzk1LTE4Ljc1LTE4Ljc1YzAtMTAuMzU1LDguMzk1LTE4Ljc1LDE4Ljc1LTE4Ljc1DQoJQzYwLjM1NSwzMS4yNSw2OC43NSwzOS42NDUsNjguNzUsNTB6Ii8+DQo8L3N2Zz4NCg==);
+  }
+  .toolbar-main #toolbar-link-admin-content {
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiM3Nzc3NzciIGQ9Ik02NC4wNjYsMGwyNi45NjksMjcuNjMxVjEwMEg4Ljk2NVYwSDY0LjA2NnogTTIwLjgwOSw4OC4xNTZoNTguMzl2LTU2LjU4SDU3Ljk3OVYxMS44NDFIMjAuODA5Vjg4LjE1NnoNCgkgTTI4Ljg2Nyw0OS41MDRoNDEuNzc3di00LjYwNUgyOC44NjdWNDkuNTA0eiBNMjguODY3LDYyLjY2NWg0MS43Nzd2LTQuNjA0SDI4Ljg2N1Y2Mi42NjV6IE0yOC44NjcsNzUuODE4aDQxLjc3N3YtNC42MDVIMjguODY3DQoJVjc1LjgxOHoiLz4NCjwvc3ZnPg0K);
+  }
+  .toolbar-main #toolbar-link-admin-structure {
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwb2x5Z29uIGZpbGw9IiM3Nzc3NzciIHBvaW50cz0iODguMDAxLDY0LjA0NSA4OC4wMDEsNTEuOTk4IDg4LjAwMSw0OC4wMDIgODQuMDAxLDQ4LjAwMiA1MS45OTcsNDguMDAyIDUxLjk5NywzNS45NTMgDQoJNjQuMDAzLDM1Ljk1MyA2NC4wMDMsMTUuOTEgMzYsMTUuOTEgMzYsMzUuOTUzIDQ4LjAwMSwzNS45NTMgNDguMDAxLDQ4LjAwMiAxNS45OTgsNDguMDAyIDEyLjAwMyw0OC4wMDIgMTIuMDAzLDUxLjk5OCANCgkxMi4wMDMsNjQuMDQ1IDAsNjQuMDQ1IDAsODQuMDkyIDI4LDg0LjA5MiAyOCw2NC4wNDUgMTUuOTk4LDY0LjA0NSAxNS45OTgsNTEuOTk4IDQ4LjAwMSw1MS45OTggNDguMDAxLDY0LjA0NSAzNiw2NC4wNDUgDQoJMzYsODQuMDkyIDY0LjAwMyw4NC4wOTIgNjQuMDAzLDY0LjA0NSA1MS45OTcsNjQuMDQ1IDUxLjk5Nyw1MS45OTggODQuMDAxLDUxLjk5OCA4NC4wMDEsNjQuMDQ1IDcyLjAwMiw2NC4wNDUgNzIuMDAyLDg0LjA5MiANCgkxMDAsODQuMDkyIDEwMCw2NC4wNDUgIi8+DQo8L3N2Zz4NCg==);
+  }
+  .toolbar-main #toolbar-link-admin-appearance {
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiM3Nzc3NzciIGQ9Ik01My40ODIsNTMuMDE2TDQwLjg3NSw2Ni4xNjhMMzAuMDYyLDU0Ljg2NGwyMS43MjYtMjkuODk5bDE0LjI2OSwxNC44OThMNTMuNDgyLDUzLjAxNnogTTU4LjE3MSwyNS40NDgNCgljMCwwLTE0LjY3NS0yMC42MjUtMTYuMjQtMjMuMzg3Yy0xLjU2NS0yLjc2My03LjIwMS0zLjIyOS0xMC44MDMsMS42MjJDMjkuNDEzLDUuOTk0LDMuOTc5LDMxLjc3MywyLjc2NCwzMy4yMjENCgljLTEuMjEzLDEuNDQ3LTEuOTUyLDQuNzc2LDAuMjk2LDYuNDc1YzIuMjQ4LDEuNzAyLDI0LjAzLDE4LjIyNiwyNC4wMywxOC4yMjZsMTAuODU1LDExLjM1NGwtMS40ODYsMS41MjUNCgljNC42MzYsNC44NjUsNS40MDYsNS42NzYsNi45MzcsNS43MjVjNC45NTgsMC4wOTMsMTQuOTExLTkuOTExLDE4LjAxNi01Ljg5NmM2LjIyLDguMDE1LDIyLjUyMSwyNi42MTgsMjIuNTIxLDI2LjYxOA0KCWMzLjM3NSwzLjU1Miw4LjgzMiwzLjY5MSwxMi4wOCwwLjI3YzMuMjc3LTMuNDI1LDMuMTQ4LTkuMTAyLTAuMjc1LTEyLjY1M2MwLDAtMTcuNzQyLTE3LjAzNS0yNS40NTEtMjMuNTYNCgljLTMuODI3LTMuMTk5LDUuNzYyLTEzLjYwMyw1LjYzNC0xOC44MjljLTAuMDQ5LTEuNTc5LTAuODEyLTIuMzg4LTUuNDU3LTcuMjU0bC0xLjQ3OCwxLjU4TDU4LjE3MSwyNS40NDh6Ii8+DQo8L3N2Zz4NCg==);
+  }
+  .toolbar-main #toolbar-link-admin-people {
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiM3Nzc3NzciIGQ9Ik0xOC4yNzEsMjAuNjM1YzAsNy42NCw2LjIzMSwxMy44MTgsMTMuODY3LDEzLjgxOEMzOS44MTYsMzQuNDUzLDQ2LDI4LjI3NSw0NiwyMC42MzUNCgljMC03LjYzOC02LjE4My0xMy44MTgtMTMuODYyLTEzLjgxOEMyNC41MDIsNi44MTcsMTguMjcxLDEyLjk5NywxOC4yNzEsMjAuNjM1eiBNNTMuMzYzLDQwLjc3NQ0KCWMtNC43MjktMS42NDItMTEuNS0yLjU5Mi0yMS4yMjYtMi41OTJDMC43NzIsMzguMTgzLDAsNDcuMzE3LDAsNjAuODE2aDQ5LjMxOWMwLDAtMi4zMjUtNC43Ni0wLjg5My0xMC44NjgNCglDNDkuOTcsNDMuMzY5LDUzLjM2Myw0MC43NzUsNTMuMzYzLDQwLjc3NXogTTUzLjk5OSw1M2MwLDcuNjMzLDYuMTgzLDEzLjgxNiwxMy44NiwxMy44MTZjNy42MzYsMCwxMy44NjctNi4xODQsMTMuODY3LTEzLjgxNg0KCWMwLTcuNTkxLTYuMjMtMTMuODE4LTEzLjg2Ny0xMy44MThDNjAuMTgyLDM5LjE4Miw1My45OTksNDUuNDA5LDUzLjk5OSw1M3ogTTEwMCw5My4xODRjMC0xMy0wLjcyNy0yMi41OTYtMzIuMTQxLTIyLjU5Ng0KCWMtMzEuNDA4LDAtMzIuMTM2LDkuMTM3LTMyLjEzNiwyMi41OTZIMTAweiIvPg0KPC9zdmc+DQo=);
+  }
+  .toolbar-main #toolbar-link-admin-modules {
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiM3Nzc3NzciIGQ9Ik0xMDAsOTEuMzM2TDc5LjM4OSw3MC43MjVsMTEuNzQzLTExLjc0MmMzLjEyNS0zLjEyNSwzLjEyNS04LjE5LTAuMDAxLTExLjMxM2wtMzAuOTA2LTMwLjkxbC02LjY4OCw2LjY4Nw0KCUwzMC4wOTIsMGwtNi4yNTksNi4yNmwyMy40NDUsMjMuNDQ0TDI5LjcwNCw0Ny4yNzhMNi4yNTksMjMuODMzTDAsMzAuMDkzbDIzLjQ0NSwyMy40NDNsLTYuNjg3LDYuNjg3bDMwLjkxMSwzMC45MQ0KCWMzLjEyMSwzLjEyMyw4LjE4OCwzLjEyMywxMS4zMTIsMGwxMS43NDQtMTEuNzQyTDkxLjMzNiwxMDBMMTAwLDkxLjMzNnoiLz4NCjwvc3ZnPg0K);
+  }
+  .toolbar-main #toolbar-link-admin-config {
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiM3Nzc3NzciIGQ9Ik05LjA5Nyw1My4wMDJjOS40OTksOS41LDIzLjU0MSwxMS41NDQsMzUuMDQyLDYuMjI3bDM3LjYzNCwzNy42MzhjNC4xODEsNC4xODEsMTAuOTUzLDQuMTgxLDE1LjA5LDANCgljNC4xODItNC4xNCw0LjE4Mi0xMC45MSwwLTE1LjA5M0w1OS4yMjcsNDQuMTM5YzUuMzE5LTExLjUsMy4yNzQtMjUuNTQzLTYuMjIzLTM1LjA0MkM0NC41OTcsMC42OTEsMzIuNTUtMS45MDEsMjEuOTYsMS4zNw0KCWwyMy40OTcsMjMuNTAybC00LjQxMiwxNi4wODRsLTE2LjE3NCw0LjUwMUwxLjM3LDIxLjk2Qy0xLjkwMSwzMi41NSwwLjY5MSw0NC41OTcsOS4wOTcsNTMuMDAyeiIvPg0KPC9zdmc+DQo=);
+  }
+  .toolbar-main #toolbar-link-admin-reports {
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiM3Nzc3NzciIGQ9Ik0zNy4yMDYsMTguNzI2VjBMMTIuNDk4LDI0LjcwOGgxOC43MjZDMzQuNTI5LDI0LjcwOCwzNy4yMDYsMjIuMDMyLDM3LjIwNiwxOC43MjZ6Ii8+DQoJPHBhdGggZmlsbD0iIzc3Nzc3NyIgZD0iTTI3Ljk0Nyw1MC40OTJoNy40NjljMC44NDMsMCwxLjUyNS0wLjY4NSwxLjUyNS0xLjUyNXYtNy40NjZjMC0wLjg0MS0wLjY4Mi0xLjUzMi0xLjUyNS0xLjUzMmgtNy40NjkNCgkJYy0wLjgzOCwwLTEuNTIsMC42OTEtMS41MiwxLjUzMnY3LjQ2NkMyNi40MjgsNDkuODA4LDI3LjEwOSw1MC40OTIsMjcuOTQ3LDUwLjQ5MnoiLz4NCgk8cGF0aCBmaWxsPSIjNzc3Nzc3IiBkPSJNODEuNDk2LDBINDMuNTM5djIyLjI3NGMwLDQuODQtMy45MjQsOC43NjYtOC43NjMsOC43NjZIMTIuNDk4djYyLjk2MmMwLDMuMzExLDIuNjg4LDUuOTk4LDYsNS45OThoNjIuOTk5DQoJCWMzLjMxNywwLDYuMDA3LTIuNjg4LDYuMDA3LTUuOTk4VjUuOTk3Qzg3LjUwMywyLjY4OSw4NC44MTQsMCw4MS40OTYsMHogTTIzLjgwNSwzOS42NGMwLTEuMjYsMS4wMjMtMi4yODgsMi4yODgtMi4yODhoMTEuMTgzDQoJCWMxLjI2LDAsMi4yODcsMS4wMjgsMi4yODcsMi4yODh2MTEuMThjMCwxLjI2Ni0xLjAyNywyLjI4Ny0yLjI4NywyLjI4N0gyNi4wOTNjLTEuMjY1LDAtMi4yODgtMS4wMjEtMi4yODgtMi4yODdWMzkuNjR6DQoJCSBNNzYuMTkzLDgxLjM5NmMwLDEuODI2LTEuNDc5LDMuMzA2LTMuMzAxLDMuMzA2SDI3LjEwOWMtMS44MjcsMC0zLjMwNS0xLjQ3OS0zLjMwNS0zLjMwNnYtMS4xMDVjMC0xLjgyLDEuNDc4LTMuMzAyLDMuMzA1LTMuMzAyDQoJCWg0NS43ODRjMS44MjIsMCwzLjMwMSwxLjQ4LDMuMzAxLDMuMzAyVjgxLjM5NnogTTc2LjE5Myw2My43NDhjMCwxLjgyMi0xLjQ3OSwzLjMwMi0zLjMwMSwzLjMwMkgyNy4xMDkNCgkJYy0xLjgyNywwLTMuMzA1LTEuNDc5LTMuMzA1LTMuMzAydi0xLjEwNWMwLTEuODI2LDEuNDc4LTMuMzAzLDMuMzA1LTMuMzAzaDQ1Ljc4NGMxLjgyMiwwLDMuMzAxLDEuNDc3LDMuMzAxLDMuMzAzVjYzLjc0OHoNCgkJIE03Ni4xOTMsNDYuNjk2YzAsMS44MjYtMS40NzksMy4zMDYtMy4zMDEsMy4zMDZINDYuMjc3Yy0xLjgyMSwwLTMuMzAyLTEuNDc5LTMuMzAyLTMuMzA2di0xLjEwNWMwLTEuODI1LDEuNDgxLTMuMzAzLDMuMzAyLTMuMzAzDQoJCWgyNi42MTZjMS44MjMsMCwzLjMwMywxLjQ3OCwzLjMwMywzLjMwM3YxLjEwNUg3Ni4xOTN6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==);
+  }
+  .toolbar-main #toolbar-link-admin-help {
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiM3Nzc3NzciIGQ9Ik0xMDAsNTBjMCwyNy42MTQtMjIuMzg3LDUwLTUwLjAwMSw1MFMwLDc3LjYxMywwLDUwQzAsMjIuMzg2LDIyLjM4NSwwLDQ5Ljk5OSwwUzEwMCwyMi4zODYsMTAwLDUweg0KCSBNNTUuMjA5LDY1LjQzNHYtMy4yNjhjMC0yLjE3NiwwLjQ2Mi0zLjkzOCwxLjM4OS01LjI3OWMwLjkyNC0xLjM0LDMuMTMxLTMuMzAxLDYuNjE1LTUuODgxYzUuMDgyLTMuNjI1LDguNTIxLTYuODkyLDEwLjM0Mi05Ljc5Nw0KCWMxLjgxMy0yLjkwNSwyLjcyMS02LjM0OSwyLjcyMS0xMC4zNDJjMC01Ljk4Ny0yLjIwMy0xMC43NzgtNi42MTMtMTQuMzcyYy00LjQwOC0zLjU5MS0xMC4zNTItNS4zODktMTcuODI2LTUuMzg5DQoJYy05LjA3MSwwLTE3LjY1OSwyLjI2Ni0yNS43NDgsNi44MDVsNS45MzMsMTEuOTIxYzYuOTY4LTMuNTU4LDEzLjE3My01LjMzNSwxOC42MTgtNS4zMzVjMy4xMjEsMCw1LjU1MSwwLjYyMSw3LjI5MywxLjg1Mg0KCWMxLjc0MSwxLjIzMSwyLjYxMiwzLjAyOCwyLjYxMiw1LjM4OGMwLDIuMTAzLTAuNjA0LDQuMDA5LTEuODIzLDUuNzE2Yy0xLjIxOSwxLjcwOC0zLjcyOSwzLjkyLTcuNTM5LDYuNjQxDQoJYy0zLjk1NCwyLjkwNi02LjY3Niw1LjY0Mi04LjE2Niw4LjIxOWMtMS40OTEsMi41NzgtMi4yMzEsNS42MDctMi4yMzEsOS4wOTJ2NC4wMjlINTUuMjA5eiBNNDEuNTQ0LDg4LjI3MQ0KCWMxLjY2NywxLjYxMiw0LjAyOSwyLjQyMiw3LjA3OCwyLjQyMmMyLjk3MiwwLDUuMzAxLTAuODI0LDYuOTY4LTIuNDc4YzEuNjY1LTEuNjU1LDIuNTAzLTMuOTE0LDIuNTAzLTYuNzc2DQoJYzAtMi45NzYtMC44MjEtNS4yNTgtMi40NzYtNi44NjFjLTEuNjU0LTEuNTk4LTMuOTgtMi4zOTUtNi45OTUtMi4zOTVjLTMuMTIzLDAtNS40OTcsMC43ODItNy4xMywyLjM0Mg0KCWMtMS42MzUsMS41NTktMi40NDksMy44NjMtMi40NDksNi45MTRDMzkuMDQyLDg0LjM3OSwzOS44NzgsODYuNjU2LDQxLjU0NCw4OC4yNzF6Ii8+DQo8L3N2Zz4NCg==);
+  }
+}
+
+@media screen and (min-width: 28.125em) {
+  .toolbar-main .bar .tab,
+  .toolbar-main .bar .active .tab,
+  .toolbar-main .bar .tab:active {
+    background-position: 0.5em center;
+    padding-left: 2.5em; /* LTR */
+    text-indent: 0;
+    width: auto;
+  }
+}
diff --git a/core/modules/toolbar/css/toolbar.theme-rtl.css b/core/modules/toolbar/css/toolbar.theme-rtl.css
new file mode 100644
index 0000000..e8cb8cf
--- /dev/null
+++ b/core/modules/toolbar/css/toolbar.theme-rtl.css
@@ -0,0 +1,7 @@
+.toolbar-main .bar .menu li + li {
+  margin-left: auto;
+  margin-right: 1em;
+}
+.toolbar-main .shortcuts .menu li {
+  float: right;
+}
diff --git a/core/modules/toolbar/css/toolbar.theme.css b/core/modules/toolbar/css/toolbar.theme.css
new file mode 100644
index 0000000..3259bca
--- /dev/null
+++ b/core/modules/toolbar/css/toolbar.theme.css
@@ -0,0 +1,255 @@
+/**
+ * @file toolbar.theme.css
+ */
+.toolbar-main {
+  font-family: "Source Sans Pro", "Lucida Grande", Verdana, sans-serif;
+  /* Set base font size to 13px based on root ems. */
+  font-size: 0.8125rem;
+  -moz-tap-highlight-color: rgba(0,0,0,0);
+  -o-tap-highlight-color: rgba(0,0,0,0);
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  tap-highlight-color: rgba(0,0,0,0);
+  -moz-touch-callout: none;
+  -o-touch-callout: none;
+  -webkit-touch-callout: none;
+  touch-callout: none;
+}
+.toolbar-main a {
+  text-decoration: none;
+}
+.toolbar-main a:hover {
+  text-decoration: underline;
+}
+/**
+ * Toolbar bar.
+ */
+.toolbar-main .bar {
+  background-color: #0f0f0f;
+  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3333);
+  color: #dddddd;
+}
+.toolbar-main .bar li:hover {
+  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%);
+  background-image: linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%);
+}
+.toolbar-main .bar li.active {
+  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
+  background-image: linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
+}
+.toolbar-main .bar a {
+  color: #ffffff;
+  cursor: pointer;
+  padding: 1em 0.3333em;
+}
+@media screen and (min-width: 16.5em) {
+  .toolbar-main .bar a {
+    padding-left: 1.3333em;
+    padding-right: 1.3333em;
+  }
+}
+/**
+ * Toolbar tray.
+ */
+.toolbar-main .tray {
+  background-color: #ffffff;
+  border-right: 1px solid #aaaaaa;
+  box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.3333);
+}
+.toolbar-main .horizontal .tray {
+  background-color: #f5f5f5;
+}
+.toolbar-main .tray a {
+  color: #333333;
+}
+.toolbar-main .horizontal .toolbar-list {
+  background-color: #ffffff;
+}
+.toolbar-main .toolbar-list a {
+  padding: 1em 0.3333em;
+}
+.toolbar-main .vertical .toolbar-list {
+  border-bottom: 1px solid #dddddd;
+}
+.toolbar-main .vertical .toolbar-list a {
+  margin-right: 3.5em;
+}
+.toolbar-main .vertical .level-1 > li + li,
+.toolbar-main .vertical .toolbar-list > li + li,
+.toolbar-main .vertical .toolbar-list > .menu > li + li {
+  border-top: 1px solid #dddddd;
+}
+.toolbar-main .vertical .level-1 a {
+  font-weight: bold;
+}
+.toolbar-main .level-2 ul {
+  margin-left: 0.25em;
+}
+.toolbar-main .vertical .level-2 ul {
+  border-bottom-style: solid;
+  border-top-style: solid;
+  border-bottom-width: 1px;
+  border-top-width: 1px;
+}
+.toolbar-main .vertical .level-2 li:last-child > ul {
+  border-bottom: 0;
+}
+.toolbar-main .level-2 a {
+  color: #333333;
+  padding-bottom: 0.6667em;
+  padding-top: 0.6667em;
+}
+.toolbar-main .vertical .level-2 a {
+  font-weight: normal;
+}
+.toolbar-main .level-3 {
+  border-color: #cccccc;
+}
+.toolbar-main .level-3 li {
+  padding-left: 0.1667em;
+}
+.toolbar-main .level-3 > li {
+  background-color: #f5f5f5;
+}
+.toolbar-main .level-3 a {
+  color: #303030;
+}
+.toolbar-main .level-4 {
+  border-color: #bbbbbb;
+}
+.toolbar-main .level-4 > li {
+  background-color: #e5e5e5;
+}
+.toolbar-main .level-4 a {
+  color: #2d2d2d;
+}
+.toolbar-main .level-5 {
+  border-color: #aaaaaa;
+}
+.toolbar-main .level-5 > li {
+  background-color: #d5d5d5;
+}
+.toolbar-main .level-5 a {
+  color: #2a2a2a;
+}
+.toolbar-main .level-6 {
+  background-color: #c5c5c5;
+}
+.toolbar-main .level-6 > li{
+  border-color: #888888;
+}
+.toolbar-main .level-6 a {
+  color: #272727;
+}
+.toolbar-main .level-7 {
+  background-color: #d5d5d5;
+}
+.toolbar-main .level-7 > li {
+  border-color: #777777;
+}
+.toolbar-main .level-7 a {
+  color: #242424;
+}
+.toolbar-main .level-8 {
+  background-color: #e5e5e5;
+}
+.toolbar-main .level-8 > li {
+  border-color: #666666;
+}
+.toolbar-main .level-8 a {
+  color: #212121;
+}
+.toolbar-main .level-9 {
+  background-color: #f5f5f5;
+}
+.toolbar-main .level-9 > li  {
+  border-color: #555555;
+}
+.toolbar-main .level-9 a {
+  color: #1e1e1e;
+}
+/**
+ * ToolBar tray - horizontal.
+ */
+.toolbar-main .horizontal .level-1 > li.open > .box {
+  border-bottom-color: white;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  position: relative;
+  margin-top: -1px;
+  top: 1px;
+}
+.toolbar-main .horizontal .level-2 ul {
+  border-left: 1px solid #bcbcbc;
+}
+.toolbar-main .horizontal .level-2 a {
+  padding: 0.6667em 1em;
+}
+
+/**
+ * Interactive menu.
+ */
+
+.toolbar-main .handle {
+  background-attachment: scroll;
+  background-color: transparent;
+  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjI1NiAzNDYgMTAwIDEwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAyNTYgMzQ2IDEwMCAxMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZmlsbD0iIzk5OTk5OSIgZD0iTTI1NiwzOTZjMCwyNy41OTgsMjIuNCw1MCw1MCw1MGMyNy41OTgsMCw1MC0yMi40MDIsNTAtNTBjMC0yNy42LTIyLjQwMi01MC01MC01MA0KCQlDMjc4LjQsMzQ2LDI1NiwzNjguNCwyNTYsMzk2eiBNMjYxLDM5NmMwLTI0Ljg1MiwyMC4xNDktNDUsNDUtNDVjMjQuODU0LDAsNDUsMjAuMTQ4LDQ1LDQ1YzAsMjQuODU0LTIwLjE0Niw0NS00NSw0NQ0KCQlDMjgxLjE0OSw0NDEsMjYxLDQyMC44NTQsMjYxLDM5NnoiLz4NCgk8cG9seWdvbiBmaWxsPSIjNTE4MUMyIiBwb2ludHM9IjMwNiw0MTEgMjgxLDM4NiAzMzEsMzg2IAkiLz4NCjwvZz4NCjwvc3ZnPg0K);
+  background-origin: content-box;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  border: 0;
+  bottom: 0;
+  display: block;
+  font-size: 1em;
+  height: 100%;
+  padding: 0.6667em 0em;
+  position: absolute;
+  right: 0;
+  text-indent: -999em;
+  top: 0;
+  width: 3.5em;
+  z-index: 1;
+}
+.toolbar-main .level-2 .handle {
+  padding-bottom: 0.4545em;
+  padding-top: 0.4545em;
+}
+.toolbar-main .handle.open {
+  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjI1NiAzNDYgMTAwIDEwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAyNTYgMzQ2IDEwMCAxMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iIzk5OTk5OSIgZD0iTTM1NiwzOTZjMC0yNy42LTIyLjQwMi01MC01MC01MGMtMjcuNiwwLTUwLDIyLjQtNTAsNTBjMCwyNy41OTgsMjIuNCw1MCw1MCw1MA0KCUMzMzMuNTk4LDQ0NiwzNTYsNDIzLjU5OCwzNTYsMzk2eiBNMzUxLDM5NmMwLDI0Ljg0OS0yMC4xNTEsNDUtNDUsNDVjLTI0Ljg1NiwwLTQ1LTIwLjE1MS00NS00NWMwLTI0Ljg1NSwyMC4xNDQtNDUsNDUtNDUNCglDMzMwLjg0OSwzNTEsMzUxLDM3MS4xNDUsMzUxLDM5NnoiLz4NCjxwb2x5Z29uIGZpbGw9IiM3Nzc3NzciIHBvaW50cz0iMzA2LDM4MSAzMzEsNDA2IDI4MSw0MDYgIi8+DQo8L3N2Zz4NCg==);
+}
+
+/* Orientation toggle */
+
+.toolbar-main .toggle-orientation {
+  background-color: #f5f5f5;
+  padding: 1em;
+}
+.toolbar-main .horizontal .toggle-orientation {
+  border-left: 1px solid #c9c9c9; /* LTR */
+}
+.toolbar-main .toggle-orientation > .lining {
+  background-color: #ffffff;
+  border: 1px solid #c9c9c9;
+  float: right; /* LTR */
+  padding: 0.1667em;
+}
+.toolbar-main .toggle-orientation button {
+  background-color: transparent;
+  border: 1px solid #b0b0b0;
+  cursor: pointer;
+  display: inline-block;
+  float: left;
+  height: 0.9em;
+  text-indent: -999em;
+  width: 1.4562em;
+}
+.toolbar-main .toggle-orientation [value="vertical"] {
+  border-left-width: 7px;
+  margin-left: 0.5em;
+}
+.toolbar-main .toggle-orientation [value="horizontal"] {
+  border-top-width: 4px;
+}
+.toolbar-main .toggle-orientation .active {
+  border-color: #3F9AD3;
+}
diff --git a/core/modules/toolbar/js/toolbar.js b/core/modules/toolbar/js/toolbar.js
new file mode 100755
index 0000000..c7bde50
--- /dev/null
+++ b/core/modules/toolbar/js/toolbar.js
@@ -0,0 +1,531 @@
+/**
+ * @file toolbar.js
+ *
+ * Defines the behavior of the Drupal administration toolbar.
+ */
+(function ($, _) {
+
+"use strict";
+
+Drupal.toolbar = Drupal.toolbar || {};
+var transitionEnd = "transitionEnd.toolbar webkitTransitionEnd.toolbar transitionend.toolbar msTransitionEnd.toolbar oTransitionEnd.toolbar";
+
+/**
+ * Attach toggling behavior and notify the overlay of the toolbar.
+ */
+Drupal.behaviors.toolbar = {
+  attach: function(context, settings) {
+    var options = _.extend(this.options, ('toolbar' in settings) ? settings.toolbar : {});
+    var $toolbar = $(context).find('#toolbar').once('toolbar');
+    if ($toolbar.length) {
+      $toolbar
+      .addClass('toolbar-main')
+      .on('trayregistered', decorateInteractiveMenu);
+      var toolbar = new ToolBar($toolbar, options);
+      var tray, $tray, $trays, tab, $tab, $tabs, name, i;
+      // Register trays.
+      Drupal.toolbar.trays = [];
+      $trays = $toolbar.find('.tray');
+      for (i = 0; i < $trays.length; i++) {
+        $tray = $($trays[i]);
+        tray = new Tray($tray);
+        Drupal.toolbar.trays.push(tray);
+        $tray.data('toolbar', {
+          'tray': tray
+        });
+        toolbar.registerTray(tray);
+      }
+      // Associate the bar tabs with the trays.
+      Drupal.toolbar.tabs = [];
+      $tabs = $toolbar.find('.bar .tab');
+      for (i = 0; i < $tabs.length; i++) {
+        $tab = $($tabs[i]);
+        tab = new Tab($tab);
+        Drupal.toolbar.tabs.push(tab);
+        name = tab.$el.data().toolbarTray || '';
+        if (name.length) {
+          tray = toolbar.getTray(name);
+          $tab.data('toolbar', {
+            'tab': tab
+          });
+          tab.registerTray(tray);
+          toolbar.registerTab(tab);
+        }
+      }
+      // Set up switching between the vertical and horizontal presentation
+      // of the toolbar trays based on a breakpoint.
+      if (options.breakpoints && options.breakpoints['module.toolbar.wide'] !== undefined) {
+        var mql = matchMedia(options.breakpoints['module.toolbar.wide']);
+        mql.addListener(toolbar.mediaQueryChangeHandler);
+        toolbar.mediaQueries.push(mql);
+        if (mql.matches) {
+          toolbar.mediaQueryChangeHandler(mql);
+        }
+      }
+    }
+  },
+  options: {
+    breakpoints: null
+  }
+};
+/**
+ * A toolbar is an administration action button container.
+ */
+function ToolBar ($toolbar, options) {
+  this.$toolbar = $toolbar;
+  this.$bar = $toolbar.find('.bar');
+  this.height = 0;
+  this.barHeight = 0;
+  this.trays = [];
+  this.tabs = [];
+  this.activeTab = null;
+  this.mediaQueries = [];
+  this.ui = {
+    'activeClass': 'active',
+    'trayOpenBodyClass': 'toolbar-tray-open',
+  };
+  // Bind all ToolBar methods to the instance.
+  _.bindAll(this);
+  // Recalculate the offset top on screen resize.
+  // Use throttle to prevent setHeight from being called too frequently.
+  var setHeight = _.debounce(this.setHeight, 250);
+  $(window)
+    .on({
+      'resize.toolbar': setHeight
+    });
+  // Toolbar event handlers.
+  this.$toolbar
+    .on('setup.toolbar', this.setHeight)
+    .on('click.toolbar', '.bar .tab', this.toggleTray)
+    .on('click.toolbar', '.tray .toggle-orientation button', this.orientationChangeHandler)
+    .on(transitionEnd, '.tray.active', this.setHeight)
+    .trigger('setup.toolbar');
+};
+/**
+ * Extend the prototype of the ToolBar class.
+ */
+$.extend(ToolBar.prototype, {
+  /**
+   * The height of the toolbar offsets the top of the page content.
+   *
+   * Page components can register with the offsettopchange event to know when
+   * the height of the toolbar changes.
+   */
+  setHeight: function (event) {
+    var height = 0;
+    var tray, $tray, $trays, trayH;
+    this.barHeight = this.$bar.outerHeight();
+    var bhpx = this.barHeight + 'px';
+    height += this.barHeight;
+    // Set the top of the all the trays to the height of the bar.
+    $trays = this.$toolbar.find('.tray');
+    for (var i = $trays.length - 1; i >= 0; i--) {
+      tray = $trays[i];
+      if (!tray.style.top.length || (tray.style.top !== bhpx)) {
+        tray.style.top = bhpx;
+      }
+    };
+    // Get the height of the active horizontal tray and include it in the total
+    // height of the toolbar.
+    $tray = $trays.filter('.active.horizontal');
+    if ($tray.length > 0) {
+      var trayH = $tray.outerHeight();
+      height += trayH;
+    }
+    // Indicate the height of the toolbar in the attribute data-offset-top.
+    if (this.height !== height) {
+      this.height = height;
+      this.$toolbar.attr('data-offset-top', height);
+      // Alter the padding on the top of the body element.
+      $('body').css('padding-top', height);
+      $(document).trigger('offsettopchange', height);
+    }
+  },
+  /**
+   *
+   */
+  registerTray: function (tray) {
+    this.trays.push(tray);
+    this.$toolbar.trigger('trayregistered', tray);
+  },
+  /**
+   *
+   */
+  toggleTray: function (event) {
+    var $tab = $(event.target);
+    var tab = $tab.data('toolbar').tab;
+    if (tab.tray) {
+      event.preventDefault();
+      var disableTabs = _.without(this.tabs, tab);
+      for (var i = disableTabs.length - 1; i >= 0; i--) {
+        if (disableTabs[i]) {
+          disableTabs[i].toggle(false);
+        }
+      };
+      tab.toggle();
+      this.activeTab = (tab.active) ? tab : null;
+      this.setBodyState();
+      this.setHeight();
+      this.$toolbar.trigger('traytoggled', tab.tray);
+    }
+  },
+  /**
+   *
+   */
+  getTray: function (name) {
+    for (var i = 0; i < this.trays.length; i++) {
+      if (this.trays[i].name === name) {
+        return this.trays[i];
+      }
+    }
+    return;
+  },
+  /**
+   *
+   */
+  registerTab: function (tab) {
+    this.tabs.push(tab);
+    this.$toolbar.trigger('tabregistered', tab);
+  },
+  /**
+   *
+   */
+  orientationChangeHandler: function (event) {
+    var $button = $(event.target);
+    var orientation = event.target.value;
+    var tray = $button.closest('.tray').data('toolbar').tray;
+    this.changeOrientation(tray, orientation, true);
+    this.setBodyState();
+    this.setHeight();
+    this.$toolbar.trigger('toolbarorientationchanged', orientation);
+  },
+  /**
+   *
+   */
+  mediaQueryChangeHandler: function (mql) {
+    var orientation = (mql.matches) ? 'horizontal' : 'vertical';
+    this.changeOrientation(this.trays, orientation);
+    this.setBodyState();
+    this.setHeight();
+    this.$toolbar.trigger('toolbarorientationchanged', orientation);
+  },
+  /**
+   *
+   */
+  changeOrientation: function (trays, orientation, isOverride) {
+    trays = (!_.isArray(trays)) ? [trays] : trays;
+    for (var i = trays.length - 1; i >= 0; i--) {
+      trays[i].changeOrientation(orientation, isOverride);
+    };
+  },
+  /**
+   *
+   */
+  setBodyState: function () {
+    var $body = $('body')
+      .removeClass('toolbar-vertical toolbar-horizontal');
+    if (this.activeTab) {
+      $body
+        .addClass('toolbar-tray-open')
+        .addClass('toolbar-' + this.activeTab.tray.getOrientation());
+    }
+    else {
+      $body
+        .removeClass('toolbar-tray-open');
+    }
+  }
+});
+
+/**
+ * Toolbar tray.
+ */
+function Tray ($tray) {
+  this.$el = $tray;
+  this.name = this.$el.data()['toolbarTray'] || this.$el.attr('id') ||'no name';
+  this.active = false;
+  this.orientation = 'vertical';
+  this.isOrientationLocked = false;
+  this.setup.apply(this, arguments);
+}
+
+/**
+ * Extend the prototype of the Tray.
+ */
+_.extend(Tray.prototype, {
+  /**
+   *
+   */
+  setup: function () {
+    this.$el
+      .addClass(this.orientation)
+      .find('.lining')
+      .append(Drupal.theme('toolbarOrientationToggle'));
+    this.toggleOrientationToggle();
+  },
+  /**
+   *
+   */
+  toggle: function (open) {
+    this.$el.toggleClass('active', open);
+  },
+  /**
+   *
+   */
+  changeOrientation: function (orientation, isOverride) {
+    if (isOverride && orientation === 'vertical') {
+      this.isOrientationLocked = true;
+    }
+    if (isOverride && orientation === 'horizontal') {
+      this.isOrientationLocked = false;
+    }
+    if (!this.isOrientationLocked && orientation === 'horizontal' && this.orientation === 'vertical') {
+      var self = this;
+      this.orientation = orientation;
+      this.$el
+        .removeClass('vertical')
+        .addClass('horizontal');
+      this.toggleOrientationToggle();
+    }
+    if (orientation === 'vertical' && this.orientation === 'horizontal') {
+      this.orientation = orientation;
+      this.$el
+        .removeClass('horizontal')
+        .addClass('vertical');
+      this.toggleOrientationToggle();
+    }
+  },
+  /**
+   *
+   */
+  getOrientation: function () {
+    return (this.isOrientationLocked) ? 'vertical' : this.orientation;
+  },
+  /**
+   * Change the orientation toggle active state.
+   */
+  toggleOrientationToggle: function () {
+    this.$el
+    .find('[value="' + this.orientation + '"]')
+    .removeClass('active')
+    .siblings()
+    .addClass('active');
+  }
+});
+
+function Tab ($tab) {
+  this.$el = $tab;
+  this.active = false;
+  this.name = this.$el.data()['toolbarTray'] || this.$el.attr('id') ||'no name';
+  this.tray;
+}
+
+/**
+ * Extend the prototype of the Tray.
+ */
+_.extend(Tab.prototype, {
+  /**
+   *
+   */
+  toggle: function (open) {
+    this.active = (open !== undefined) ? open : !this.active;
+    this.$el.parent('li').toggleClass('active', this.active);
+    if (this.tray) {
+      this.tray.toggle(this.active);
+    }
+  },
+  /**
+   *
+   */
+  registerTray: function (tray) {
+    this.tray = tray;
+  },
+});
+
+/**
+ * A toggle is an interactive element often bound to a click handler.
+ *
+ * @return {String}
+ *   A string representing a DOM fragment.
+ */
+Drupal.theme.toolbarOrientationToggle = function () {
+  return '<div class="toggle-orientation"><div class="lining"><button value="horizontal">Horizontal</button><button value="vertical">Vertical</button></div></div>';
+};
+/**
+ * A toggle is an interactive element often bound to a click handler.
+ *
+ * @return {String}
+ *   A string representing a DOM fragment.
+ */
+Drupal.theme.interactionMenuItemToggle = function (options) {
+  return '<button aria-pressed="false" class="' + options['class'] + '">' + options.text + '</button>';
+};
+
+
+/**
+ * Interactive menu setup methods.
+ */
+function decorateInteractiveMenu (event, tray) {
+  if (tray.name === 'administration') {
+    tray.decorate = interactiveMenuDecorator();
+    tray.decorate('.interactive-menu > .menu');
+  }
+}
+
+/**
+ * Decorate a menu with markup and classes for attaching behaviors.
+ */
+var interactiveMenuDecorator = function () {
+
+  var ui = {
+    'handleOpen': Drupal.t('Open'),
+    'handleClose': Drupal.t('Close')
+  };
+
+  var processLists = function (event) {
+    event.stopPropagation();
+    // Mark up the lists and items.
+    $(event.target)
+    .trigger('listChange');
+  };
+  var toggleList = function (event) {
+    // The toggle.
+    var $toggle = $(event.target);
+    var $item = $toggle.closest('li');
+    var $list = $item.children('ul');
+    var isHidden = $list.hasClass('dormant');
+    // Close open siblings.
+    $item.siblings().filter('.open').find('.handle').trigger('click');
+    // Toggle the item open state.
+    $item
+      [((isHidden) ? 'add' : 'remove') + 'Class']('open');
+    // Toggle the item list visibility.
+    $list
+      [((isHidden) ? 'remove' : 'add') + 'Class']('dormant');
+    // Twist the toggle.
+    $toggle
+      [((isHidden) ? 'add' : 'remove') + 'Class']('open');
+    // Adjust the toggle text.
+    $toggle
+      .text((isHidden) ? ui.handleClose : ui.handleOpen)
+      .attr('aria-pressed', isHidden);
+    // Fire an event to signify that a list has been toggled.
+    $item.trigger('itemtoggled', [$item.parent().data('toolbar').level, !isHidden]);
+  };
+  var initItems = function (event) {
+    // The accordion wrapper.
+    var $wrapper = $(event.target);
+    var rootClass = 'root';
+    var boxClass = 'box';
+    var handleClass = 'handle';
+    // Get lists and items.
+    var $root = $wrapper.children('.' + rootClass);
+    var $ul = $wrapper.find('ul');
+    var $li = $wrapper.find('li');
+    // Basic setup
+    $ul
+      .each(function (index, element) {
+        $(this).data('toolbar', {
+          processed: false,
+          type: 'list',
+          level: NaN
+        });
+      });
+    // Initialize items and their links.
+    $li
+      .each(function (index, element) {
+        $(this).data('toolbar', {
+          processed: false,
+          type: 'item'
+        });
+      })
+      // Add a class to item links.
+      .children('a')
+      .wrap(
+        $('<div>', {
+          'class': boxClass
+        })
+      )
+      .end()
+      // Add a handle to each list item if it has a menu.
+      .each(function (index, element) {
+        var $item = $(this);
+        if ($item.children('ul').length > 0) {
+          $item
+            .children('.' + boxClass)
+            .prepend(Drupal.theme('interactionMenuItemToggle', {
+                'class': handleClass,
+                'text': ui.handleOpen
+              })
+            );
+        }
+      });
+  };
+  /**
+   * Adds a level class to each list based on its depth in the menu.
+   */
+  var markListLevels = function ($lists, level) {
+    level = (typeof level === 'object') ? 1 : level;
+    $lists
+    .addClass('level-' + level)
+    .each(function (index, element) {
+      $(this).data().toolbar.level = level;
+    });
+    $lists = $lists.children('li').children('ul');
+    if ($lists.length > 0) {
+      markListLevels($lists, (level + 1));
+    }
+  };
+  var setLevelVisibility = function ($lists, visibleAfter) {
+    var level;
+    $lists
+    .each(function (index, element) {
+      var $this = $(this);
+      level = $(this).data().toolbar.level;
+      if (level > visibleAfter) {
+        $this.addClass('dormant');
+      }
+      else {
+        $this.addClass('visible');
+      }
+    });
+    $lists = $lists.children('li').children('ul');
+    if ($lists.length > 0) {
+      setLevelVisibility($lists, visibleAfter);
+    }
+  };
+  return function (selector) {
+    var context = this;
+    // Find any menus that have already been decorated.
+    var $wrapper = this.$el.find(selector);
+    // Decorate any menus that have not been.
+    $wrapper
+      .once('decorate-menu')
+      .addClass('clearfix')
+      .each(function (index, element) {
+        var $root = $(this).addClass('root');
+        // Create a set of list-manipulation callbacks.
+        // Called when items are added or removed.
+        var listUpdate = $.Callbacks();
+        listUpdate.add(_.bind(initItems, context));
+        listUpdate.add(_.bind(markListLevels, context, $root));
+        listUpdate.add(_.bind(setLevelVisibility, context, $root, 1));
+        // Wrap the list in a div to provide a positioning context.
+        $wrapper = $().add($wrapper).add(
+          $root
+          .wrap('<div class="interactive-menu-offset"></div>')
+          .parent()
+          // Bind event handlers.
+          .on('setup.toolbar', _.bind(processLists, context))
+          .on('listChange.toolbar', listUpdate.fire)
+          .on('click.toolbar', '.handle', _.bind(toggleList, context))
+          /* @todo
+          .on('clean.toolbar.accordionMode', 'li', cleanItem)
+          .on('activate.toolbar.accordionMode', 'li', activateItem)
+          */
+          .trigger('setup')
+        );
+      });
+    return $wrapper;
+  };
+};
+}(jQuery, _));
diff --git a/core/modules/toolbar/templates/toolbar.tpl.php b/core/modules/toolbar/templates/toolbar.tpl.php
index b3d561c..572f4ff 100644
--- a/core/modules/toolbar/templates/toolbar.tpl.php
+++ b/core/modules/toolbar/templates/toolbar.tpl.php
@@ -19,15 +19,10 @@
  * @ingroup themeable
  */
 ?>
-<nav id="toolbar" role="navigation" class="<?php print $attributes['class']; ?> clearfix" <?php print $attributes; ?>>
-  <div class="toolbar-menu clearfix">
-    <?php print render($toolbar['toolbar_home']); ?>
-    <?php print render($toolbar['toolbar_user']); ?>
-    <?php print render($toolbar['toolbar_menu']); ?>
-    <?php if ($toolbar['toolbar_drawer']):?>
-      <?php print render($toolbar['toolbar_toggle']); ?>
-    <?php endif; ?>
-  </div>
+<div id="toolbar" role="navigation" class="<?php print $attributes['class']; ?>" <?php print $attributes; ?>>
+  <!-- Tab bar -->
+  <?php print render($toolbar['toolbar_tabs']); ?>
 
-  <?php print render($toolbar['toolbar_drawer']); ?>
-</nav>
+  <!-- Trays -->
+  <?php print render($toolbar['toolbar_trays']); ?>
+</div>
diff --git a/core/modules/toolbar/toolbar-rtl.css b/core/modules/toolbar/toolbar-rtl.css
deleted file mode 100644
index e121547..0000000
--- a/core/modules/toolbar/toolbar-rtl.css
+++ /dev/null
@@ -1,37 +0,0 @@
-
-#toolbar,
-#toolbar * {
-  text-align: right;
-}
-#toolbar ul li {
-  float: right;
-}
-#toolbar ul li a {
-  display: inline-block;
-  float: none;
-  zoom: 1;
-}
-#toolbar div.toolbar-menu {
-  padding: 5px 50px 5px 50px;
-}
-#toolbar-user {
-  float: left;
-}
-#toolbar ul#toolbar-user li {
-  float: none;
-  display: inline;
-}
-#toolbar-menu {
-  float: none;
-}
-#toolbar-home {
-  float: right;
-}
-#toolbar ul li.home a {
-  position: absolute;
-  right: 10px;
-}
-#toolbar div.toolbar-menu a.toggle {
-  left: 10px;
-  right: auto;
-}
diff --git a/core/modules/toolbar/toolbar.css b/core/modules/toolbar/toolbar.css
deleted file mode 100644
index bd18110..0000000
--- a/core/modules/toolbar/toolbar.css
+++ /dev/null
@@ -1,129 +0,0 @@
-
-body.toolbar {
-  padding-top: 2.2em;
-}
-body.toolbar-drawer {
-  padding-top: 5.3em;
-}
-
-/**
- * Aggressive resets so we can achieve a consistent look in hostile CSS
- * environments.
- */
-#toolbar,
-#toolbar * {
-  border: 0;
-  font-size: 100%;
-  line-height: inherit;
-  list-style: none;
-  margin: 0;
-  outline: 0;
-  padding: 0;
-  text-align: left; /* LTR */
-  vertical-align: baseline;
-}
-
-/**
- * Base styles.
- *
- * We use a keyword for the toolbar font size to make it display consistently
- * across different themes, while still allowing browsers to resize the text.
- */
-#toolbar {
-  background: #666;
-  color: #ccc;
-  font: normal small "Lucida Grande", Verdana, sans-serif;
-  left: 0;
-  margin: 0 -20px;
-  padding: 0 20px;
-  position: fixed;
-  right: 0;
-  top: 0;
-  box-shadow: 0 3px 20px #000;
-  z-index: 600;
-}
-#toolbar div.collapsed {
-  display: none;
-  visibility: hidden;
-}
-#toolbar a {
-  color: #fff;
-  font-size: .846em;
-  text-decoration: none;
-}
-#toolbar ul li,
-#toolbar ul li a {
-  float: left; /* LTR */
-}
-
-/**
- * Administration menu.
- */
-#toolbar div.toolbar-menu {
-  background: #000;
-  line-height: 20px;
-  padding: 5px 50px 5px 10px; /* LTR */
-  position: relative;
-}
-#toolbar-home a span {
-  background: url(toolbar.png) no-repeat 0 -45px;
-  display: block;
-  height: 14px;
-  margin: 3px 0px;
-  text-indent: -9999px;
-  vertical-align: text-bottom;
-  width: 11px;
-}
-#toolbar-user {
-  float: right; /* LTR */
-}
-#toolbar-menu {
-  float: left; /* LTR */
-}
-#toolbar div.toolbar-menu a.toggle {
-  background: url(toolbar.png) 0 -20px no-repeat;
-  bottom: 0;
-  cursor: pointer;
-  height: 25px;
-  overflow: hidden;
-  position: absolute;
-  right: 10px; /* LTR */
-  text-indent: -9999px;
-  width: 25px;
-}
-#toolbar div.toolbar-menu a.toggle:focus,
-#toolbar div.toolbar-menu a.toggle:hover {
-  background-position:  -50px -20px;
-}
-#toolbar div.toolbar-menu a.toggle-active {
-  background-position:  -25px -20px;
-}
-#toolbar div.toolbar-menu a.toggle-active.toggle:focus,
-#toolbar div.toolbar-menu a.toggle-active.toggle:hover {
-  background-position:  -75px -20px;
-}
-#toolbar div.toolbar-menu ul li a {
-  padding: 0 10px;
-  border-radius: 10px;
-}
-#toolbar div.toolbar-menu ul li a:focus,
-#toolbar div.toolbar-menu ul li a:hover,
-#toolbar div.toolbar-menu ul li a:active,
-#toolbar div.toolbar-menu ul li a.active:focus {
-  background: #444;
-}
-#toolbar div.toolbar-menu ul li a.active:hover,
-#toolbar div.toolbar-menu ul li a.active:active,
-#toolbar div.toolbar-menu ul li a.active,
-#toolbar div.toolbar-menu ul li.active-trail a {
-  background: url(toolbar.png) 0 0 repeat-x;
-  text-shadow: #333 0 1px 0;
-}
-
-/**
- * Collapsed drawer of additional toolbar content.
- */
-#toolbar div.toolbar-drawer {
-  position: relative;
-  padding: 0 10px;
-}
diff --git a/core/modules/toolbar/toolbar.info b/core/modules/toolbar/toolbar.info
old mode 100644
new mode 100755
index 758dc9c..89f7ba1
--- a/core/modules/toolbar/toolbar.info
+++ b/core/modules/toolbar/toolbar.info
@@ -3,3 +3,9 @@ description = Provides a toolbar that shows the top-level administration menu it
 core = 8.x
 package = Core
 version = VERSION
+
+dependencies[] = config
+dependencies[] = breakpoint
+
+configure = admin/structure/toolbar
+
diff --git a/core/modules/toolbar/toolbar.js b/core/modules/toolbar/toolbar.js
deleted file mode 100644
index 2353050..0000000
--- a/core/modules/toolbar/toolbar.js
+++ /dev/null
@@ -1,115 +0,0 @@
-(function ($) {
-
-"use strict";
-
-Drupal.toolbar = Drupal.toolbar || {};
-
-/**
- * Attach toggling behavior and notify the overlay of the toolbar.
- */
-Drupal.behaviors.toolbar = {
-  attach: function(context, settings) {
-    var $toolbar = $('#toolbar').once('toolbar');
-    if ($toolbar.length) {
-
-      // Set the initial state of the toolbar.
-      Drupal.toolbar.init();
-
-      $(window).on('resize.toolbar', Drupal.toolbar.height);
-
-      // Toggling toolbar drawer.
-      $toolbar.find('a.toggle').once('toolbar-toggle').click(function(e) {
-        e.preventDefault();
-        Drupal.toolbar.toggle();
-        // Allow resize event handlers to recalculate sizes/positions.
-        $(window).triggerHandler('resize');
-      });
-    }
-  }
-};
-
-/**
- * Retrieve last saved cookie settings and set up the initial toolbar state.
- */
-Drupal.toolbar.init = function() {
-  // Retrieve the collapsed status from a stored cookie.
-  var collapsed = $.cookie('Drupal.toolbar.collapsed');
-
-  // Expand or collapse the toolbar based on the cookie value.
-  if (collapsed === '1') {
-    Drupal.toolbar.collapse();
-  }
-  else {
-    Drupal.toolbar.expand();
-  }
-};
-
-/**
- * Collapse the toolbar.
- */
-Drupal.toolbar.collapse = function() {
-  var toggle_text = Drupal.t('Show shortcuts');
-  $('#toolbar div.toolbar-drawer').addClass('collapsed');
-  $('#toolbar a.toggle')
-    .removeClass('toggle-active')
-    .attr('title',  toggle_text)
-    .html(toggle_text);
-  $('body').removeClass('toolbar-drawer').css('paddingTop', Drupal.toolbar.height());
-  $.cookie(
-    'Drupal.toolbar.collapsed',
-    1,
-    {
-      path: Drupal.settings.basePath,
-      // The cookie should "never" expire.
-      expires: 36500
-    }
-  );
-  Drupal.toolbar.height();
-  $(document).trigger('offsettopchange');
-};
-
-/**
- * Expand the toolbar.
- */
-Drupal.toolbar.expand = function() {
-  var toggle_text = Drupal.t('Hide shortcuts');
-  $('#toolbar div.toolbar-drawer').removeClass('collapsed');
-  $('#toolbar a.toggle')
-    .addClass('toggle-active')
-    .attr('title',  toggle_text)
-    .html(toggle_text);
-  $('body').addClass('toolbar-drawer').css('paddingTop', Drupal.toolbar.height());
-  $.cookie(
-    'Drupal.toolbar.collapsed',
-    0,
-    {
-      path: Drupal.settings.basePath,
-      // The cookie should "never" expire.
-      expires: 36500
-    }
-  );
-  Drupal.toolbar.height();
-  $(document).trigger('offsettopchange');
-};
-
-/**
- * Toggle the toolbar.
- */
-Drupal.toolbar.toggle = function() {
-  if ($('#toolbar div.toolbar-drawer').hasClass('collapsed')) {
-    Drupal.toolbar.expand();
-  }
-  else {
-    Drupal.toolbar.collapse();
-  }
-};
-
-Drupal.toolbar.height = function() {
-  // @TODO this needs to be cached outside this function.
-  var $toolbar = $('#toolbar');
-  var height = $toolbar.outerHeight();
-  $toolbar.attr('data-offset-top', height);
-  return height;
-};
-
-})(jQuery);
diff --git a/core/modules/toolbar/toolbar.module b/core/modules/toolbar/toolbar.module
old mode 100644
new mode 100755
index a54743a..4d1d004
--- a/core/modules/toolbar/toolbar.module
+++ b/core/modules/toolbar/toolbar.module
@@ -41,87 +41,21 @@ function toolbar_theme($existing, $type, $theme, $path) {
     'render element' => 'toolbar',
     'template' => 'toolbar',
   );
-  $items['toolbar_toggle'] = array(
-    'variables' => array(
-      'collapsed' => NULL,
-      'attributes' => array(),
-    ),
+  $items['toolbar_tray'] = array(
+    'render element' => 'element',
   );
   return $items;
 }
 
 /**
- * Implements hook_menu().
- */
-function toolbar_menu() {
-  $items['toolbar/toggle'] = array(
-    'title' => 'Toggle drawer visibility',
-    'type' => MENU_CALLBACK,
-    'page callback' => 'toolbar_toggle_page',
-    'access arguments' => array('access toolbar'),
-  );
-  return $items;
-}
-
-/**
- * Page callback: Toggles the visibility of the toolbar drawer.
- *
- * @see toolbar_menu().
- */
-function toolbar_toggle_page() {
-  global $base_path;
-  // Toggle the value in the cookie.
-  setcookie('Drupal.toolbar.collapsed', !_toolbar_is_collapsed(), NULL, $base_path);
-  // Redirect the user from where he used the toggle element.
-  drupal_goto();
-}
-
-/**
- * Formats an element used to toggle the toolbar drawer's visibility.
- *
- * @param $variables
- *   An associative array containing:
- *   - collapsed: A boolean value representing the toolbar drawer's visibility.
- *   - attributes: An associative array of HTML attributes.
- *
- * @return
- *   An HTML string representing the element for toggling.
- *
- * @ingroup themable
- */
-function theme_toolbar_toggle($variables) {
-  if ($variables['collapsed']) {
-    $toggle_text = t('Show shortcuts');
-  }
-  else {
-    $toggle_text = t('Hide shortcuts');
-    $variables['attributes']['class'][] = 'toggle-active';
-  }
-  return l($toggle_text, 'toolbar/toggle', array('query' => drupal_get_destination(), 'attributes' => array('title' => $toggle_text) + $variables['attributes']));
-}
-
-/**
- * Determines the current state of the toolbar drawer's visibility.
- *
- * @return
- *   TRUE when drawer is collapsed, FALSE when it is expanded.
- */
-function _toolbar_is_collapsed() {
-  // PHP converts dots into underscores in cookie names to avoid problems with
-  // its parser, so we use a converted cookie name.
-  return isset($_COOKIE['Drupal_toolbar_collapsed']) ? $_COOKIE['Drupal_toolbar_collapsed'] : 0;
-}
-
-/**
  * Implements hook_page_build().
  *
- * Add admin toolbar to the page_top region automatically.
+ * Add admin toolbar to the page_bottom region automatically.
  */
 function toolbar_page_build(&$page) {
-  $page['page_top']['toolbar'] = array(
+  $page['page_bottom']['toolbar'] = array(
     '#pre_render' => array('toolbar_pre_render'),
     '#access' => user_access('access toolbar'),
-    'toolbar_drawer' => array(),
   );
 }
 
@@ -144,11 +78,8 @@ function toolbar_pre_render($toolbar) {
  * Add some page classes, so global page theming can adjust to the toolbar.
  */
 function toolbar_preprocess_html(&$vars) {
-  if (isset($vars['page']['page_top']['toolbar']) && user_access('access toolbar')) {
+  if (isset($vars['page']['page_bottom']['toolbar']) && user_access('access toolbar')) {
     $vars['attributes']['class'][] = 'toolbar';
-    if (!_toolbar_is_collapsed()) {
-      $vars['attributes']['class'][] = 'toolbar-drawer';
-    }
   }
 }
 
@@ -165,7 +96,7 @@ function toolbar_preprocess_toolbar(&$variables) {
 /**
  * Implements hook_system_info_alter().
  *
- * Indicate that the 'page_top' region (in which the toolbar will be displayed)
+ * Indicate that the 'page_bottom' region (in which the toolbar will be displayed)
  * is an overlay supplemental region that should be refreshed whenever its
  * content is updated.
  *
@@ -174,7 +105,7 @@ function toolbar_preprocess_toolbar(&$variables) {
  */
 function toolbar_system_info_alter(&$info, $file, $type) {
   if ($type == 'theme') {
-    $info['overlay_supplemental_regions'][] = 'page_top';
+    $info['overlay_supplemental_regions'][] = 'page_bottom';
   }
 }
 
@@ -185,7 +116,6 @@ function toolbar_system_info_alter(&$info, $file, $type) {
  *   Array of links and settings relating to the admin menu.
  */
 function toolbar_view() {
-  global $user;
 
   $build = array(
     '#theme' => 'toolbar',
@@ -196,76 +126,93 @@ function toolbar_view() {
     ),
   );
 
-  // Retrieve the admin menu from the database.
-  $links = toolbar_menu_navigation_links(toolbar_get_menu_tree());
-  $build['toolbar_menu'] = array(
-    '#theme' => 'links__toolbar_menu',
-    '#links' => $links,
-    '#attributes' => array('id' => 'toolbar-menu'),
-    '#heading' => array('text' => t('Administrative toolbar'), 'level' => 'h2', 'class' => 'element-invisible'),
-  );
-
-  // Add logout & user account links or login link.
-  if ($user->uid) {
-    $links = array(
-      'account' => array(
-        'title' => t('Hello <strong>@username</strong>', array('@username' => user_format_name($user))),
-        'href' => 'user',
-        'html' => TRUE,
-        'attributes' => array('title' => t('User account')),
-      ),
-      'logout' => array(
-        'title' => t('Log out'),
-        'href' => 'user/logout',
-      ),
-    );
-  }
-  else {
-     $links = array(
-      'login' => array(
-        'title' => t('Log in'),
-        'href' => 'user',
-      ),
+  // Get the configured breakpoint for switch from vertical to horizontal
+  // toolbar presentation.
+  $breakpoints = entity_load('breakpoint_group', 'module.toolbar.toolbar');
+  if (!empty($breakpoints)) {
+    $build['#attached']['js'] = array(
+        array(
+        'data' => array(
+          'toolbar' => array(
+            'breakpoints' => array(),
+          ),
+        ),
+        'type' => 'setting',
+      )
     );
+    // // Load the breakpoints for toolbar.
+    foreach ($breakpoints->breakpoints as $key => $breakpoint) {
+      $build['#attached']['js'][0]['data']['toolbar']['breakpoints'][$key] = $breakpoint->mediaQuery;
+    }
   }
-  $build['toolbar_user'] = array(
-    '#theme' => 'links__toolbar_user',
-    '#links' => $links,
-    '#attributes' => array('id' => 'toolbar-user'),
+
+  // Build the default toolbar navigation links.
+  // Retrieve the administration menu from the database.
+  $tree = toolbar_get_menu_tree();
+  // Add attributes to the links before rendering.
+  toolbar_menu_navigation_links($tree);
+  $menu['toolbar_administration'] = array(
+    '#type' => 'container',
+    '#attributes' => array(
+      'class' => array('interactive-menu toolbar-list'),
+    ),
   );
+  $menu['toolbar_administration']['administration_menu'] = menu_tree_output($tree);
 
-  // Add a "home" link.
-  $link = array(
+  $toolbar_groups = array(
     'home' => array(
-      'title' => '<span class="home-link">Home</span>',
-      'href' => '<front>',
-      'html' => TRUE,
-      'attributes' => array('title' => t('Home')),
+      'tab' => array(
+        'title' => t('Home'),
+        'href' => '<front>',
+        'html' => FALSE,
+      ),
+    ),
+    'administration' => array(
+      'tab' => array(
+        'title' => t('Menu'),
+        'href' => '',
+        'html' => FALSE,
+      ),
+      'tray' => $menu,
     ),
-  );
-  $build['toolbar_home'] = array(
-    '#theme' => 'links',
-    '#links' => $link,
-    '#attributes' => array('id' => 'toolbar-home'),
   );
 
-  // Add an anchor to be able to toggle the visibility of the drawer.
-  $build['toolbar_toggle'] = array(
-    '#theme' => 'toolbar_toggle',
-    '#collapsed' => _toolbar_is_collapsed(),
-    '#attributes' => array('class' => array('toggle')),
-  );
+  // Get groups from other modules.
+  $toolbar_groups = array_merge($toolbar_groups, module_invoke_all('toolbar_register_tabs'));
 
-  // Prepare the drawer links CSS classes.
-  $toolbar_drawer_classes = array(
-    'toolbar-drawer',
-    'clearfix',
-  );
-  if (_toolbar_is_collapsed()) {
-    $toolbar_drawer_classes[] = 'collapsed';
+  // Bar tabs.
+  $toolbar_tabs = array();
+  $toolbar_trays = array();
+  foreach ($toolbar_groups as $category => $components) {
+    if (!empty($components['tab'])) {
+      // Provide a data attribute to each bar link that associates it with its tray.
+      $components['tab']['attributes']['data-toolbar-tray'] = $category;
+      if (!isset($components['tab']['attributes']['class'])) {
+        $components['tab']['attributes']['class'] = array();
+      }
+      $components['tab']['attributes']['class'][] = 'tab';
+      $components['tab']['attributes']['role'] = 'button';
+      $toolbar_tabs[$category] = $components['tab'];
+    }
+    if (!empty($components['tray'])) {
+      $toolbar_trays[$category] = $components['tray'];
+    }
   }
-  $build['toolbar_drawer']['#type'] = 'container';
-  $build['toolbar_drawer']['#attributes']['class'] = $toolbar_drawer_classes;
+
+  // Assign the tabs to the build.
+  $build['toolbar_tabs'] = array(
+    '#theme' => 'links',
+    '#links' => $toolbar_tabs,
+    '#attributes' => array(
+      'class' => array('bar', 'clearfix'),
+    ),
+    '#heading' => array('text' => t('Drupal toolbar'), 'level' => 'h2', 'class' => 'element-invisible'),
+  );
+  //// Assign the tabs to the build.
+  $build['toolbar_trays'] = array(
+    '#theme' => 'toolbar_tray',
+    '#trays' => $toolbar_trays,
+  );
 
   return $build;
 }
@@ -280,14 +227,13 @@ function toolbar_get_menu_tree() {
   $tree = array();
   $admin_link = db_query('SELECT * FROM {menu_links} WHERE menu_name = :menu_name AND module = :module AND link_path = :path', array(':menu_name' => 'admin', ':module' => 'system', ':path' => 'admin'))->fetchAssoc();
   if ($admin_link) {
-    $tree = menu_build_tree('admin', array(
-      'expanded' => array($admin_link['mlid']),
-      'min_depth' => $admin_link['depth'] + 1,
-      'max_depth' => $admin_link['depth'] + 1,
-    ));
+    $tree = menu_tree_all_data('admin');
   }
-
-  return $tree;
+  // Return the sub-menus of the admin menu root.
+  foreach ($tree as $key => $menu) {
+    return (!empty($tree[$key]['below'])) ? $tree[$key]['below'] : array();
+  }
+  return array();
 }
 
 /**
@@ -299,34 +245,31 @@ function toolbar_get_menu_tree() {
  * @return
  *   An array of links as defined above.
  */
-function toolbar_menu_navigation_links($tree) {
-  $links = array();
-  foreach ($tree as $item) {
-    if (!$item['link']['hidden'] && $item['link']['access']) {
-      // Make sure we have a path specific ID in place, so we can attach icons
-      // and behaviors to the items.
-      $id = str_replace(array('/', '<', '>'), array('-', '', ''), $item['link']['href']);
+function toolbar_menu_navigation_links(&$tree) {
+  foreach ($tree as $key => $item) {
+    // Configure sub-items.
+    if (!empty($item['below'])) {
+      toolbar_menu_navigation_links($tree[$key]['below']);
+    }
+    // Make sure we have a path specific ID in place, so we can attach icons
+    // and behaviors to the items.
+    $tree[$key]['link']['localized_options']['attributes']['id'] = 'toolbar-link-' . str_replace(array('/', '<', '>'), array('-', '', ''), $item['link']['link_path']);
+  }
+}
 
-      $link = $item['link']['localized_options'];
-      $link['href'] = $item['link']['href'];
-      // Add icon placeholder.
-      $link['title'] = '<span class="icon"></span>' . check_plain($item['link']['title']);
-      // Add admin link ID.
-      $link['attributes'] = array('id' => 'toolbar-link-' . $id);
-      if (!empty($item['link']['description'])) {
-        $link['title'] .= ' <span class="element-invisible">(' . $item['link']['description'] . ')</span>';
-        $link['attributes']['title'] = $item['link']['description'];
-      }
-      $link['html'] = TRUE;
+/**
+ *
+ */
+function theme_toolbar_tray($trays) {
+  $output = '';
 
-      $class = ' path-' . $id;
-      if (toolbar_in_active_trail($item['link']['href'])) {
-        $class .= ' active-trail';
-      }
-      $links['menu-' . $item['link']['mlid'] . $class] = $link;
-    }
+  foreach ($trays['element']['#trays'] as $key => $tray) {
+    $output .= '<nav id="toolbar-tray-' . $key . '" class="tray ' .  $key . '" data-toolbar-tray="' . $key . '"><div class="lining slider clearfix">';
+    $output .= render($tray);
+    $output .= '</div></nav>';
   }
-  return $links;
+
+  return $output;
 }
 
 /**
@@ -365,13 +308,17 @@ function toolbar_library_info() {
     'title' => 'Toolbar',
     'version' => VERSION,
     'js' => array(
-      drupal_get_path('module', 'toolbar') . '/toolbar.js' => array(),
+      drupal_get_path('module', 'toolbar') . '/js/toolbar.js' => array(),
     ),
     'css' => array(
-      drupal_get_path('module', 'toolbar') . '/toolbar.css',
+      drupal_get_path('module', 'toolbar') . '/css/toolbar.base.css',
+      drupal_get_path('module', 'toolbar') . '/css/toolbar.theme.css',
+      drupal_get_path('module', 'toolbar') . '/css/toolbar.icons.css',
     ),
     'dependencies' => array(
+      array('system', 'matchMedia'),
       array('system', 'jquery'),
+      array('system', 'underscore'),
       array('system', 'drupal'),
       array('system', 'drupalSettings'),
       array('system', 'jquery.once'),
diff --git a/core/modules/toolbar/toolbar.png b/core/modules/toolbar/toolbar.png
deleted file mode 100644
index f2c7f35..0000000
--- a/core/modules/toolbar/toolbar.png
+++ /dev/null
@@ -1,4 +0,0 @@
-PNG
-
-   IHDR   d   9   ,~O   PLTE   fffffffffffffff   ===>>>GGGHHHPPPQQQXXXfffs   tRNS  O^z  IDATx[O@o
-VK71i}.f.If b d ` pg 01\ .  \ԌP`MR hU l DB(gŰ8!+2VL,Z$MNY16:V,fKzAǊZ?6se]OԍI_"[Wߺ,	}8D!yP,G9BUĩ%W'X"_U!N<*"    IENDB`
\ No newline at end of file
diff --git a/core/modules/user/user.css b/core/modules/user/user.css
index 866ee40..3a727c0 100644
--- a/core/modules/user/user.css
+++ b/core/modules/user/user.css
@@ -88,3 +88,14 @@ div.password-suggestions ul {
 .profile dd {
   margin: 0 0 1em 0;
 }
+
+/**
+ * Toolbar icon.
+ */
+.toolbar-main .user .tab {
+  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iNDkuOTk5NSIgeTE9IjQuMDc3MSIgeDI9IjQ5Ljk5OTUiIHkyPSI4OC44ODc0Ij4NCgk8c3RvcCAgb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojQ0NDQ0NDIi8+DQoJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6Izk5OTk5OSIvPg0KPC9saW5lYXJHcmFkaWVudD4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSJ1cmwoI1NWR0lEXzFfKSIgZD0iTTI4LjQyNCwyNy42NTNjMCwxMS45NjMsOS42NTMsMjEuNjUzLDIxLjU3NiwyMS42NTMNCgljMTEuOTIyLDAsMjEuNTc0LTkuNjksMjEuNTc0LTIxLjY1M0M3MS41NzQsMTUuNjkyLDYxLjkyMiw2LDUwLDZDMzguMDc3LDYsMjguNDI0LDE1LjY5MiwyOC40MjQsMjcuNjUzeiBNMTAwLDkwLjYxNQ0KCWMwLTIwLjM0Ni0xLjExNS0zNS40MjMtNTAtMzUuNDIzYy00OC44MDgsMC01MCwxNC4zMDctNTAsMzUuNDIzSDEwMHoiLz4NCjwvc3ZnPg0K);
+}
+.toolbar-main .user .tab:active,
+.toolbar-main .user.active .tab {
+  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iNTAiIHkxPSI5Ni45MjI5IiB4Mj0iNTAiIHkyPSIxMi4xMTI2IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIC0xIDAgMTAxKSI+DQoJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0ZGRkZGRiIvPg0KCTxzdG9wICBvZmZzZXQ9IjAuOTkwMSIgc3R5bGU9InN0b3AtY29sb3I6I0U1RTVFNSIvPg0KPC9saW5lYXJHcmFkaWVudD4NCjxwYXRoIGZpbGw9InVybCgjU1ZHSURfMV8pIiBkPSJNMjguNDI0LDI3LjY1M2MwLDExLjk2Myw5LjY1MywyMS42NTMsMjEuNTc2LDIxLjY1M2MxMS45MjIsMCwyMS41NzQtOS42OSwyMS41NzQtMjEuNjUzDQoJQzcxLjU3NCwxNS42OTIsNjEuOTIyLDYsNTAsNkMzOC4wNzcsNiwyOC40MjQsMTUuNjkyLDI4LjQyNCwyNy42NTN6IE0xMDAsOTAuNjE1YzAtMjAuMzQ2LTEuMTE1LTM1LjQyNC01MC0zNS40MjQNCgljLTQ4LjgwOCwwLTUwLDE0LjMwOC01MCwzNS40MjRIMTAweiIvPg0KPC9zdmc+DQo=);
+}
diff --git a/core/modules/user/user.module b/core/modules/user/user.module
index b7ac23d..b94a799 100644
--- a/core/modules/user/user.module
+++ b/core/modules/user/user.module
@@ -3109,6 +3109,70 @@ function user_file_download_access($field, EntityInterface $entity, File $file)
 }
 
 /**
+ * Implements hook_toolbar_register_tabs().
+ */
+function user_toolbar_register_tabs() {
+  global $user;
+
+  $tab['user'] = array(
+    'tab' => array(
+      'title' => user_format_name($user),
+      'href' => '',
+      'html' => FALSE,
+    ),
+    'tray' => array(
+      '#pre_render' => array('user_toolbar_pre_render'),
+    ),
+  );
+
+  return $tab;
+}
+
+/**
+ * Pre-render function for adding user account actions to the toolbar.
+ */
+function user_toolbar_pre_render($toolbar) {
+  global $user;
+
+  // Add logout & user account links or login link.
+  if ($user->uid) {
+    $links = array(
+      'logout' => array(
+        'title' => t('Log out'),
+        'href' => 'user/logout',
+      ),
+      'account' => array(
+        'title' => t('View profile'),
+        'href' => 'user',
+        'html' => TRUE,
+        'attributes' => array(
+          'title' => t('User account'),
+        ),
+      ),
+    );
+  }
+  else {
+     $links = array(
+      'login' => array(
+        'title' => t('Log in'),
+        'href' => 'user',
+      ),
+    );
+  }
+
+  $user_links = array(
+    '#theme' => 'links__toolbar_user',
+    '#links' => $links,
+    '#attributes' => array(
+      'class' => array('toolbar-list'),
+    ),
+    '#heading' => array('text' => t('User account actions'), 'level' => 'h2', 'class' => 'element-invisible'),
+  );
+
+  return $user_links;
+}
+
+/**
  * Implements hook_library_info().
  */
 function user_library_info() {
-- 
1.7.10.4

