diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index 0862f5a0b..bcb0498b4 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -199,7 +199,7 @@ $sidebar-active: #f4fcd0;
       margin-bottom: $line-height / 3;
     }
 
-    .active {
+    .is-active {
       border-bottom: 2px solid $admin-color;
       color: $admin-color;
       font-weight: bold;
@@ -334,7 +334,7 @@ $sidebar-active: #f4fcd0;
       padding-left: $line-height / 2;
     }
 
-    &.active a {
+    &.is-active a {
       background: $sidebar-hover;
       border-left: 2px solid $sidebar-active;
       font-weight: bold;
@@ -384,7 +384,7 @@ $sidebar-active: #f4fcd0;
       font-weight: normal;
     }
 
-    .active {
+    .is-active {
       border-bottom: 0;
     }
   }
@@ -600,7 +600,7 @@ $sidebar-active: #f4fcd0;
   a {
     display: block;
 
-    &.active {
+    &.is-active {
       color: $brand;
       font-weight: bold;
       text-decoration: underline;
@@ -694,7 +694,7 @@ table {
 }
 
 .legislation-admin {
-  .menu .active > a {
+  .menu .is-active > a {
     background: none;
   }
 }
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index f7daaf3dd..9376570f1 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -288,7 +288,7 @@ a {
       color: $text-medium;
       padding: 0;
 
-      &.active {
+      &.is-active {
         font-weight: bold;
         color: $brand;
       }
@@ -298,7 +298,7 @@ a {
       font-size: $base-font-size;
     }
 
-    &.active {
+    &.is-active {
       border-bottom: 2px solid $brand;
       color: $brand;
     }
@@ -629,7 +629,7 @@ header {
       }
     }
 
-    &.active {
+    &.is-active {
       color: #fff;
 
       @include breakpoint(medium) {
@@ -676,7 +676,7 @@ header {
 
 .top-bar-right {
 
-  .active {
+  .is-active {
     font-weight: bold;
     text-decoration: underline;
   }
@@ -704,7 +704,7 @@ header {
     }
   }
 
-  .active {
+  .is-active {
     border-bottom: 2px solid $brand;
     color: $brand;
 
@@ -808,7 +808,7 @@ footer {
   color: $link;
 
   &:hover,
-  &.active {
+  &.is-active {
     background: $brand;
     color: #fff;
   }
@@ -1822,7 +1822,7 @@ table {
       }
     }
 
-    &.active {
+    &.is-active {
       background: #43ac6a;
       color: #fff;
     }
diff --git a/app/assets/stylesheets/legislation.scss b/app/assets/stylesheets/legislation.scss
index a3d46a88d..6247b64b9 100644
--- a/app/assets/stylesheets/legislation.scss
+++ b/app/assets/stylesheets/legislation.scss
@@ -48,7 +48,7 @@
         max-width: 80%;
       }
 
-      &.active {
+      &.is-active {
         font-weight: 700;
       }
     }
diff --git a/app/assets/stylesheets/legislation_process.scss b/app/assets/stylesheets/legislation_process.scss
index 1d6bcbc59..5105a459a 100644
--- a/app/assets/stylesheets/legislation_process.scss
+++ b/app/assets/stylesheets/legislation_process.scss
@@ -99,7 +99,7 @@
       }
     }
 
-    .active {
+    .is-active {
       border-bottom: 2px solid $brand;
     }
   }
@@ -244,7 +244,7 @@
       position: relative;
     }
 
-    .active {
+    .is-active {
       background: #ccdbe6;
       border: 0;
     }
diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index 8a6867565..2fb35ba6f 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -1536,7 +1536,7 @@
   padding: $line-height / 4;
 }
 
-.select-district .active a {
+.select-district .is-active a {
   background: #f9f9f9;
   border-radius: rem-calc(3);
   color: $budget;
@@ -1629,7 +1629,7 @@
       z-index: 99;
     }
 
-    &.active {
+    &.is-active {
 
       h3 {
         background: $budget;
diff --git a/app/helpers/budgets_helper.rb b/app/helpers/budgets_helper.rb
index b4a207ed6..d6700b321 100644
--- a/app/helpers/budgets_helper.rb
+++ b/app/helpers/budgets_helper.rb
@@ -49,7 +49,7 @@ module BudgetsHelper
 
   def css_for_ballot_heading(heading)
     return '' if current_ballot.blank?
-    current_ballot.has_lines_in_heading?(heading) ? 'active' : ''
+    current_ballot.has_lines_in_heading?(heading) ? 'is-active' : ''
   end
 
   def current_ballot
diff --git a/app/helpers/layouts_helper.rb b/app/helpers/layouts_helper.rb
index b6da582b5..782d9c639 100644
--- a/app/helpers/layouts_helper.rb
+++ b/app/helpers/layouts_helper.rb
@@ -3,7 +3,7 @@ module LayoutsHelper
   def layout_menu_link_to(text, path, is_active, options)
     if is_active
       content_tag(:span, t('shared.you_are_in'), class: 'show-for-sr') + ' ' +
-        link_to(text, path, options.merge(class: "active"))
+        link_to(text, path, options.merge(class: "is-active"))
     else
       link_to(text, path, options)
     end
diff --git a/app/helpers/welcome_helper.rb b/app/helpers/welcome_helper.rb
index 0b483468f..07d7b380a 100644
--- a/app/helpers/welcome_helper.rb
+++ b/app/helpers/welcome_helper.rb
@@ -1,6 +1,6 @@
 module WelcomeHelper
 
-  def active_class(index)
+  def is_active_class(index)
     "is-active is-in" if index.zero?
   end
 
diff --git a/app/views/admin/_menu.html.erb b/app/views/admin/_menu.html.erb
index e72b65985..d1663652c 100644
--- a/app/views/admin/_menu.html.erb
+++ b/app/views/admin/_menu.html.erb
@@ -7,7 +7,7 @@
         <strong><%= t("admin.menu.title_categories") %></strong>
       </a>
       <ul <%= "class=is-active" if menu_tags? %>>
-        <li <%= "class=active" if controller_name == "tags" %>>
+        <li <%= "class=is-active" if controller_name == "tags" %>>
           <%= link_to t("admin.menu.proposals_topics"), admin_tags_path %>
         </li>
       </ul>
@@ -20,22 +20,22 @@
       </a>
       <ul <%= "class=is-active" if menu_moderated_content? %>>
         <% if feature?(:proposals) %>
-          <li <%= "class=active" if controller_name == "proposals" && controller.class.parent != Admin::Legislation %>>
+          <li <%= "class=is-active" if controller_name == "proposals" && controller.class.parent != Admin::Legislation %>>
             <%= link_to t("admin.menu.hidden_proposals"), admin_proposals_path %>
           </li>
         <% end %>
 
         <% if feature?(:debates) %>
-          <li <%= "class=active" if controller_name == "debates" %>>
+          <li <%= "class=is-active" if controller_name == "debates" %>>
             <%= link_to t("admin.menu.hidden_debates"), admin_debates_path %>
           </li>
         <% end %>
 
-        <li <%= "class=active" if controller_name == "comments" %>>
+        <li <%= "class=is-active" if controller_name == "comments" %>>
           <%= link_to t("admin.menu.hidden_comments"), admin_comments_path %>
         </li>
 
-        <li <%= "class=active" if controller_name == "hidden_users" %>>
+        <li <%= "class=is-active" if controller_name == "hidden_users" %>>
           <%= link_to t("admin.menu.hidden_users"), admin_hidden_users_path %>
         </li>
       </ul>
@@ -48,7 +48,7 @@
           <strong><%= t("admin.menu.title_budgets") %></strong>
         </a>
         <ul <%= "class=is-active" if menu_budget? %>>
-          <li <%= "class=active" if controller_name == "spending_proposals" %>>
+          <li <%= "class=is-active" if controller_name == "spending_proposals" %>>
             <%= link_to t("admin.menu.spending_proposals"), admin_spending_proposals_path %>
           </li>
         </ul>
@@ -62,31 +62,31 @@
           <strong><%= t("admin.menu.title_polls") %></strong>
         </a>
         <ul id="polls_menu" <%= "class=is-active" if menu_polls? || controller.class.parent == Admin::Poll::Questions::Answers %>>
-          <li <%= "class=active" if controller_name == "polls" && action_name != "booth_assignments" ||
+          <li <%= "class=is-active" if controller_name == "polls" && action_name != "booth_assignments" ||
                                     %w(booth_assignments officer_assignments recounts results).include?(controller_name) %>>
             <%= link_to t('admin.menu.polls'), admin_polls_path %>
           </li>
 
-          <li <%= "class=active" if %w(questions answers).include?(controller_name) ||
+          <li <%= "class=is-active" if %w(questions answers).include?(controller_name) ||
                                     controller.class.parent == Admin::Poll::Questions::Answers %>>
             <%= link_to t("admin.menu.poll_questions"), admin_questions_path %>
           </li>
 
-          <li <%= "class=active" if controller_name == "officers" %>>
+          <li <%= "class=is-active" if controller_name == "officers" %>>
             <%= link_to t('admin.menu.poll_officers'), admin_officers_path %>
           </li>
 
-          <li <%= "class=active" if controller_name == "booths" &&
+          <li <%= "class=is-active" if controller_name == "booths" &&
                                     action_name != "available" %>>
             <%= link_to t('admin.menu.poll_booths'), admin_booths_path %>
           </li>
 
-          <li <%= "class=active" if (controller_name == "polls" && action_name == "booth_assignments") ||
+          <li <%= "class=is-active" if (controller_name == "polls" && action_name == "booth_assignments") ||
                                     (controller_name == "booth_assignments" && action_name == "manage") %>>
             <%= link_to t('admin.menu.poll_booth_assignments'), booth_assignments_admin_polls_path %>
           </li>
 
-          <li <%= "class=active" if %w(shifts booths).include?(controller_name) &&
+          <li <%= "class=is-active" if %w(shifts booths).include?(controller_name) &&
                                     action_name == "available" %>>
             <%= link_to t('admin.menu.poll_shifts'), available_admin_booths_path %>
           </li>
@@ -95,7 +95,7 @@
     <% end %>
 
     <% if feature?(:budgets) %>
-      <li class="section-title <%= "active" if controller_name == "budgets" %>">
+      <li class="section-title <%= "is-active" if controller_name == "budgets" %>">
         <%= link_to admin_budgets_path do %>
           <span class="icon-budget"></span>
           <strong><%= t("admin.menu.budgets") %></strong>
@@ -109,38 +109,38 @@
         <strong><%= t("admin.menu.title_profiles") %></strong>
       </a>
       <ul <%= "class=is-active" if menu_profiles? %>>
-        <li <%= "class=active" if controller_name == "administrators" %>>
+        <li <%= "class=is-active" if controller_name == "administrators" %>>
           <%= link_to t("admin.menu.administrators"), admin_administrators_path %>
         </li>
 
-        <li <%= "class=active" if controller_name == "organizations" %>>
+        <li <%= "class=is-active" if controller_name == "organizations" %>>
           <%= link_to t("admin.menu.organizations"), admin_organizations_path %>
         </li>
 
-        <li <%= "class=active" if controller_name == "officials" %>>
+        <li <%= "class=is-active" if controller_name == "officials" %>>
           <%= link_to t("admin.menu.officials"), admin_officials_path %>
         </li>
 
-        <li <%= "class=active" if %w(moderators activity).include?(controller_name) %>>
+        <li <%= "class=is-active" if %w(moderators activity).include?(controller_name) %>>
           <%= link_to t('admin.menu.moderators'), admin_moderators_path%>
         </li>
 
-        <li <%= "class=active" if controller_name == "valuators" %>>
+        <li <%= "class=is-active" if controller_name == "valuators" %>>
           <%= link_to t('admin.menu.valuators'), admin_valuators_path %>
         </li>
 
-        <li <%= "class=active" if controller_name == "managers" %>>
+        <li <%= "class=is-active" if controller_name == "managers" %>>
           <%= link_to t('admin.menu.managers'), admin_managers_path %>
         </li>
 
-        <li <%= 'class=active' if controller_name == 'users' %>>
+        <li <%= 'class=is-active' if controller_name == 'users' %>>
           <%= link_to t('admin.menu.users'), admin_users_path %>
         </li>
       </ul>
     </li>
 
     <% if feature?(:legislation) %>
-      <li class="section-title <%= "active" if controller.class.parent == Admin::Legislation %>">
+      <li class="section-title <%= "is-active" if controller.class.parent == Admin::Legislation %>">
         <%= link_to admin_legislation_processes_path do %>
           <span class="icon-file-text"></span>
           <strong><%= t("admin.menu.legislation") %></strong>
@@ -154,7 +154,7 @@
         <strong><%= t("admin.menu.title_banners") %></strong>
       </a>
       <ul <%= "class=is-active" if menu_banners? %>>
-        <li <%= "class=active" if controller_name == "banners" %>>
+        <li <%= "class=is-active" if controller_name == "banners" %>>
           <%= link_to t("admin.menu.banner"), admin_banners_path %>
         </li>
       </ul>
@@ -175,19 +175,19 @@
           <%= link_to t("admin.menu.site_customization.pages"), admin_site_customization_pages_path %>
         </li>
 
-        <li <%= "class=active" if controller_name == "images" &&
+        <li <%= "class=is-active" if controller_name == "images" &&
                                   controller.class.parent != Admin::Poll::Questions::Answers %>>
           <%= link_to t("admin.menu.site_customization.images"), admin_site_customization_images_path %>
         </li>
 
-        <li <%= "class=active" if controller_name == "content_blocks" %>>
+        <li <%= "class=is-active" if controller_name == "content_blocks" %>>
           <%= link_to t("admin.menu.site_customization.content_blocks"), admin_site_customization_content_blocks_path%>
         </li>
 
       </ul>
     </li>
 
-    <li class="section-title <%= "active" if controller_name == "geozones" %>">
+    <li class="section-title <%= "is-active" if controller_name == "geozones" %>">
       <%= link_to admin_geozones_path do %>
         <span class="icon-map-marker"></span>
         <strong><%= t('admin.menu.geozones') %></strong>
@@ -195,7 +195,7 @@
     </li>
 
     <% if feature?(:signature_sheets) %>
-      <li class="section-title <%= "active" if controller_name == "signature_sheets" %>">
+      <li class="section-title <%= "is-active" if controller_name == "signature_sheets" %>">
         <%= link_to admin_signature_sheets_path do %>
           <span class="icon-file-text-o"></span>
           <strong><%= t("admin.menu.signature_sheets") %></strong>
@@ -203,16 +203,16 @@
       </li>
     <% end %>
 
-    <li class="section-title" <%= "class=active" if %w(newsletters emails_download).include?(controller_name) %>>
+    <li class="section-title" <%= "class=is-active" if %w(newsletters emails_download).include?(controller_name) %>>
       <a href="#">
         <span class="icon-zip"></span>
         <strong><%= t("admin.menu.emails") %></strong>
       </a>
       <ul id="emails_menu" <%= "class=is-active" if %w(newsletters emails_download).include?(controller_name) %>>
-        <li <%= "class=active" if controller_name == "newsletters" %>>
+        <li <%= "class=is-active" if controller_name == "newsletters" %>>
           <%= link_to t("admin.menu.newsletters"), admin_newsletters_path %>
         </li>
-        <li <%= "class=active" if controller_name == "emails_download" %>>
+        <li <%= "class=is-active" if controller_name == "emails_download" %>>
           <%= link_to t("admin.menu.emails_download"), admin_emails_download_index_path %>
         </li>
       </ul>
diff --git a/app/views/budgets/_phases.html.erb b/app/views/budgets/_phases.html.erb
index 2d11ef01f..a5461b6be 100644
--- a/app/views/budgets/_phases.html.erb
+++ b/app/views/budgets/_phases.html.erb
@@ -1,6 +1,6 @@
 <ul class="no-bullet budget-timeline">
   <% current_budget.published_phases.each do |phase| %>
-    <li class="phase <%= 'active' if phase == current_budget.current_phase %>">
+    <li class="phase <%= 'is-active' if phase == current_budget.current_phase %>">
       <h3><%= t("budgets.phase.#{phase.kind}") %></h3>
       <span>
         <%= l(phase.starts_at.to_date, format: :long) if phase.starts_at.present? %>
diff --git a/app/views/budgets/index.html.erb b/app/views/budgets/index.html.erb
index 2856dee3b..5d9a6ca46 100644
--- a/app/views/budgets/index.html.erb
+++ b/app/views/budgets/index.html.erb
@@ -119,7 +119,7 @@
         <div class="small-12 medium-9 column">
           <ul class="no-bullet submenu">
             <li class="inline-block">
-              <%= link_to "#other_budgets", class: "active" do %>
+              <%= link_to "#other_budgets", class: "is-active" do %>
                 <h2>
                   <%= t("budgets.index.finished_budgets") %>
                 </h2>
diff --git a/app/views/budgets/investments/_categories.html.erb b/app/views/budgets/investments/_categories.html.erb
index 9432cb06c..b488536e5 100644
--- a/app/views/budgets/investments/_categories.html.erb
+++ b/app/views/budgets/investments/_categories.html.erb
@@ -5,7 +5,7 @@
 <ul id="categories" class="no-bullet categories">
   <% @categories.each do |category| %>
     <li class="inline-block">
-      <% css_class = { class: 'active' } if params[:search] == category.name %>
+      <% css_class = { class: 'is-active' } if params[:search] == category.name %>
       <%= link_to category.name, budget_investments_path(@budget, search: category.name), css_class || {} %>
     </li>
   <% end %>
diff --git a/app/views/budgets/results/show.html.erb b/app/views/budgets/results/show.html.erb
index 4699f9d8b..63308eaca 100644
--- a/app/views/budgets/results/show.html.erb
+++ b/app/views/budgets/results/show.html.erb
@@ -50,7 +50,7 @@
         <li>
           <%= link_to heading.name,
                       budget_results_path(@budget, heading_id: heading.to_param),
-                      class: heading.to_param == @heading.to_param ? 'active' : '' %>
+                      class: heading.to_param == @heading.to_param ? 'is-active' : '' %>
         </li>
       <% end %>
     </ul>
diff --git a/app/views/legislation/processes/_key_dates.html.erb b/app/views/legislation/processes/_key_dates.html.erb
index bf8961d86..dc74f8c59 100644
--- a/app/views/legislation/processes/_key_dates.html.erb
+++ b/app/views/legislation/processes/_key_dates.html.erb
@@ -6,7 +6,7 @@
 
         <ul>
           <% if process.debate_phase.enabled? %>
-            <li <%= 'class=active' if phase.to_sym == :debate_phase %>>
+            <li <%= 'class=is-active' if phase.to_sym == :debate_phase %>>
               <%= link_to debate_legislation_process_path(process) do %>
                 <h4><%= t('legislation.processes.shared.debate_dates') %></h4>
                 <p><%= format_date(process.debate_start_date) %> - <%= format_date(process.debate_end_date) %></p>
@@ -15,7 +15,7 @@
           <% end %>
 
           <% if process.proposals_phase.enabled? %>
-            <li <%= 'class=active' if phase.to_sym == :proposals_phase %>>
+            <li <%= 'class=is-active' if phase.to_sym == :proposals_phase %>>
               <%= link_to proposals_legislation_process_path(process) do %>
                 <h4><%= t('legislation.processes.shared.proposals_dates') %></h4>
                 <p><%= format_date(process.proposals_phase_start_date) %> - <%= format_date(process.proposals_phase_end_date) %></p>
@@ -24,7 +24,7 @@
           <% end %>
 
           <% if process.draft_publication.enabled? %>
-            <li <%= 'class=active' if phase.to_sym == :draft_publication %>>
+            <li <%= 'class=is-active' if phase.to_sym == :draft_publication %>>
               <%= link_to draft_publication_legislation_process_path(process) do %>
                 <h4><%= t('legislation.processes.shared.draft_publication_date') %></h4>
                 <p><%= format_date(process.draft_publication_date) %></p>
@@ -33,7 +33,7 @@
           <% end %>
 
           <% if process.allegations_phase.enabled? %>
-            <li <%= 'class=active' if phase.to_sym == :allegations_phase %>>
+            <li <%= 'class=is-active' if phase.to_sym == :allegations_phase %>>
               <%= link_to allegations_legislation_process_path(process) do %>
                 <h4><%= t('legislation.processes.shared.allegations_dates') %></h4>
                 <p><%= format_date(process.allegations_start_date) %> - <%= format_date(process.allegations_end_date) %></p>
@@ -42,7 +42,7 @@
           <% end %>
 
           <% if process.result_publication.enabled? %>
-            <li <%= 'class=active' if phase.to_sym == :result_publication %>>
+            <li <%= 'class=is-active' if phase.to_sym == :result_publication %>>
               <%= link_to result_publication_legislation_process_path(process) do %>
                 <h4><%= t('legislation.processes.shared.result_publication_date') %></h4>
                 <p><%= format_date(process.result_publication_date) %></p>
diff --git a/app/views/legislation/proposals/_categories.html.erb b/app/views/legislation/proposals/_categories.html.erb
index d0c34d23f..99ccea4be 100644
--- a/app/views/legislation/proposals/_categories.html.erb
+++ b/app/views/legislation/proposals/_categories.html.erb
@@ -5,7 +5,7 @@
 <ul id="categories" class="no-bullet categories">
   <% @process.tag_list_on(:customs).each do |tag| %>
     <li class="inline-block">
-      <% css_class = { class: 'active' } if params[:search] == tag %>
+      <% css_class = { class: 'is-active' } if params[:search] == tag %>
       <%= link_to tag,
                   legislation_process_proposals_path(process_id: @process, search: tag),
                   css_class || {} %>
diff --git a/app/views/legislation/questions/_answer_form.html.erb b/app/views/legislation/questions/_answer_form.html.erb
index fd379b845..096bf9627 100644
--- a/app/views/legislation/questions/_answer_form.html.erb
+++ b/app/views/legislation/questions/_answer_form.html.erb
@@ -3,7 +3,7 @@
 
     <%= form_for answer, url: legislation_process_question_answers_path(process, question, answer), remote: true , html: { class: "controls-stacked"} do |f| %>
       <% question.question_options.each do |question_option| %>
-        <label class="control radio <%= 'active' if @answer.legislation_question_option_id == question_option.id %>">
+        <label class="control radio <%= 'is-active' if @answer.legislation_question_option_id == question_option.id %>">
           <%= f.radio_button :legislation_question_option_id, question_option.id, label: false %>
           <span class="control-indicator"></span>
           <%= question_option.value %>
@@ -16,7 +16,7 @@
 
     <form class="controls-stacked disabled">
       <% question.question_options.each do |question_option| %>
-        <label class="control radio <%= 'active' if answer.persisted? && (answer.legislation_question_option_id == question_option.id) %>">
+        <label class="control radio <%= 'is-active' if answer.persisted? && (answer.legislation_question_option_id == question_option.id) %>">
           <input id="quiz-1" name="radio" type="radio" disabled="true">
           <span class="control-indicator"></span>
           <%= question_option.value %>
diff --git a/app/views/management/_menu.html.erb b/app/views/management/_menu.html.erb
index 75e832a24..9aac8d9a0 100644
--- a/app/views/management/_menu.html.erb
+++ b/app/views/management/_menu.html.erb
@@ -1,6 +1,6 @@
 <div class="admin-sidebar">
   <ul id="admin_menu" data-accordion-menu data-multi-open="false">
-    <li <%= "class=active" if controller_name == "document_verifications" ||
+    <li <%= "class=is-active" if controller_name == "document_verifications" ||
                               controller_name == "email_verifications" ||
                               controller_name == "users" %>>
       <%= link_to management_document_verifications_path do %>
@@ -26,28 +26,28 @@
       </ul>
     </li>
 
-    <li <%= "class=active" if controller_name == "proposals" && action_name == "new" %>>
+    <li <%= "class=is-active" if controller_name == "proposals" && action_name == "new" %>>
       <%= link_to new_management_proposal_path do %>
         <span class="icon-proposals"></span>
         <%= t("management.menu.create_proposal") %>
       <% end %>
     </li>
 
-    <li <%= "class=active" if controller_name == "proposals" && action_name == "index"  %>>
+    <li <%= "class=is-active" if controller_name == "proposals" && action_name == "index"  %>>
       <%= link_to management_proposals_path do %>
         <span class="icon-like"></span>
         <%= t("management.menu.support_proposals") %>
       <% end %>
     </li>
 
-    <li <%= "class=active" if controller_name == "spending_proposals" && action_name == "new" %>>
+    <li <%= "class=is-active" if controller_name == "spending_proposals" && action_name == "new" %>>
       <%= link_to new_management_spending_proposal_path do %>
         <span class="icon-budget"></span>
         <%= t("management.menu.create_spending_proposal") %>
       <% end %>
     </li>
 
-    <li <%= "class=active" if controller_name == "spending_proposals" && action_name == "index" %>>
+    <li <%= "class=is-active" if controller_name == "spending_proposals" && action_name == "index" %>>
       <%= link_to management_spending_proposals_path do %>
         <span class="icon-like"></span>
         <%= t("management.menu.support_spending_proposals") %>
@@ -55,7 +55,7 @@
     </li>
 
     <% if Setting['feature.budgets'] %>
-      <li <%= "class=active" if (controller_name == "budget_investments" && action_name == "new") ||
+      <li <%= "class=is-active" if (controller_name == "budget_investments" && action_name == "new") ||
                                 (controller_name == "budget" && action_name == 'create_investments') %>>
         <%= link_to create_investments_management_budgets_path do %>
           <span class="icon-budget"></span>
@@ -63,7 +63,7 @@
         <% end %>
       </li>
 
-      <li <%= "class=active" if (controller_name == "budget_investments" && action_name == "index") ||
+      <li <%= "class=is-active" if (controller_name == "budget_investments" && action_name == "index") ||
                                 (controller_name == "budget" && action_name == "support_investments")%>>
         <%= link_to support_investments_management_budgets_path do %>
           <span class="icon-like"></span>
@@ -71,7 +71,7 @@
         <% end %>
       </li>
 
-        <li <%= "class=active" if (controller_name == "budget_investments" && action_name == "print") ||
+        <li <%= "class=is-active" if (controller_name == "budget_investments" && action_name == "print") ||
             (controller_name == "budgets" && action_name == "print_investments") %>>
           <%= link_to print_investments_management_budgets_path do %>
               <span class="icon-print"></span>
@@ -80,14 +80,14 @@
         </li>
     <% end %>
 
-    <li <%= "class=active" if controller_name == "proposals" && action_name == "print" %>>
+    <li <%= "class=is-active" if controller_name == "proposals" && action_name == "print" %>>
       <%= link_to print_management_proposals_path do %>
         <span class="icon-print"></span>
         <%= t("management.menu.print_proposals") %>
       <% end %>
     </li>
 
-    <li <%= "class=active" if controller_name == "spending_proposals" && action_name == "print" %>>
+    <li <%= "class=is-active" if controller_name == "spending_proposals" && action_name == "print" %>>
       <%= link_to print_management_spending_proposals_path do %>
         <span class="icon-print"></span>
         <%= t("management.menu.print_spending_proposals") %>
diff --git a/app/views/moderation/_menu.html.erb b/app/views/moderation/_menu.html.erb
index d9aa8ddcd..44232ce2c 100644
--- a/app/views/moderation/_menu.html.erb
+++ b/app/views/moderation/_menu.html.erb
@@ -5,7 +5,7 @@
     </li>
 
     <% if feature?(:proposals) %>
-      <li <%= "class=active" if controller_name == "proposals" %>>
+      <li <%= "class=is-active" if controller_name == "proposals" %>>
         <%= link_to moderation_proposals_path do %>
           <span class="icon-proposals"></span>
           <%= t("moderation.menu.proposals") %>
@@ -14,7 +14,7 @@
     <% end %>
 
     <% if feature?(:debates) %>
-      <li <%= "class=active" if controller_name == "debates" %>>
+      <li <%= "class=is-active" if controller_name == "debates" %>>
         <%= link_to moderation_debates_path do %>
           <span class="icon-debates"></span>
           <%= t('moderation.menu.flagged_debates') %>
@@ -22,14 +22,14 @@
       </li>
     <% end %>
 
-    <li <%= "class=active" if controller_name == "comments" %>>
+    <li <%= "class=is-active" if controller_name == "comments" %>>
       <%= link_to moderation_comments_path do %>
         <span class="icon-comments"></span>
         <%= t("moderation.menu.flagged_comments") %>
       <% end %>
     </li>
 
-    <li <%= "class=active" if controller_name == "users" %>>
+    <li <%= "class=is-active" if controller_name == "users" %>>
       <%= link_to moderation_users_path do %>
         <span class="icon-user"></span>
         <%= t("moderation.menu.users") %>
diff --git a/app/views/officing/_menu.html.erb b/app/views/officing/_menu.html.erb
index c96fd8c07..e954d2195 100644
--- a/app/views/officing/_menu.html.erb
+++ b/app/views/officing/_menu.html.erb
@@ -1,14 +1,14 @@
 <div class="admin-sidebar" data-equalizer-watch>
   <ul id="officing_menu">
 
-    <li <%= "class=active" if controller_name == "voters" %>>
+    <li <%= "class=is-active" if controller_name == "voters" %>>
       <%= link_to new_officing_residence_path do %>
         <span class="icon-user"></span>
         <%= t("officing.menu.voters") %>
       <% end %>
     </li>
 
-    <li <%= "class=active" if ["results"].include?(controller_name) || (controller_name == "polls" && action_name == "final") %>>
+    <li <%= "class=is-active" if ["results"].include?(controller_name) || (controller_name == "polls" && action_name == "final") %>>
       <%= link_to final_officing_polls_path do %>
         <span class="icon-user"></span>
         <%= t("officing.menu.total_recounts") %>
diff --git a/app/views/polls/_gallery.html.erb b/app/views/polls/_gallery.html.erb
index 839d2ef4e..9082e8901 100644
--- a/app/views/polls/_gallery.html.erb
+++ b/app/views/polls/_gallery.html.erb
@@ -17,7 +17,7 @@
     </li>
 
     <% answer.images.reverse.each_with_index do |image, index| %>
-      <li class="orbit-slide <%= active_class(index) %>">
+      <li class="orbit-slide <%= is_active_class(index) %>">
         <%= link_to image.attachment.url(:original), target: "_blank" do %>
           <%= image_tag image.attachment.url(:original),
                         class: "orbit-image",
@@ -31,7 +31,7 @@
 
   <nav class="orbit-bullets">
     <% answer.images.each_with_index do |image, index| %>
-      <button class="<%= active_class(index) %>" data-slide="<%= index %>">
+      <button class="<%= is_active_class(index) %>" data-slide="<%= index %>">
         <span class="show-for-sr"><%= image.title.unicode_normalize %></span>
       </button>
     <% end %>
diff --git a/app/views/proposals/_categories.html.erb b/app/views/proposals/_categories.html.erb
index a694eb555..6e12096e4 100644
--- a/app/views/proposals/_categories.html.erb
+++ b/app/views/proposals/_categories.html.erb
@@ -5,7 +5,7 @@
 <ul id="categories" class="no-bullet categories">
   <% @categories.each do |category| %>
     <li class="inline-block">
-      <% css_class = { class: 'active' } if params[:search] == category.name %>
+      <% css_class = { class: 'is-active' } if params[:search] == category.name %>
       <%= link_to category.name, proposals_path(search: category.name), css_class || {} %>
     </li>
   <% end %>
diff --git a/app/views/shared/_filter_subnav_vertical.html.erb b/app/views/shared/_filter_subnav_vertical.html.erb
index 7192dbd80..e1af05ef5 100644
--- a/app/views/shared/_filter_subnav_vertical.html.erb
+++ b/app/views/shared/_filter_subnav_vertical.html.erb
@@ -3,7 +3,7 @@
 
   <% @valid_filters.each do |filter| %>
     <% if @current_filter == filter %>
-      <li class="active">
+      <li class="is-active">
         <h2><%= t("#{i18n_namespace}.filters.#{filter}") %></h2>
       </li>
     <% else %>
diff --git a/app/views/shared/_order_links.html.erb b/app/views/shared/_order_links.html.erb
index 22081bcdc..231cbc657 100644
--- a/app/views/shared/_order_links.html.erb
+++ b/app/views/shared/_order_links.html.erb
@@ -1,7 +1,7 @@
 <ul class="no-bullet submenu">
   <% @valid_orders.each do |order| %>
     <li class="inline-block">
-      <%= link_to current_path_with_query_params(order: order, page: 1), class: order == @current_order ? 'active' : '' do %>
+      <%= link_to current_path_with_query_params(order: order, page: 1), class: order == @current_order ? 'is-active' : '' do %>
         <%= content_tag(order == @current_order ? :h2 : :span) do %>
           <%= t("#{i18n_namespace}.orders.#{order}") %>
         <% end %>
diff --git a/app/views/shared/_subnavigation.html.erb b/app/views/shared/_subnavigation.html.erb
index 4c9b79580..6209fca1e 100644
--- a/app/views/shared/_subnavigation.html.erb
+++ b/app/views/shared/_subnavigation.html.erb
@@ -56,7 +56,7 @@
       <%= link_to t("layouts.header.help"),
                     help_path,
                     accesskey: "5",
-                    class: ("active" if current_page?(help_path)),
+                    class: ("is-active" if current_page?(help_path)),
                     title: t("shared.go_to_page") + t("layouts.header.help") %>
     </li>
   </ul>
diff --git a/app/views/valuation/_menu.html.erb b/app/views/valuation/_menu.html.erb
index 3908b9279..c8ff25700 100644
--- a/app/views/valuation/_menu.html.erb
+++ b/app/views/valuation/_menu.html.erb
@@ -5,7 +5,7 @@
     </li>
 
     <% if feature?(:spending_proposals) %>
-      <li <%= "class=active" if controller_name == "spending_proposals" %>>
+      <li <%= "class=is-active" if controller_name == "spending_proposals" %>>
         <%= link_to valuation_spending_proposals_path do %>
           <span class="icon-budget"></span>
           <%= t("valuation.menu.spending_proposals") %>
@@ -14,7 +14,7 @@
     <% end %>
 
     <% if feature?(:budgets) %>
-      <li <%= "class=active" if controller_name == "budget_investments" %>>
+      <li <%= "class=is-active" if controller_name == "budget_investments" %>>
         <%= link_to valuation_budgets_path do %>
           <span class="icon-budget"></span>
           <%= t("valuation.menu.budgets") %>
diff --git a/app/views/valuation/budget_investments/index.html.erb b/app/views/valuation/budget_investments/index.html.erb
index 361ead7fb..20bdf95cb 100644
--- a/app/views/valuation/budget_investments/index.html.erb
+++ b/app/views/valuation/budget_investments/index.html.erb
@@ -8,7 +8,7 @@
     <div class="small-12 medium-4 column select-heading">
       <% slice.each do |filter| %>
         <%= link_to valuation_budget_budget_investments_path(budget_id: @budget.id, heading_id: filter[:id]),
-                    class: "#{'active' if params[:heading_id].to_s == filter[:id].to_s}" do %>
+                    class: "#{'is-active' if params[:heading_id].to_s == filter[:id].to_s}" do %>
           <%= filter[:name] %> (<%= filter[:count] %>)
         <% end %>
       <% end %>
diff --git a/app/views/valuation/spending_proposals/index.html.erb b/app/views/valuation/spending_proposals/index.html.erb
index 8536ec424..25b967121 100644
--- a/app/views/valuation/spending_proposals/index.html.erb
+++ b/app/views/valuation/spending_proposals/index.html.erb
@@ -5,7 +5,7 @@
     <div class="small-12 medium-4 column select-geozone">
       <% slice.each do |filter| %>
         <%= link_to valuation_spending_proposals_path(geozone_id: filter[:id]),
-                    class: "#{'active' if params[:geozone_id].to_s == filter[:id].to_s}" do %>
+                    class: "#{'is-active' if params[:geozone_id].to_s == filter[:id].to_s}" do %>
           <%= filter[:name] %>&nbsp;(<%= filter[:pending_count] %>)
         <% end %>
       <% end %>
diff --git a/app/views/verification/letter/new.html.erb b/app/views/verification/letter/new.html.erb
index e0f696171..0909ebf46 100644
--- a/app/views/verification/letter/new.html.erb
+++ b/app/views/verification/letter/new.html.erb
@@ -9,7 +9,7 @@
       <div class="small-4 column verification-step completed">
         <span class="number">2</span> <%= t("verification.step_2") %>
       </div>
-      <div class="small-4 column verification-step active">
+      <div class="small-4 column verification-step is-active">
         <span class="number">3</span> <%= t("verification.step_3") %>
       </div>
 
diff --git a/app/views/verification/residence/new.html.erb b/app/views/verification/residence/new.html.erb
index 95497b87b..7c2910581 100644
--- a/app/views/verification/residence/new.html.erb
+++ b/app/views/verification/residence/new.html.erb
@@ -3,7 +3,7 @@
   <div class="small-12 column">
 
     <div class="text-center">
-      <div class="small-4 column verification-step active">
+      <div class="small-4 column verification-step is-active">
         <span class="number">1</span> <%= t("verification.step_1") %>
       </div>
       <div class="small-4 column verification-step">
diff --git a/app/views/verification/sms/edit.html.erb b/app/views/verification/sms/edit.html.erb
index c94b5c9d0..b9d9c743a 100644
--- a/app/views/verification/sms/edit.html.erb
+++ b/app/views/verification/sms/edit.html.erb
@@ -6,7 +6,7 @@
       <div class="small-4 column verification-step completed">
         <span class="number">1</span> <%= t("verification.step_1") %>
       </div>
-      <div class="small-4 column verification-step active">
+      <div class="small-4 column verification-step is-active">
         <span class="number">2</span> <%= t("verification.step_2") %>
       </div>
       <div class="small-4 column verification-step">
diff --git a/app/views/verification/sms/new.html.erb b/app/views/verification/sms/new.html.erb
index 19a8a2e3b..47ba8aed0 100644
--- a/app/views/verification/sms/new.html.erb
+++ b/app/views/verification/sms/new.html.erb
@@ -6,7 +6,7 @@
       <div class="small-4 column verification-step completed">
         <span class="number">1</span> <%= t("verification.step_1") %>
       </div>
-      <div class="small-4 column verification-step active">
+      <div class="small-4 column verification-step is-active">
         <span class="number">2</span> <%= t("verification.step_2") %>
       </div>
       <div class="small-4 column verification-step">
diff --git a/app/views/welcome/_recommended_carousel.html.erb b/app/views/welcome/_recommended_carousel.html.erb
index 15eaea653..38339a2ad 100644
--- a/app/views/welcome/_recommended_carousel.html.erb
+++ b/app/views/welcome/_recommended_carousel.html.erb
@@ -9,7 +9,7 @@
         <ul class="orbit-container no-bullet" tabindex="0" >
           <% recommendeds.each_with_index do |recommended, index| %>
 
-            <li class="orbit-slide <%= active_class(index) %>" data-slide="<%= index %>" style="position: relative; <%= slide_display(index) %>" aria-live="polite">
+            <li class="orbit-slide <%= is_active_class(index) %>" data-slide="<%= index %>" style="position: relative; <%= slide_display(index) %>" aria-live="polite">
               <div class="card">
                 <%= render_recommendation_image(recommended, image_default) %>
                 <div class="card-section">
@@ -29,7 +29,7 @@
 
       <div class="orbit-bullets">
         <% recommendeds.each_with_index do |recommended, index| %>
-          <button data-slide="<%= index %>" class="<%= active_class(index) %>">
+          <button data-slide="<%= index %>" class="<%= is_active_class(index) %>">
             <span class="show-for-sr">Second slide details.</span>
           </button>
         <% end %>
diff --git a/spec/features/budgets/ballots_spec.rb b/spec/features/budgets/ballots_spec.rb
index 86e6f0596..309f1b531 100644
--- a/spec/features/budgets/ballots_spec.rb
+++ b/spec/features/budgets/ballots_spec.rb
@@ -261,7 +261,7 @@ feature 'Ballots' do
       click_link "States"
 
       expect(page).to have_content "California"
-      expect(page).to have_css("#budget_heading_#{california.id}.active")
+      expect(page).to have_css("#budget_heading_#{california.id}.is-active")
     end
 
     scenario 'Change my heading', :js do
@@ -283,8 +283,8 @@ feature 'Ballots' do
 
       visit budget_path(budget)
       click_link "States"
-      expect(page).to have_css("#budget_heading_#{new_york.id}.active")
-      expect(page).not_to have_css("#budget_heading_#{california.id}.active")
+      expect(page).to have_css("#budget_heading_#{new_york.id}.is-active")
+      expect(page).not_to have_css("#budget_heading_#{california.id}.is-active")
     end
 
     scenario 'View another heading' do
diff --git a/spec/features/budgets/budgets_spec.rb b/spec/features/budgets/budgets_spec.rb
index ba5935f70..7d08ac017 100644
--- a/spec/features/budgets/budgets_spec.rb
+++ b/spec/features/budgets/budgets_spec.rb
@@ -188,7 +188,7 @@ feature 'Budgets' do
     expect(page).to have_content "This is the summary for finished phase"
     expect(page).to have_content "March 21, 2018 - March 29, 2018"
 
-    expect(page).to have_css(".phase.active", count: 1)
+    expect(page).to have_css(".phase.is-active", count: 1)
   end
 
   context "Index map" do
diff --git a/spec/features/budgets/investments_spec.rb b/spec/features/budgets/investments_spec.rb
index 26742c05f..1ad7a82e9 100644
--- a/spec/features/budgets/investments_spec.rb
+++ b/spec/features/budgets/investments_spec.rb
@@ -580,7 +580,7 @@ feature 'Budget Investments' do
 
       visit budget_investments_path(budget, heading_id: heading.id)
       click_link 'highest rated'
-      expect(page).to have_selector('a.active', text: 'highest rated')
+      expect(page).to have_selector('a.is-active', text: 'highest rated')
 
       within '#budget-investments' do
         expect(best_proposal.title).to appear_before(medium_proposal.title)
@@ -1276,7 +1276,7 @@ feature 'Budget Investments' do
       visit budget_investments_path(budget, heading_id: heading.id)
 
       click_link 'by price'
-      expect(page).to have_selector('a.active', text: 'by price')
+      expect(page).to have_selector('a.is-active', text: 'by price')
 
       within '#budget-investments' do
         expect(high_investment.title).to appear_before(mid_investment.title)
diff --git a/spec/features/budgets/results_spec.rb b/spec/features/budgets/results_spec.rb
index 3eb349df0..31c00a0a1 100644
--- a/spec/features/budgets/results_spec.rb
+++ b/spec/features/budgets/results_spec.rb
@@ -21,7 +21,7 @@ feature 'Results' do
     visit budget_path(budget)
     click_link "See results"
 
-    expect(page).to have_selector('a.active', text: budget.headings.first.name)
+    expect(page).to have_selector('a.is-active', text: budget.headings.first.name)
 
     within("#budget-investments-compatible") do
       expect(page).to have_content investment1.title
diff --git a/spec/features/debates_spec.rb b/spec/features/debates_spec.rb
index a0e1c1c5b..c4018ce76 100644
--- a/spec/features/debates_spec.rb
+++ b/spec/features/debates_spec.rb
@@ -365,7 +365,7 @@ feature 'Debates' do
       visit debates_path
       click_link 'highest rated'
 
-      expect(page).to have_selector('a.active', text: 'highest rated')
+      expect(page).to have_selector('a.is-active', text: 'highest rated')
 
       within '#debates' do
         expect(best_debate.title).to appear_before(medium_debate.title)
@@ -384,7 +384,7 @@ feature 'Debates' do
       visit debates_path
       click_link 'newest'
 
-      expect(page).to have_selector('a.active', text: 'newest')
+      expect(page).to have_selector('a.is-active', text: 'newest')
 
       within '#debates' do
         expect(best_debate.title).to appear_before(medium_debate.title)
@@ -447,7 +447,7 @@ feature 'Debates' do
 
         click_link 'recommendations'
 
-        expect(page).to have_selector('a.active', text: 'recommendations')
+        expect(page).to have_selector('a.is-active', text: 'recommendations')
 
         within '#debates' do
           expect(best_debate.title).to appear_before(medium_debate.title)
@@ -837,7 +837,7 @@ feature 'Debates' do
       fill_in "search", with: "Show you got"
       click_button "Search"
 
-      expect(page).to have_selector("a.active", text: "relevance")
+      expect(page).to have_selector("a.is-active", text: "relevance")
 
       within("#debates") do
         expect(all(".debate")[0].text).to match "Show you got"
@@ -856,7 +856,7 @@ feature 'Debates' do
       fill_in "search", with: "Show you got"
       click_button "Search"
       click_link 'newest'
-      expect(page).to have_selector("a.active", text: "newest")
+      expect(page).to have_selector("a.is-active", text: "newest")
 
       within("#debates") do
         expect(all(".debate")[0].text).to match "Show you got"
@@ -881,7 +881,7 @@ feature 'Debates' do
       fill_in "search", with: "Show you got"
       click_button "Search"
       click_link 'recommendations'
-      expect(page).to have_selector("a.active", text: "recommendations")
+      expect(page).to have_selector("a.is-active", text: "recommendations")
 
       within("#debates") do
         expect(all(".debate")[0].text).to match "Show you got"
diff --git a/spec/features/legislation/questions_spec.rb b/spec/features/legislation/questions_spec.rb
index 42e731fbf..d871d120b 100644
--- a/spec/features/legislation/questions_spec.rb
+++ b/spec/features/legislation/questions_spec.rb
@@ -77,7 +77,7 @@ feature 'Legislation' do
       choose("I don't know")
       click_button "Submit answer"
 
-      within(:css, "label.active") do
+      within(:css, "label.is-active") do
         expect(page).to have_content("I don't know")
         expect(page).not_to have_content("Yes")
         expect(page).not_to have_content("No")
diff --git a/spec/features/proposals_spec.rb b/spec/features/proposals_spec.rb
index 2fcb6a17e..ce5987532 100644
--- a/spec/features/proposals_spec.rb
+++ b/spec/features/proposals_spec.rb
@@ -688,7 +688,7 @@ feature 'Proposals' do
 
       visit proposals_path
       click_link 'highest rated'
-      expect(page).to have_selector('a.active', text: 'highest rated')
+      expect(page).to have_selector('a.is-active', text: 'highest rated')
 
       within '#proposals' do
         expect(best_proposal.title).to appear_before(medium_proposal.title)
@@ -708,7 +708,7 @@ feature 'Proposals' do
 
       visit proposals_path
       click_link 'newest'
-      expect(page).to have_selector('a.active', text: 'newest')
+      expect(page).to have_selector('a.is-active', text: 'newest')
 
       within '#proposals' do
         expect(best_proposal.title).to appear_before(medium_proposal.title)
@@ -771,7 +771,7 @@ feature 'Proposals' do
 
         click_link 'recommendations'
 
-        expect(page).to have_selector('a.active', text: 'recommendations')
+        expect(page).to have_selector('a.is-active', text: 'recommendations')
 
         within '#proposals-list' do
           expect(best_proposal.title).to appear_before(medium_proposal.title)
@@ -1288,7 +1288,7 @@ feature 'Proposals' do
       fill_in "search", with: "Show what you got"
       click_button "Search"
 
-      expect(page).to have_selector("a.active", text: "relevance")
+      expect(page).to have_selector("a.is-active", text: "relevance")
 
       within("#proposals") do
         expect(all(".proposal")[0].text).to match "Show what you got"
@@ -1307,7 +1307,7 @@ feature 'Proposals' do
       fill_in "search", with: "Show what you got"
       click_button "Search"
       click_link 'newest'
-      expect(page).to have_selector("a.active", text: "newest")
+      expect(page).to have_selector("a.is-active", text: "newest")
 
       within("#proposals") do
         expect(all(".proposal")[0].text).to match "Show you got"
@@ -1332,7 +1332,7 @@ feature 'Proposals' do
       fill_in "search", with: "Show you got"
       click_button "Search"
       click_link 'recommendations'
-      expect(page).to have_selector("a.active", text: "recommendations")
+      expect(page).to have_selector("a.is-active", text: "recommendations")
 
       within("#proposals") do
         expect(all(".proposal")[0].text).to match "Show you got"