diff --git a/core/modules/block/custom_block/src/Tests/CustomBlockListTest.php b/core/modules/block/custom_block/src/Tests/CustomBlockListTest.php
index 8bded49..5b34c83 100644
--- a/core/modules/block/custom_block/src/Tests/CustomBlockListTest.php
+++ b/core/modules/block/custom_block/src/Tests/CustomBlockListTest.php
@@ -42,11 +42,11 @@ public function testListing() {
     $this->assertTitle(t('Custom block library') . ' | Drupal');
 
     // Test for the table.
-    $element = $this->xpath('//div[@class="l-content"]//table');
+    $element = $this->xpath('//div[@class="layout-content"]//table');
     $this->assertTrue($element, 'Configuration entity list table found.');
 
     // Test the table header.
-    $elements = $this->xpath('//div[@class="l-content"]//table/thead/tr/th');
+    $elements = $this->xpath('//div[@class="layout-content"]//table/thead/tr/th');
     $this->assertEqual(count($elements), 2, 'Correct number of table header cells found.');
 
     // Test the contents of each th cell.
@@ -72,7 +72,7 @@ public function testListing() {
     $this->assertFieldByXpath('//td', $label, 'Label found for added block.');
 
     // Check the number of table row cells.
-    $elements = $this->xpath('//div[@class="l-content"]//table/tbody/tr[@class="odd"]/td');
+    $elements = $this->xpath('//div[@class="layout-content"]//table/tbody/tr[@class="odd"]/td');
     $this->assertEqual(count($elements), 2, 'Correct number of table row cells found.');
     // Check the contents of each row cell. The first cell contains the label,
     // the second contains the machine name, and the third contains the
diff --git a/core/modules/config/src/Tests/ConfigEntityListTest.php b/core/modules/config/src/Tests/ConfigEntityListTest.php
index 71b7a4d..e55f84d 100644
--- a/core/modules/config/src/Tests/ConfigEntityListTest.php
+++ b/core/modules/config/src/Tests/ConfigEntityListTest.php
@@ -153,11 +153,11 @@ function testListUI() {
     $this->assertTitle('Test configuration | Drupal');
 
     // Test for the table.
-    $element = $this->xpath('//div[@class="l-content"]//table');
+    $element = $this->xpath('//div[@class="layout-content"]//table');
     $this->assertTrue($element, 'Configuration entity list table found.');
 
     // Test the table header.
-    $elements = $this->xpath('//div[@class="l-content"]//table/thead/tr/th');
+    $elements = $this->xpath('//div[@class="layout-content"]//table/thead/tr/th');
     $this->assertEqual(count($elements), 3, 'Correct number of table header cells found.');
 
     // Test the contents of each th cell.
@@ -167,7 +167,7 @@ function testListUI() {
     }
 
     // Check the number of table row cells.
-    $elements = $this->xpath('//div[@class="l-content"]//table/tbody/tr[@class="odd"]/td');
+    $elements = $this->xpath('//div[@class="layout-content"]//table/tbody/tr[@class="odd"]/td');
     $this->assertEqual(count($elements), 3, 'Correct number of table row cells found.');
 
     // Check the contents of each row cell. The first cell contains the label,
diff --git a/core/modules/system/templates/maintenance-page.html.twig b/core/modules/system/templates/maintenance-page.html.twig
index 3b5a59e..20ff46e 100644
--- a/core/modules/system/templates/maintenance-page.html.twig
+++ b/core/modules/system/templates/maintenance-page.html.twig
@@ -11,7 +11,7 @@
  * @ingroup themeable
  */
 #}
-<div class="l-container">
+<div class="layout-container">
 
   <header role="banner">
     {% if logo %}
@@ -47,15 +47,15 @@
   </main>
 
   {% if page.sidebar_first %}
-    <aside class="l-sidebar-first" role="complementary">
+    <aside class="layout-sidebar-first" role="complementary">
       {{ page.sidebar_first }}
-    </aside>{# /.l-sidebar-first #}
+    </aside>{# /.layout-sidebar-first #}
   {% endif %}
 
   {% if page.sidebar_second %}
-    <aside class="l-sidebar-second" role="complementary">
+    <aside class="layout-sidebar-second" role="complementary">
       {{ page.sidebar_second }}
-    </aside>{# /.l-sidebar-second #}
+    </aside>{# /.layout-sidebar-second #}
   {% endif %}
 
   {% if page.footer %}
@@ -64,4 +64,5 @@
     </footer>
   {% endif %}
 
-</div>{# /.l-container #}
+
+</div>{# /.layout-container #}
diff --git a/core/modules/system/templates/page.html.twig b/core/modules/system/templates/page.html.twig
index 1f6f916..e0272df 100644
--- a/core/modules/system/templates/page.html.twig
+++ b/core/modules/system/templates/page.html.twig
@@ -63,7 +63,7 @@
  * @ingroup themeable
  */
 #}
-<div class="l-container">
+<div class="layout-container">
 
   <header role="banner">
     {% if logo %}
@@ -111,7 +111,7 @@
   <main role="main">
     <a id="main-content"></a>{# link is in html.html.twig #}
 
-    <div class="l-content">
+    <div class="layout-content">
       {{ page.highlighted }}
 
       {{ title_prefix }}
@@ -129,16 +129,16 @@
       {{ page.content }}
 
       {{ feed_icons }}
-    </div>{# /.l-content #}
+    </div>{# /.layout-content #}
 
     {% if page.sidebar_first %}
-      <aside class="l-sidebar-first" role="complementary">
+      <aside class="layout-sidebar-first" role="complementary">
         {{ page.sidebar_first }}
       </aside>
     {% endif %}
 
     {% if page.sidebar_second %}
-      <aside class="l-sidebar-second" role="complementary">
+      <aside class="layout-sidebar-second" role="complementary">
         {{ page.sidebar_second }}
       </aside>
     {% endif %}
@@ -151,4 +151,4 @@
     </footer>
   {% endif %}
 
-</div>{# /.l-container #}
+</div>{# /.layout-container #}
diff --git a/core/themes/bartik/bartik.theme b/core/themes/bartik/bartik.theme
index 1532b9f..f0666ab 100644
--- a/core/themes/bartik/bartik.theme
+++ b/core/themes/bartik/bartik.theme
@@ -21,18 +21,18 @@ function bartik_preprocess_page(&$variables) {
   $attributes = $page_object->getBodyAttributes();
   $classes = $attributes['class'];
   if (!empty($variables['page']['sidebar_first']) && !empty($variables['page']['sidebar_second'])) {
-    $classes[] = 'two-sidebars';
+    $classes[] = 'layout-two-sidebars';
   }
   elseif (!empty($variables['page']['sidebar_first'])) {
-    $classes[] = 'one-sidebar';
-    $classes[] = 'sidebar-first';
+    $classes[] = 'layout-one-sidebar';
+    $classes[] = 'layout-sidebar-first';
   }
   elseif (!empty($variables['page']['sidebar_second'])) {
-    $classes[] = 'one-sidebar';
-    $classes[] = 'sidebar-second';
+    $classes[] = 'layout-one-sidebar';
+    $classes[] = 'layout-sidebar-second';
   }
   else {
-    $classes[] = 'no-sidebars';
+    $classes[] = 'layout-no-sidebars';
   }
 
   if (!empty($variables['page']['featured'])) {
diff --git a/core/themes/bartik/css/layout.css b/core/themes/bartik/css/layout.css
index 74f015b..1fadfc2 100644
--- a/core/themes/bartik/css/layout.css
+++ b/core/themes/bartik/css/layout.css
@@ -188,30 +188,30 @@ body,
   [dir="rtl"] .region-footer-fourthcolumn {
     float: right;
   }
-  .two-sidebars #content {
+  .layout-two-sidebars #content {
     margin-left: 25%;
     margin-right: 25%;
     width: 50%;
   }
-  .one-sidebar #content {
+  .layout-one-sidebar #content {
     width: 75%;
   }
-  .no-sidebars #content {
+  .layout-no-sidebars #content {
     width: 100%;
   }
-  .sidebar-first #content {
+  .layout-sidebar-first #content {
     margin-left: 25%; /* LTR */
     margin-right: 0; /* LTR */
   }
-  [dir="rtl"] .sidebar-first #content {
+  [dir="rtl"] .layout-sidebar-first #content {
     margin-left: 0;
     margin-right: 25%;
   }
-  .sidebar-second #content {
+  .layout-sidebar-second #content {
     margin-right: 25%; /* LTR */
     margin-left: 0; /* LTR */
   }
-  [dir="rtl"] .sidebar-second #content {
+  [dir="rtl"] .layout-sidebar-second #content {
     margin-right: 0;
     margin-left: 25%;
   }
diff --git a/core/themes/bartik/css/style.css b/core/themes/bartik/css/style.css
index 66406aa..119ef78 100644
--- a/core/themes/bartik/css/style.css
+++ b/core/themes/bartik/css/style.css
@@ -1564,13 +1564,13 @@ ul.vertical-tabs-list {
 .comment-form input.form-file {
   width: auto;
 }
-.no-sidebars .comment-form .form-text {
+.layout-no-sidebars .comment-form .form-text {
   width: 800px;
 }
-.one-sidebar .comment-form .form-text {
+.layout-one-sidebar .comment-form .form-text {
   width: 500px;
 }
-.two-sidebars .comment-form .form-text {
+.layout-two-sidebars .comment-form .form-text {
   width: 320px;
 }
 .comment-form .form-item .description {
diff --git a/core/themes/seven/seven.theme b/core/themes/seven/seven.theme
index c3e7a32..2bd9b0a 100644
--- a/core/themes/seven/seven.theme
+++ b/core/themes/seven/seven.theme
@@ -20,11 +20,11 @@ function seven_preprocess_page(&$variables) {
   // Add information about the number of sidebars.
 
   if (!empty($variables['page']['sidebar_first'])) {
-    $classes[] = 'one-sidebar';
-    $classes[] = 'sidebar-first';
+    $classes[] = 'layout-one-sidebar';
+    $classes[] = 'layout-sidebar-first';
   }
   else {
-    $classes[] = 'no-sidebars';
+    $classes[] = 'layout-no-sidebars';
   }
   $attributes['class'] = $classes;
 
diff --git a/core/themes/stark/css/layout.css b/core/themes/stark/css/layout.css
index b91e953..123de17 100644
--- a/core/themes/stark/css/layout.css
+++ b/core/themes/stark/css/layout.css
@@ -9,7 +9,7 @@
  * This layout method works reasonably well, but shouldn't be used on a
  * production site because it can break. For example, if an over-large image
  * (one that is wider than 20% of the viewport) is in the left sidebar, the
- * image will overlap with the .l-content to the right.
+ * image will overlap with the .layout-content to the right.
  */
 img {
   height: auto;
@@ -21,80 +21,80 @@ main:after {
   clear: both;
 }
 
-.l-content,
-.l-sidebar-first,
-.l-sidebar-second {
+.layout-content,
+.layout-sidebar-first,
+.layout-sidebar-second {
   display: inline;
   position: relative;
 }
 
 @media all and (min-width: 480px) and (max-width: 959px) {
-  .l-content {
+  .layout-content {
     width: 67%;
     float: right; /* LTR */
   }
-  [dir="rtl"] .l-content {
+  [dir="rtl"] .layout-content {
     float: left;
   }
 
-  .l-sidebar-first {
+  .layout-sidebar-first {
     width: 33%;
     float: left; /* LTR */
   }
-  [dir="rtl"] .l-sidebar-first {
+  [dir="rtl"] .layout-sidebar-first {
     float: right;
   }
 
-  .l-sidebar-second {
+  .layout-sidebar-second {
     float: right; /* LTR */
     clear: both;
     width: 100%;
   }
-  [dir="rtl"] .l-sidebar-second {
+  [dir="rtl"] .layout-sidebar-second {
     float: right;
     clear: right;
   }
 
-  .l-sidebar-second .block {
+  .layout-sidebar-second .block {
     float: left; /* LTR */
     width: 33%;
   }
-  [dir="rtl"] .l-sidebar-second .block {
+  [dir="rtl"] .layout-sidebar-second .block {
     float: right;
   }
-  .l-sidebar-second .block:nth-child(3n+1) {
+  .layout-sidebar-second .block:nth-child(3n+1) {
     clear: both;
   }
 }
 
 @media all and (min-width: 960px) {
-  .l-content {
+  .layout-content {
     width: 60%;
     float: left; /* LTR */
     left: 20%; /* LTR */
   }
-  [dir="rtl"] .l-content {
+  [dir="rtl"] .layout-content {
     float: right;
     left: 0;
     right: 20%;
   }
 
-  .l-sidebar-first {
+  .layout-sidebar-first {
     width: 20%;
     float: left; /* LTR */
     left: -60%; /* LTR */
   }
-  [dir="rtl"] .l-sidebar-first {
+  [dir="rtl"] .layout-sidebar-first {
     float: right;
     left: 0;
     right: -60%;
   }
 
-  .l-sidebar-second {
+  .layout-sidebar-second {
     float: right; /* LTR */
     width: 20%;
   }
-  [dir="rtl"] .l-sidebar-second {
+  [dir="rtl"] .layout-sidebar-second {
     float: left;
   }
 }