diff --git a/core/includes/menu.inc b/core/includes/menu.inc
index 251b81d..17c6caa 100644
--- a/core/includes/menu.inc
+++ b/core/includes/menu.inc
@@ -35,7 +35,7 @@ function template_preprocess_menu_local_task(&$variables) {
   $link_text = $link['title'];
 
   if (!empty($variables['element']['#active'])) {
-    $variables['attributes']['class'] = array('active');
+    $variables['attributes']['class'] = array('is-active');
 
     // Add text to indicate active tab for non-visual users.
     $active = String::format('<span class="visually-hidden">@label</span>', array('@label' => t('(active tab)')));
diff --git a/core/includes/tablesort.inc b/core/includes/tablesort.inc
index d417975..5db3904 100644
--- a/core/includes/tablesort.inc
+++ b/core/includes/tablesort.inc
@@ -48,7 +48,7 @@ function tablesort_header(&$cell_content, array &$cell_attributes, array $header
       // http://www.w3.org/TR/wai-aria/states_and_properties#aria-sort
       $cell_attributes['aria-sort'] = ($ts['sort'] == 'asc') ? 'ascending' : 'descending';
       $ts['sort'] = (($ts['sort'] == 'asc') ? 'desc' : 'asc');
-      $cell_attributes['class'][] = 'active';
+      $cell_attributes['class'][] = 'is-active';
       $tablesort_indicator = array(
         '#theme' => 'tablesort_indicator',
         '#style' => $ts['sort'],
diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index 7761897..aa05d06 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -1144,7 +1144,7 @@ function template_preprocess_maintenance_task_list(&$variables) {
     $variables['tasks'][$k]['item'] = $item;
     $variables['tasks'][$k]['attributes'] = new Attribute();
     if ($active == $k) {
-      $variables['tasks'][$k]['attributes']->addClass('active');
+      $variables['tasks'][$k]['attributes']->addClass('is-active');
       $variables['tasks'][$k]['status'] = t('active');
       $done = FALSE;
     }
diff --git a/core/lib/Drupal/Core/Menu/LocalTaskDefault.php b/core/lib/Drupal/Core/Menu/LocalTaskDefault.php
index 615eaa4..ecef19c 100644
--- a/core/lib/Drupal/Core/Menu/LocalTaskDefault.php
+++ b/core/lib/Drupal/Core/Menu/LocalTaskDefault.php
@@ -113,8 +113,8 @@ public function getWeight() {
   public function getOptions(RouteMatchInterface $route_match) {
     $options = $this->pluginDefinition['options'];
     if ($this->active) {
-      if (empty($options['attributes']['class']) || !in_array('active', $options['attributes']['class'])) {
-        $options['attributes']['class'][] = 'active';
+      if (empty($options['attributes']['class']) || !in_array('is-active', $options['attributes']['class'])) {
+        $options['attributes']['class'][] = 'is-active';
       }
     }
     return (array) $options;
diff --git a/core/misc/active-link.js b/core/misc/active-link.js
index 5bd12eb..c33c0ce 100644
--- a/core/misc/active-link.js
+++ b/core/misc/active-link.js
@@ -8,7 +8,7 @@
   "use strict";
 
   /**
-   * Append active class.
+   * Append is-active class.
    *
    * The link is only active if its path corresponds to the current path, the
    * language of the linked path is equal to the current language, and if the
@@ -16,8 +16,8 @@
    * same request with different query parameters may yield a different page
    * (e.g. pagers, exposed View filters).
    *
-   * Does not discriminate based on element type, so allows you to set the active
-   * class on any element: a, li…
+   * Does not discriminate based on element type, so allows you to set the
+   * is-active class on any element: a, li…
    */
   Drupal.behaviors.activeLinks = {
     attach: function (context) {
@@ -47,14 +47,14 @@
       // Query the DOM.
       var activeLinks = context.querySelectorAll(selectors.join(','));
       for (var i = 0, il = activeLinks.length; i < il; i += 1) {
-        activeLinks[i].classList.add('active');
+        activeLinks[i].classList.add('is-active');
       }
     },
     detach: function (context, settings, trigger) {
       if (trigger === 'unload') {
-        var activeLinks = context.querySelectorAll('[data-drupal-link-system-path].active');
+        var activeLinks = context.querySelectorAll('[data-drupal-link-system-path].is-active');
         for (var i = 0, il = activeLinks.length; i < il; i += 1) {
-          activeLinks[i].classList.remove('active');
+          activeLinks[i].classList.remove('is-active');
         }
       }
     }
diff --git a/core/modules/contextual/css/contextual.icons.theme.css b/core/modules/contextual/css/contextual.icons.theme.css
index 70363a7..baea472 100644
--- a/core/modules/contextual/css/contextual.icons.theme.css
+++ b/core/modules/contextual/css/contextual.icons.theme.css
@@ -9,8 +9,9 @@
 .toolbar-bar .toolbar-icon-edit:before {
   background-image: url(../../../misc/icons/bebebe/pencil.svg);
 }
+
 .toolbar-bar .toolbar-icon-edit:active:before,
-.toolbar-bar .toolbar-icon-edit.active:before {
+.toolbar-bar .toolbar-icon-edit.is-active:before {
   background-image: url(../../../misc/icons/ffffff/pencil.svg);
 }
 
diff --git a/core/modules/contextual/css/contextual.toolbar.css b/core/modules/contextual/css/contextual.toolbar.css
index bda844c..3c82a15 100644
--- a/core/modules/contextual/css/contextual.toolbar.css
+++ b/core/modules/contextual/css/contextual.toolbar.css
@@ -19,7 +19,7 @@
 [dir="rtl"] .toolbar .toolbar-bar .contextual-toolbar-tab .toolbar-item {
   padding-right: 1.3333em;
 }
-.toolbar .toolbar-bar .contextual-toolbar-tab .toolbar-item.active {
+.toolbar .toolbar-bar .contextual-toolbar-tab .toolbar-item.is-active {
   background-image:-webkit-linear-gradient(rgb(78,159,234) 0%, rgb(69,132,221) 100%);
   background-image:linear-gradient(rgb(78,159,234) 0%,rgb(69,132,221) 100%);
 }
diff --git a/core/modules/contextual/js/toolbar/views/VisualView.js b/core/modules/contextual/js/toolbar/views/VisualView.js
index 9b44451..41b095f 100644
--- a/core/modules/contextual/js/toolbar/views/VisualView.js
+++ b/core/modules/contextual/js/toolbar/views/VisualView.js
@@ -44,7 +44,7 @@
       // Render the visibility.
       this.$el.toggleClass('hidden', !this.model.get('isVisible'));
       // Render the state.
-      this.$el.find('button').toggleClass('active', !this.model.get('isViewing'));
+      this.$el.find('button').toggleClass('is-active', !this.model.get('isViewing'));
 
       return this;
     },
diff --git a/core/modules/language/src/Tests/LanguageSwitchingTest.php b/core/modules/language/src/Tests/LanguageSwitchingTest.php
index 1c39a88..c9ff8d0 100644
--- a/core/modules/language/src/Tests/LanguageSwitchingTest.php
+++ b/core/modules/language/src/Tests/LanguageSwitchingTest.php
@@ -140,14 +140,14 @@ protected function doTestLanguageBlockAnonymous($block_label) {
     foreach ($language_switcher->ul->li as $link) {
       $classes = explode(" ", (string) $link['class']);
       list($langcode) = array_intersect($classes, array('en', 'fr'));
-      if (in_array('active', $classes)) {
+      if (in_array('is-active', $classes)) {
         $links['active'][] = $langcode;
       }
       else {
         $links['inactive'][] = $langcode;
       }
       $anchor_classes = explode(" ", (string) $link->a['class']);
-      if (in_array('active', $anchor_classes)) {
+      if (in_array('is-active', $anchor_classes)) {
         $anchors['active'][] = $langcode;
       }
       else {
@@ -359,17 +359,17 @@ protected function doTestLanguageLinkActiveClassAnonymous() {
 
     // Language code 'none' link should be active.
     $langcode = 'none';
-    $links = $this->xpath('//a[@id = :id and contains(@class, :class)]', array(':id' => 'no_lang_link', ':class' => 'active'));
+    $links = $this->xpath('//a[@id = :id and contains(@class, :class)]', array(':id' => 'no_lang_link', ':class' => 'is-active'));
     $this->assertTrue(isset($links[0]), t('A link generated by :function to the current :language page with langcode :langcode is marked active.', array(':function' => $function_name, ':language' => $current_language, ':langcode' => $langcode)));
 
     // Language code 'en' link should be active.
     $langcode = 'en';
-    $links = $this->xpath('//a[@id = :id and contains(@class, :class)]', array(':id' => 'en_link', ':class' => 'active'));
+    $links = $this->xpath('//a[@id = :id and contains(@class, :class)]', array(':id' => 'en_link', ':class' => 'is-active'));
     $this->assertTrue(isset($links[0]), t('A link generated by :function to the current :language page with langcode :langcode is marked active.', array(':function' => $function_name, ':language' => $current_language, ':langcode' => $langcode)));
 
     // Language code 'fr' link should not be active.
     $langcode = 'fr';
-    $links = $this->xpath('//a[@id = :id and not(contains(@class, :class))]', array(':id' => 'fr_link', ':class' => 'active'));
+    $links = $this->xpath('//a[@id = :id and not(contains(@class, :class))]', array(':id' => 'fr_link', ':class' => 'is-active'));
     $this->assertTrue(isset($links[0]), t('A link generated by :function to the current :language page with langcode :langcode is NOT marked active.', array(':function' => $function_name, ':language' => $current_language, ':langcode' => $langcode)));
 
     // Test links generated by _l() on a French page.
@@ -378,17 +378,17 @@ protected function doTestLanguageLinkActiveClassAnonymous() {
 
     // Language code 'none' link should be active.
     $langcode = 'none';
-    $links = $this->xpath('//a[@id = :id and contains(@class, :class)]', array(':id' => 'no_lang_link', ':class' => 'active'));
+    $links = $this->xpath('//a[@id = :id and contains(@class, :class)]', array(':id' => 'no_lang_link', ':class' => 'is-active'));
     $this->assertTrue(isset($links[0]), t('A link generated by :function to the current :language page with langcode :langcode is marked active.', array(':function' => $function_name, ':language' => $current_language, ':langcode' => $langcode)));
 
     // Language code 'en' link should not be active.
     $langcode = 'en';
-    $links = $this->xpath('//a[@id = :id and not(contains(@class, :class))]', array(':id' => 'en_link', ':class' => 'active'));
+    $links = $this->xpath('//a[@id = :id and not(contains(@class, :class))]', array(':id' => 'en_link', ':class' => 'is-active'));
     $this->assertTrue(isset($links[0]), t('A link generated by :function to the current :language page with langcode :langcode is NOT marked active.', array(':function' => $function_name, ':language' => $current_language, ':langcode' => $langcode)));
 
     // Language code 'fr' link should be active.
     $langcode = 'fr';
-    $links = $this->xpath('//a[@id = :id and contains(@class, :class)]', array(':id' => 'fr_link', ':class' => 'active'));
+    $links = $this->xpath('//a[@id = :id and contains(@class, :class)]', array(':id' => 'fr_link', ':class' => 'is-active'));
     $this->assertTrue(isset($links[0]), t('A link generated by :function to the current :language page with langcode :langcode is marked active.', array(':function' => $function_name, ':language' => $current_language, ':langcode' => $langcode)));
   }
 
diff --git a/core/modules/language/src/Tests/LanguageUILanguageNegotiationTest.php b/core/modules/language/src/Tests/LanguageUILanguageNegotiationTest.php
index f801b6a..f27eb2c 100644
--- a/core/modules/language/src/Tests/LanguageUILanguageNegotiationTest.php
+++ b/core/modules/language/src/Tests/LanguageUILanguageNegotiationTest.php
@@ -410,7 +410,7 @@ function testUrlLanguageFallback() {
     // Check that the language switcher active link matches the given browser
     // language.
     $args = array(':id' => 'block-test-language-block', ':url' => \Drupal::url('<front>') . $langcode_browser_fallback);
-    $fields = $this->xpath('//div[@id=:id]//a[@class="language-link active" and starts-with(@href, :url)]', $args);
+    $fields = $this->xpath('//div[@id=:id]//a[@class="language-link is-active" and starts-with(@href, :url)]', $args);
     $this->assertTrue($fields[0] == $languages[$langcode_browser_fallback]->getName(), 'The browser language is the URL active language');
 
     // Check that URLs are rewritten using the given browser language.
diff --git a/core/modules/shortcut/css/shortcut.icons.theme.css b/core/modules/shortcut/css/shortcut.icons.theme.css
index e15f7d8..54569c2 100644
--- a/core/modules/shortcut/css/shortcut.icons.theme.css
+++ b/core/modules/shortcut/css/shortcut.icons.theme.css
@@ -10,7 +10,7 @@
   background-image: url(../../../misc/icons/bebebe/star.svg);
 }
 .toolbar-bar .toolbar-icon-shortcut:active:before,
-.toolbar-bar .toolbar-icon-shortcut.active:before {
+.toolbar-bar .toolbar-icon-shortcut.is-active:before {
   background-image: url(../../../misc/icons/ffffff/star.svg);
 }
 
diff --git a/core/modules/system/css/system.theme.css b/core/modules/system/css/system.theme.css
index f7af1e4..0f5b08f 100644
--- a/core/modules/system/css/system.theme.css
+++ b/core/modules/system/css/system.theme.css
@@ -13,10 +13,10 @@
 /**
  * Markup generated by tablesort-indicator.html.twig.
  */
-th.active img {
+th.is-active img {
   display: inline;
 }
-td.active {
+td.is-active {
   background-color: #ddd;
 }
 
@@ -361,7 +361,7 @@ ul.menu {
   padding-top: 0.2em;
   margin: 0;
 }
-ul.menu a.active {
+ul.menu a.is-active {
   color: #000;
 }
 
@@ -378,7 +378,7 @@ ul.inline li {
   list-style-type: none;
   padding: 0 0.5em;
 }
-ul.links a.active {
+ul.links a.is-active {
   color: #000;
 }
 
@@ -434,7 +434,7 @@ ul.tabs {
   padding: 0.2em 1em;
   text-decoration: none;
 }
-.tabs a.active {
+.tabs a.is-active {
   background-color: #eee;
 }
 .tabs a:focus,
diff --git a/core/modules/system/src/Controller/SystemController.php b/core/modules/system/src/Controller/SystemController.php
index 73180a0..40ca2f6 100644
--- a/core/modules/system/src/Controller/SystemController.php
+++ b/core/modules/system/src/Controller/SystemController.php
@@ -434,7 +434,7 @@ public static function setLinkActiveClass(array $element, array $context) {
         if (strlen($class) > 0) {
           $class .= ' ';
         }
-        $class .= 'active';
+        $class .= 'is-active';
         $node->setAttribute('class', $class);
 
         // Get the updated tag.
diff --git a/core/modules/system/src/Tests/Common/UrlTest.php b/core/modules/system/src/Tests/Common/UrlTest.php
index 6beeb31..69adf41 100644
--- a/core/modules/system/src/Tests/Common/UrlTest.php
+++ b/core/modules/system/src/Tests/Common/UrlTest.php
@@ -87,20 +87,20 @@ function testLinkAttributes() {
     $path = 'common-test/type-link-active-class';
 
     $this->drupalGet($path, $options_no_query);
-    $links = $this->xpath('//a[@href = :href and contains(@class, :class)]', array(':href' => Url::fromRoute('common_test.l_active_class', [], $options_no_query)->toString(), ':class' => 'active'));
+    $links = $this->xpath('//a[@href = :href and contains(@class, :class)]', array(':href' => Url::fromRoute('common_test.l_active_class', [], $options_no_query)->toString(), ':class' => 'is-active'));
     $this->assertTrue(isset($links[0]), 'A link generated by _l() to the current page is marked active.');
 
-    $links = $this->xpath('//a[@href = :href and not(contains(@class, :class))]', array(':href' => Url::fromRoute('common_test.l_active_class', [], $options_query)->toString(), ':class' => 'active'));
+    $links = $this->xpath('//a[@href = :href and not(contains(@class, :class))]', array(':href' => Url::fromRoute('common_test.l_active_class', [], $options_query)->toString(), ':class' => 'is-active'));
     $this->assertTrue(isset($links[0]), 'A link generated by _l() to the current page with a query string when the current page has no query string is not marked active.');
 
     $this->drupalGet($path, $options_query);
-    $links = $this->xpath('//a[@href = :href and contains(@class, :class)]', array(':href' => Url::fromRoute('common_test.l_active_class', [], $options_query)->toString(), ':class' => 'active'));
+    $links = $this->xpath('//a[@href = :href and contains(@class, :class)]', array(':href' => Url::fromRoute('common_test.l_active_class', [], $options_query)->toString(), ':class' => 'is-active'));
     $this->assertTrue(isset($links[0]), 'A link generated by _l() to the current page with a query string that matches the current query string is marked active.');
 
-    $links = $this->xpath('//a[@href = :href and contains(@class, :class)]', array(':href' => Url::fromRoute('common_test.l_active_class', [], $options_query_reverse)->toString(), ':class' => 'active'));
+    $links = $this->xpath('//a[@href = :href and contains(@class, :class)]', array(':href' => Url::fromRoute('common_test.l_active_class', [], $options_query_reverse)->toString(), ':class' => 'is-active'));
     $this->assertTrue(isset($links[0]), 'A link generated by _l() to the current page with a query string that has matching parameters to the current query string but in a different order is marked active.');
 
-    $links = $this->xpath('//a[@href = :href and not(contains(@class, :class))]', array(':href' => Url::fromRoute('common_test.l_active_class', [], $options_no_query)->toString(), ':class' => 'active'));
+    $links = $this->xpath('//a[@href = :href and not(contains(@class, :class))]', array(':href' => Url::fromRoute('common_test.l_active_class', [], $options_no_query)->toString(), ':class' => 'is-active'));
     $this->assertTrue(isset($links[0]), 'A link generated by _l() to the current page without a query string when the current page has a query string is not marked active.');
 
     // Test adding a custom class in links produced by _l() and #type 'link'.
diff --git a/core/modules/system/src/Tests/Menu/AssertMenuActiveTrailTrait.php b/core/modules/system/src/Tests/Menu/AssertMenuActiveTrailTrait.php
index fba46d4..125246c 100644
--- a/core/modules/system/src/Tests/Menu/AssertMenuActiveTrailTrait.php
+++ b/core/modules/system/src/Tests/Menu/AssertMenuActiveTrailTrait.php
@@ -56,7 +56,7 @@ protected function assertMenuActiveTrail($tree, $last_active) {
     $xpath .= 'li[contains(@class, :class-trail)]/a[contains(@href, :href) ' . $xpath_last_active . 'and contains(text(), :title)]';
     $args = array(
       ':class-trail' => 'menu-item--active-trail',
-      ':class-active' => 'active',
+      ':class-active' => 'is-active',
       ':href' => Url::fromUri('base:' . $active_link_path)->toString(),
       ':title' => $active_link_title,
     );
diff --git a/core/modules/system/templates/table.html.twig b/core/modules/system/templates/table.html.twig
index 0ecc34c..695b1cf 100644
--- a/core/modules/system/templates/table.html.twig
+++ b/core/modules/system/templates/table.html.twig
@@ -62,7 +62,12 @@
     <thead>
       <tr>
         {% for cell in header %}
-          <{{ cell.tag }}{{ cell.attributes }}>
+          {%
+            set cell_classes = [
+              cell.active_table_sort ? 'is-active',
+            ]
+          %}
+          <{{ cell.tag }}{{ cell.attributes.addClass(cell_classes) }}>
             {{- cell.content -}}
           </{{ cell.tag }}>
         {% endfor %}
diff --git a/core/modules/system/tests/src/Unit/Controller/SystemControllerTest.php b/core/modules/system/tests/src/Unit/Controller/SystemControllerTest.php
index c719a6a..2b8cbe3 100644
--- a/core/modules/system/tests/src/Unit/Controller/SystemControllerTest.php
+++ b/core/modules/system/tests/src/Unit/Controller/SystemControllerTest.php
@@ -288,7 +288,7 @@ public function providerTestSetLinkActiveClass() {
               if (!isset($active_attributes['class'])) {
                 $active_attributes['class'] = array();
               }
-              $active_attributes['class'][] = 'active';
+              $active_attributes['class'][] = 'is-active';
               $target_markup = $create_markup(new Attribute($active_attributes));
             }
 
diff --git a/core/modules/toolbar/css/toolbar.icons.theme.css b/core/modules/toolbar/css/toolbar.icons.theme.css
index 3f274f3..3a5549e 100644
--- a/core/modules/toolbar/css/toolbar.icons.theme.css
+++ b/core/modules/toolbar/css/toolbar.icons.theme.css
@@ -75,14 +75,14 @@
   background-image: url(../../../misc/icons/bebebe/hamburger.svg);
 }
 .toolbar-bar .toolbar-icon-menu:active:before,
-.toolbar-bar .toolbar-icon-menu.active:before {
+.toolbar-bar .toolbar-icon-menu.is-active:before {
   background-image: url(../../../misc/icons/ffffff/hamburger.svg);
 }
 .toolbar-bar .toolbar-icon-help:before {
   background-image: url(../../../misc/icons/bebebe/questionmark-disc.svg);
 }
 .toolbar-bar .toolbar-icon-help:active:before,
-.toolbar-bar .toolbar-icon-help.active:before {
+.toolbar-bar .toolbar-icon-help.is-active:before {
   background-image: url(../../../misc/icons/ffffff/questionmark-disc.svg);
 }
 
@@ -93,56 +93,56 @@
   background-image: url(../../../misc/icons/787878/file.svg);
 }
 .toolbar-icon-system-admin-content:active:before,
-.toolbar-icon-system-admin-content.active:before {
+.toolbar-icon-system-admin-content.is-active:before {
   background-image: url(../../../misc/icons/000000/file.svg);
 }
 .toolbar-icon-system-admin-structure:before {
   background-image: url(../../../misc/icons/787878/orgchart.svg);
 }
 .toolbar-icon-system-admin-structure:active:before,
-.toolbar-icon-system-admin-structure.active:before {
+.toolbar-icon-system-admin-structure.is-active:before {
   background-image: url(../../../misc/icons/000000/orgchart.svg);
 }
 .toolbar-icon-system-themes-page:before {
   background-image: url(../../../misc/icons/787878/paintbrush.svg);
 }
 .toolbar-icon-system-themes-page:active:before,
-.toolbar-icon-system-themes-page.active:before {
+.toolbar-icon-system-themes-page.is-active:before {
   background-image: url(../../../misc/icons/000000/paintbrush.svg);
 }
 .toolbar-icon-entity-user-collection:before {
   background-image: url(../../../misc/icons/787878/people.svg);
 }
 .toolbar-icon-entity-user-collection:active:before,
-.toolbar-icon-entity-user-collection.active:before {
+.toolbar-icon-entity-user-collection.is-active:before {
   background-image: url(../../../misc/icons/000000/people.svg);
 }
 .toolbar-icon-system-modules-list:before {
   background-image: url(../../../misc/icons/787878/puzzlepiece.svg);
 }
 .toolbar-icon-system-modules-list:active:before,
-.toolbar-icon-system-modules-list.active:before {
+.toolbar-icon-system-modules-list.is-active:before {
   background-image: url(../../../misc/icons/000000/puzzlepiece.svg);
 }
 .toolbar-icon-system-admin-config:before {
   background-image: url(../../../misc/icons/787878/wrench.svg);
 }
 .toolbar-icon-system-admin-config:active:before,
-.toolbar-icon-system-admin-config.active:before {
+.toolbar-icon-system-admin-config.is-active:before {
   background-image: url(../../../misc/icons/000000/wrench.svg);
 }
 .toolbar-icon-system-admin-reports:before {
   background-image: url(../../../misc/icons/787878/barchart.svg);
 }
 .toolbar-icon-system-admin-reports:active:before,
-.toolbar-icon-system-admin-reports.active:before {
+.toolbar-icon-system-admin-reports.is-active:before {
   background-image: url(../../../misc/icons/000000/barchart.svg);
 }
 .toolbar-icon-help-main:before {
   background-image: url(../../../misc/icons/787878/questionmark-disc.svg);
 }
 .toolbar-icon-help-main:active:before,
-.toolbar-icon-help-main.active:before {
+.toolbar-icon-help-main.is-active:before {
   background-image: url(../../../misc/icons/000000/questionmark-disc.svg);
 }
 .toolbar .toolbar-bar .toolbar-icon:before {
diff --git a/core/modules/toolbar/css/toolbar.menu.css b/core/modules/toolbar/css/toolbar.menu.css
index e857beb..09a4135 100644
--- a/core/modules/toolbar/css/toolbar.menu.css
+++ b/core/modules/toolbar/css/toolbar.menu.css
@@ -29,7 +29,7 @@
   margin-right: 0;
 }
 .toolbar .toolbar-tray .menu-item--active-trail > .toolbar-box a,
-.toolbar .toolbar-tray a.active {
+.toolbar .toolbar-tray a.is-active {
   color: #000;
   font-weight: bold;
 }
diff --git a/core/modules/toolbar/css/toolbar.module.css b/core/modules/toolbar/css/toolbar.module.css
index 2ab2e4d..771b705 100644
--- a/core/modules/toolbar/css/toolbar.module.css
+++ b/core/modules/toolbar/css/toolbar.module.css
@@ -183,21 +183,21 @@ body.toolbar-fixed .toolbar .toolbar-tray-horizontal {
 /* When the configured standard breakpoint is active and the tray is in a
  * vertical position, the tray does not scroll with the page. The contents of
  * the tray scroll within the confines of the viewport. */
-.toolbar .toolbar-tray-vertical.active,
+.toolbar .toolbar-tray-vertical.is-active,
 body.toolbar-fixed .toolbar .toolbar-tray-vertical {
   height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
   position: fixed;
 }
-.toolbar .toolbar-tray.active {
+.toolbar .toolbar-tray.is-active {
   display: block;
 }
 /* Bring the tray into the viewport. By default it is just off-screen. */
-.toolbar-oriented .toolbar-tray-vertical.active {
+.toolbar-oriented .toolbar-tray-vertical.is-active {
   left: 0; /* LTR */
 }
-[dir="rtl"] .toolbar-oriented .toolbar-tray-vertical.active {
+[dir="rtl"] .toolbar-oriented .toolbar-tray-vertical.is-active {
   left: auto;
   right: 0;
 }
diff --git a/core/modules/toolbar/css/toolbar.theme.css b/core/modules/toolbar/css/toolbar.theme.css
index 8946e5f..21aed48 100644
--- a/core/modules/toolbar/css/toolbar.theme.css
+++ b/core/modules/toolbar/css/toolbar.theme.css
@@ -47,7 +47,7 @@
   background-image: linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%);
   text-decoration: none;
 }
-.toolbar .toolbar-bar .toolbar-tab > .toolbar-item.active {
+.toolbar .toolbar-bar .toolbar-tab > .toolbar-item.is-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%);
 }
@@ -94,7 +94,7 @@
 .toolbar-tray a:hover,
 .toolbar-tray a:active,
 .toolbar-tray a:focus,
-.toolbar-tray a.active
+.toolbar-tray a.is-active
  {
   color: #000;
   text-decoration: underline;
diff --git a/core/modules/toolbar/js/toolbar.menu.js b/core/modules/toolbar/js/toolbar.menu.js
index c14d0d4..947071d 100644
--- a/core/modules/toolbar/js/toolbar.menu.js
+++ b/core/modules/toolbar/js/toolbar.menu.js
@@ -148,7 +148,7 @@
         activeItem = location.pathname;
       }
       if (activeItem) {
-        var $activeItem = $menu.find('a[href="' + activeItem + '"]').addClass('menu-item--active');
+        var $activeItem = $menu.find('a[href="' + activeItem + '"]').addClass('menu-item--is-active');
         var $activeTrail = $activeItem.parentsUntil('.root', 'li').addClass('menu-item--active-trail');
         toggleList($activeTrail, true);
       }
diff --git a/core/modules/toolbar/js/views/ToolbarVisualView.js b/core/modules/toolbar/js/views/ToolbarVisualView.js
index aaccf17..f30bde3 100644
--- a/core/modules/toolbar/js/views/ToolbarVisualView.js
+++ b/core/modules/toolbar/js/views/ToolbarVisualView.js
@@ -135,16 +135,16 @@
       var $tab = $(this.model.get('activeTab'));
       // Deactivate the previous tab.
       $(this.model.previous('activeTab'))
-        .removeClass('active')
+        .removeClass('is-active')
         .prop('aria-pressed', false);
       // Deactivate the previous tray.
       $(this.model.previous('activeTray'))
-        .removeClass('active');
+        .removeClass('is-active');
 
       // Activate the selected tab.
       if ($tab.length > 0) {
         $tab
-          .addClass('active')
+          .addClass('is-active')
           // Mark the tab as pressed.
           .prop('aria-pressed', true);
         var name = $tab.attr('data-toolbar-tray');
@@ -156,7 +156,7 @@
         // Activate the associated tray.
         var $tray = this.$el.find('[data-toolbar-tray="' + name + '"].toolbar-tray');
         if ($tray.length) {
-          $tray.addClass('active');
+          $tray.addClass('is-active');
           this.model.set('activeTray', $tray.get(0));
         }
         else {
@@ -218,9 +218,9 @@
       // Remove data-offset attributes from the trays so they can be refreshed.
       $trays.removeAttr('data-offset-left data-offset-right data-offset-top');
       // If an active vertical tray exists, mark it as an offset element.
-      $trays.filter('.toolbar-tray-vertical.active').attr('data-offset-' + edge, '');
+      $trays.filter('.toolbar-tray-vertical.is-active').attr('data-offset-' + edge, '');
       // If an active horizontal tray exists, mark it as an offset element.
-      $trays.filter('.toolbar-tray-horizontal.active').attr('data-offset-top', '');
+      $trays.filter('.toolbar-tray-horizontal.is-active').attr('data-offset-top', '');
     },
 
     /**
diff --git a/core/modules/tour/css/tour.module.css b/core/modules/tour/css/tour.module.css
index 6112b48..2d1f4c8 100644
--- a/core/modules/tour/css/tour.module.css
+++ b/core/modules/tour/css/tour.module.css
@@ -16,7 +16,7 @@
   color: #fff;
   font-weight: bold;
 }
-.toolbar .tour-toolbar-tab button.active {
+.toolbar .tour-toolbar-tab button.is-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%);
 }
diff --git a/core/modules/tour/js/tour.js b/core/modules/tour/js/tour.js
index f8bc85f..4753bab 100644
--- a/core/modules/tour/js/tour.js
+++ b/core/modules/tour/js/tour.js
@@ -86,7 +86,7 @@
       // Render the state.
       var isActive = this.model.get('isActive');
       this.$el.find('button')
-        .toggleClass('active', isActive)
+        .toggleClass('is-active', isActive)
         .prop('aria-pressed', isActive);
       return this;
     },
diff --git a/core/modules/user/css/user.icons.theme.css b/core/modules/user/css/user.icons.theme.css
index 11ae839..66c2366 100644
--- a/core/modules/user/css/user.icons.theme.css
+++ b/core/modules/user/css/user.icons.theme.css
@@ -10,6 +10,6 @@
   background-image: url(../../../misc/icons/bebebe/person.svg);
 }
 .toolbar-bar .toolbar-icon-user:active:before,
-.toolbar-bar .toolbar-icon-user.active:before {
+.toolbar-bar .toolbar-icon-user.is-active:before {
   background-image: url(../../../misc/icons/ffffff/person.svg);
 }
diff --git a/core/modules/views/src/Tests/Plugin/DisplayPageWebTest.php b/core/modules/views/src/Tests/Plugin/DisplayPageWebTest.php
index 6eff94c..2da04f3 100644
--- a/core/modules/views/src/Tests/Plugin/DisplayPageWebTest.php
+++ b/core/modules/views/src/Tests/Plugin/DisplayPageWebTest.php
@@ -87,7 +87,7 @@ public function testPageDisplayMenu() {
     $this->assertResponse(200);
     $element = $this->xpath('//ul[contains(@class, :ul_class)]//a[contains(@class, :a_class)]', array(
       ':ul_class' => 'tabs primary',
-      ':a_class' => 'active',
+      ':a_class' => 'is-active',
     ));
     $this->assertEqual((string) $element[0], t('Test default tab'));
     $this->assertTitle(t('Test default page | Drupal'));
@@ -99,7 +99,7 @@ public function testPageDisplayMenu() {
     $this->assertResponse(200);
     $element = $this->xpath('//ul[contains(@class, :ul_class)]//a[contains(@class, :a_class)]', array(
       ':ul_class' => 'tabs primary',
-      ':a_class' => 'active',
+      ':a_class' => 'is-active',
     ));
     $this->assertEqual((string) $element[0], t('Test local tab'));
     $this->assertTitle(t('Test local page | Drupal'));
diff --git a/core/modules/views_ui/css/views_ui.admin.theme.css b/core/modules/views_ui/css/views_ui.admin.theme.css
index a9b1eab..2095f5a 100644
--- a/core/modules/views_ui/css/views_ui.admin.theme.css
+++ b/core/modules/views_ui/css/views_ui.admin.theme.css
@@ -479,7 +479,7 @@ td.group-title {
 }
 
 .views-displays .tabs.secondary li,
-.views-displays .tabs.secondary li.active {
+.views-displays .tabs.secondary li.is-active {
   background: transparent;
   margin-bottom: 5px;
   border: 0;
@@ -524,7 +524,7 @@ td.group-title {
 /**
  * Display a red border if the display doesn't validate.
  */
-.views-displays .tabs.secondary li.active a.active.error,
+.views-displays .tabs.secondary li.is-active a.is-active.error,
 .views-displays .tabs.secondary a.error {
   border: 2px solid #ed541d;
   padding: 1px 6px;
@@ -539,8 +539,8 @@ td.group-title {
 }
 
 .views-displays .tabs.secondary li a:hover,
-.views-displays .tabs.secondary li.active a,
-.views-displays .tabs.secondary li.active a.active {
+.views-displays .tabs.secondary li.is-active a,
+.views-displays .tabs.secondary li.is-active a.is-active {
   background-color: #555;
   color: #fff;
 }
diff --git a/core/tests/Drupal/Tests/Core/Menu/LocalTaskDefaultTest.php b/core/tests/Drupal/Tests/Core/Menu/LocalTaskDefaultTest.php
index 0141418..573444b 100644
--- a/core/tests/Drupal/Tests/Core/Menu/LocalTaskDefaultTest.php
+++ b/core/tests/Drupal/Tests/Core/Menu/LocalTaskDefaultTest.php
@@ -295,7 +295,7 @@ public function testGetOptions() {
       'attributes' => array(
         'class' => array(
           'example',
-          'active'
+          'is-active'
         )
       )
     ), $this->localTaskBase->getOptions($route_match));
diff --git a/core/themes/bartik/color/preview.css b/core/themes/bartik/color/preview.css
index 294277f..18af7f2 100644
--- a/core/themes/bartik/color/preview.css
+++ b/core/themes/bartik/color/preview.css
@@ -61,7 +61,7 @@
   text-decoration: none;
   cursor: pointer;
 }
-#preview-main-menu-links li a.active {
+#preview-main-menu-links li a.is-active {
   background: #fff;
   border-bottom: none;
 }
diff --git a/core/themes/bartik/css/colors.css b/core/themes/bartik/css/colors.css
index a19cd96..51ca798 100644
--- a/core/themes/bartik/css/colors.css
+++ b/core/themes/bartik/css/colors.css
@@ -6,14 +6,14 @@ body {
 }
 #page,
 #main-wrapper,
-.region-primary-menu .menu-item a.active,
-.region-primary-menu .menu-item .menu-item--active-trail a {
+.region-primary-menu .menu-item a.is-active,
+.region-primary-menu .menu-item .menu-item--is-active-trail a {
   background: #ffffff;
 }
-.tabs ul.primary li a.active {
+.tabs ul.primary li a.is-active {
   background-color: #ffffff;
 }
-.tabs ul.primary li.active a {
+.tabs ul.primary li.is-active a {
   background-color: #ffffff;
   border-bottom-color: #ffffff;
 }
@@ -45,7 +45,7 @@ a:active,
 }
 .region-header,
 .region-header a,
-.region-header li a.active,
+.region-header li a.is-active,
 #name-and-slogan,
 .site-branding-block,
 #name-and-slogan a,
diff --git a/core/themes/bartik/css/components/media.css b/core/themes/bartik/css/components/media.css
new file mode 100644
index 0000000..d035d2a
--- /dev/null
+++ b/core/themes/bartik/css/components/media.css
@@ -0,0 +1,172 @@
+/* ----------- media queries ------------------------------- */
+
+@media all and (min-width: 461px) and (max-width: 900px) {
+  /* ------------ Header and Menus -------------------------- */
+
+ .region-header {
+    margin: .5em 5px .75em;
+  }
+  #logo,
+  .site-logo {
+    padding: 5px 0 0 5px; /* LTR */
+  }
+  [dir="rtl"] #logo,
+  [dir="rtl"] .site-logo {
+    padding: 5px 5px 0 0;
+  }
+  #name-and-slogan,
+  .site-branding-text {
+    padding: 10px 10px 8px;
+  }
+  .region-primary-menu .menu {
+    margin: 0 5px;
+    padding: 0;
+    text-align: center;
+  }
+  .region-primary-menu .menu li,
+  body:not(:target) .region-primary-menu .menu li {
+    float: left; /* LTR */
+    margin-right: 5px; /* LTR */
+    padding: 0;
+    display: inline-block;
+    width: 32.75%;
+    height: auto;
+    overflow: visible;
+  }
+  [dir="rtl"] .region-primary-menu .menu li,
+  [dir="rtl"] body:not(:target) .region-primary-menu .menu li {
+    float: right;
+    margin-left: 5px;
+    margin-right: 0;
+  }
+  .region-primary-menu .menu li:nth-child(3n) {
+    margin-right: -5px; /* LTR */
+  }
+  [dir="rtl"] .region-primary-menu .menu li:nth-child(3n) {
+    margin-left: -5px;
+    margin-right: 0;
+  }
+  .region-primary-menu .menu a {
+    float: none;
+    display: block;
+    border-radius: 8px;
+    margin-bottom: 5px;
+    padding: 0.9em 5px;
+  }
+  body:not(:target) .region-primary-menu .menu-toggle {
+    display: none;
+  }
+}
+
+@media all and (min-width: 901px) {
+
+  .region-header {
+    margin: 1em 5px 1.5em;
+  }
+  #logo,
+  .site-logo {
+    padding: 9px 4px 4px 9px; /* LTR */
+  }
+  [dir="rtl"] #logo,
+  [dir="rtl"] .site-logo {
+    padding: 9px 9px 4px 4px;
+  }
+  #name-and-slogan,
+  .site-branding-text {
+    padding: 26px 0 0;
+    margin: 0 0 30px 15px; /* LTR */
+  }
+  [dir="rtl"] #name-and-slogan,
+  [dir="rtl"] .site-branding-text {
+    margin: 0 15px 30px 0;
+  }
+  #site-name,
+  .site-name {
+    font-size: 1.821em;
+  }
+  .region-primary-menu .block-menu .menu {
+    font-size: 0.929em;
+    margin: 0;
+    padding: 0 15px;
+  }
+  .region-primary-menu .menu li,
+  body:not(:target) .region-primary-menu .menu li {
+    float: left; /* LTR */
+    list-style: none;
+    padding: 0 1px;
+    margin: 0 1px;
+    width: auto;
+    height: auto;
+    overflow: visible;
+  }
+  [dir="rtl"] .region-primary-menu .menu li,
+  [dir="rtl"] body:not(:target) .region-primary-menu .menu li {
+    float: right;
+  }
+  .region-primary-menu .menu a {
+    float: left; /* LTR */
+    padding: 0.7em 0.8em;
+    margin-bottom: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  [dir="rtl"] .region-primary-menu .menu a {
+    float: right;
+    padding: 0.7em 0.8em;
+  }
+  .featured .region-primary-menu .menu li a:active,
+  .featured .region-primary-menu .menu li a.is-active {
+    background: #f0f0f0;
+    background: rgba(240, 240, 240, 1.0);
+  }
+  body:not(:target) .region-primary-menu .menu-toggle {
+    display: none;
+  }
+}
+
+@media all and (min-width: 520px) {
+
+  /* ----------------- Featured ----------------- */
+  #featured {
+    font-size: 1.643em;
+  }
+  #featured h2 {
+    font-size: 1.174em;
+  }
+
+  /* ------------------ Triptych ----------------- */
+  #triptych h2 {
+    font-size: 1.714em;
+    margin-bottom: 0.9em;
+  }
+  #triptych .block {
+    margin-bottom: 2em;
+    padding-bottom: 2em;
+  }
+}
+
+/**
+ * Responsive tables.
+ */
+@media screen and (max-width: 37.5em) { /* 600px */
+  th.priority-low,
+  td.priority-low,
+  th.priority-medium,
+  td.priority-medium {
+    display: none;
+  }
+}
+@media screen and (max-width: 60em) { /* 920px */
+  th.priority-low,
+  td.priority-low {
+    display: none;
+  }
+}
+
+/* ---------- Input fields ---------- */
+@media screen and (max-width: 60em) { /* 920px */
+  input,
+  textarea {
+    font-size: 1.142857143em;
+  }
+}
diff --git a/core/themes/bartik/css/components/primary-menu.css b/core/themes/bartik/css/components/primary-menu.css
index 44de8e7..ac1e681 100644
--- a/core/themes/bartik/css/components/primary-menu.css
+++ b/core/themes/bartik/css/components/primary-menu.css
@@ -44,7 +44,7 @@
   background: #b3b3b3;
   background: rgba(255, 255, 255, 1);
 }
-.region-primary-menu .menu-item a.active {
+.region-primary-menu .menu-item a.is-active {
   border-bottom: none;
 }
 
diff --git a/core/themes/bartik/css/components/tabs.css b/core/themes/bartik/css/components/tabs.css
index 4e8051e..31becdd 100644
--- a/core/themes/bartik/css/components/tabs.css
+++ b/core/themes/bartik/css/components/tabs.css
@@ -21,7 +21,7 @@ div.tabs {
   margin: 0;
   text-shadow: 0 1px 0 #fff;
 }
-.tabs ul.primary li.active a {
+.tabs ul.primary li.is-active a {
   background-color: #ffffff;
   border: 1px solid #bbb;
 }
@@ -36,7 +36,7 @@ div.tabs {
   .tabs ul.primary li a {
     padding: 5px 10px;
   }
-  .tabs ul.primary li.active a {
+  .tabs ul.primary li.is-active a {
     border-bottom: none;
   }
 }
@@ -67,7 +67,7 @@ div.tabs {
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
   }
-  .tabs ul.primary li.active a {
+  .tabs ul.primary li.is-active a {
     border-bottom: 1px solid #fff;
   }
 }
@@ -106,7 +106,7 @@ div.tabs {
   padding: 0.25em 0.5em;
   text-decoration: none;
 }
-.tabs ul.secondary li a.active {
+.tabs ul.secondary li a.is-active {
   background: #f2f2f2;
   border-bottom: none;
   border-radius: 5px;
diff --git a/core/themes/seven/css/components/tables.css b/core/themes/seven/css/components/tables.css
index 470537d..f8541c8 100644
--- a/core/themes/seven/css/components/tables.css
+++ b/core/themes/seven/css/components/tables.css
@@ -76,38 +76,38 @@ th > a:after {
   -webkit-transition: all 0.1s;
   transition: all 0.1s;
 }
-th.active > a {
+th.is-active > a {
   color: #004875;
 }
-th.active img {
+th.is-active img {
   position: absolute;
   right: 0; /* LTR */
   top: 50%;
 }
-[dir="rtl"] th.active img {
+[dir="rtl"] th.is-active img {
   right: auto;
   left: 0;
 }
-th.active > a:after {
+th.is-active > a:after {
   border-bottom-color: #004875;
 }
 th > a:hover,
 th > a:focus,
-th.active > a:hover,
-th.active > a:focus {
+th.is-active > a:hover,
+th.is-active > a:focus {
   color: #008ee6;
   text-decoration: none;
 }
 th > a:hover:after,
 th > a:focus:after,
-th.active > a:hover:after,
-th.active > a:focus:after {
+th.is-active > a:hover:after,
+th.is-active > a:focus:after {
   border-bottom-color: #008ee6;
 }
 td .item-list ul {
   margin: 0;
 }
-td.active {
+td.is-active {
   background: none;
 }
 
diff --git a/core/themes/seven/css/components/tabs.css b/core/themes/seven/css/components/tabs.css
index 78b6d63..c7517c4 100644
--- a/core/themes/seven/css/components/tabs.css
+++ b/core/themes/seven/css/components/tabs.css
@@ -81,14 +81,14 @@ li.tabs__tab a {
   margin: 16px 0 0;
   margin: 1rem 0 0;
 }
-.tabs.primary .tabs__tab.active {
+.tabs.primary .tabs__tab.is-active {
   z-index: 15;
   border-color: #a6a6a6;
   border-radius: 4px 0 0 0; /* LTR */
   background-color: #ffffff;
   color: #004f80;
 }
-[dir="rtl"] .tabs.primary .tabs__tab.active {
+[dir="rtl"] .tabs.primary .tabs__tab.is-active {
   border-top-left-radius: 0;
   border-top-right-radius: 4px;
 }
@@ -100,7 +100,7 @@ li.tabs__tab a {
   background-color: #fafaf7;
   text-decoration: underline;
 }
-.tabs.primary .active a:focus {
+.tabs.primary .is-active a:focus {
   background: none;
   text-decoration: underline;
 }
@@ -113,7 +113,7 @@ li.tabs__tab a {
   [dir="rtl"] .tabs.primary a {
     background: url(../../../../misc/icons/0074bd/chevron-left.svg) 1% center no-repeat;
   }
-  .tabs.primary .tabs__tab.active a {
+  .tabs.primary .tabs__tab.is-active a {
     background-image: none;
   }
 }
@@ -157,21 +157,21 @@ li.tabs__tab a {
   padding-bottom:16px;
   padding-bottom: 1rem;
 }
-.is-collapse-enabled .tabs__tab.active {
+.is-collapse-enabled .tabs__tab.is-active {
   position: absolute;
   top: 2px;
   left: 0; /* LTR */
   width: 75%;
   border-bottom: 0;
 }
-[dir="rtl"] .is-collapse-enabled .tabs__tab.active {
+[dir="rtl"] .is-collapse-enabled .tabs__tab.is-active {
   left: auto;
   right: 0;
 }
-.is-collapse-enabled .tabs.primary a.active:before {
+.is-collapse-enabled .tabs.primary a.is-active:before {
   content: none;
 }
-.is-open .tabs__tab.active {
+.is-open .tabs__tab.is-active {
   border-color: #a6a6a6;
   background-color: #ffffff;
   color: #004f80;
@@ -218,9 +218,9 @@ li.tabs__tab a {
 }
 
 /* Override the states above */
-.is-horizontal .tabs__tab.active,
-.is-horizontal .tabs.primary .tabs__tab.active,
-[dir="rtl"] .is-horizontal .tabs.primary .tabs__tab.active {
+.is-horizontal .tabs__tab.is-active,
+.is-horizontal .tabs.primary .tabs__tab.is-active,
+[dir="rtl"] .is-horizontal .tabs.primary .tabs__tab.is-active {
   border-radius: 4px 4px 0 0;
   position: relative;
   width: auto;
@@ -259,12 +259,12 @@ li.tabs__tab a {
 .tabs.secondary .tabs__tab + .tabs__tab {
   border-top: 1px solid #d9d8d4;
 }
-.tabs.secondary .tabs__tab.active {
+.tabs.secondary .tabs__tab.is-active {
   color: #004f80;
   border-left: 2px solid #004f80; /* LTR */
   padding-left: 15px; /* LTR */
 }
-[dir="rtl"] .tabs.secondary .tabs__tab.active {
+[dir="rtl"] .tabs.secondary .tabs__tab.is-active {
   border-left: 1px solid #bfbfbf;
   border-right: 2px solid #004f80;
   padding-right: 15px;
@@ -286,7 +286,7 @@ li.tabs__tab a {
   padding: 7px 13px 5px;
   text-decoration: none;
 }
-.tabs.secondary .active a {
+.tabs.secondary .is-active a {
   color: #004f80;
 }
 .tabs.secondary a:focus {
@@ -319,7 +319,7 @@ li.tabs__tab a {
   border-left-color: transparent;
   padding-right: 0; /* 1 */
 }
-.is-horizontal .tabs.secondary .tabs__tab.active {
+.is-horizontal .tabs.secondary .tabs__tab.is-active {
   border-bottom-color: #004f80;
 }
 .is-horizontal .tabs.secondary .tabs__tab:hover,
diff --git a/core/themes/seven/css/components/views-ui.css b/core/themes/seven/css/components/views-ui.css
index b10e29f..3420858 100644
--- a/core/themes/seven/css/components/views-ui.css
+++ b/core/themes/seven/css/components/views-ui.css
@@ -101,8 +101,8 @@ details.fieldset-no-legend {
 }
 
 .views-displays ul.secondary li a,
-.views-displays ul.secondary li.active a,
-.views-displays ul.secondary li.active a.active {
+.views-displays ul.secondary li.is-active a,
+.views-displays ul.secondary li.is-active a.is-active {
   padding: 2px 7px 3px;
 }
 
@@ -110,8 +110,8 @@ details.fieldset-no-legend {
   color: #0074bd;
 }
 
-.views-displays ul.secondary li.active a,
-.views-displays ul.secondary li.active a.active {
+.views-displays ul.secondary li.is-active a,
+.views-displays ul.secondary li.is-active a.is-active {
   border: 1px solid transparent;
 }
 
diff --git a/core/themes/seven/css/theme/maintenance-page.css b/core/themes/seven/css/theme/maintenance-page.css
index f6b93a0..ff20b97 100644
--- a/core/themes/seven/css/theme/maintenance-page.css
+++ b/core/themes/seven/css/theme/maintenance-page.css
@@ -63,12 +63,12 @@
   [dir="rtl"] .task-list li {
     padding: 0.5em 3.85em 0.5em 1em;
   }
-  .task-list .active {
+  .task-list .is-active {
     background: #ebeae4;
     position: relative;
     font-weight: normal;
   }
-  .task-list .active:after {
+  .task-list .is-active:after {
     left: 100%; /* LTR */
     border: solid transparent;
     border-color: rgba(235, 234, 228, 0);
@@ -82,7 +82,7 @@
     top: 50%;
     margin-top: -1.32em;
   }
-  [dir="rtl"] .task-list .active:after {
+  [dir="rtl"] .task-list .is-active:after {
     left: auto;
     right: 100%;
     border-left-color: transparent;
diff --git a/core/themes/seven/js/mobile.install.js b/core/themes/seven/js/mobile.install.js
index 7830720..43196cb 100644
--- a/core/themes/seven/js/mobile.install.js
+++ b/core/themes/seven/js/mobile.install.js
@@ -4,7 +4,7 @@
 
   function findActiveStep(steps) {
     for (var i = 0; i < steps.length; i++) {
-      if (steps[i].className === 'active') {
+      if (steps[i].className === 'is-active') {
         return i + 1;
       }
     }