diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
index 2d3e36796f..25d64fc618 100644
--- a/src/components/button/_button.scss
+++ b/src/components/button/_button.scss
@@ -142,18 +142,20 @@
 .btn--mobile {
   @extend .btn--ghost;
   @extend .btn--small;
+
   $size: 0.6rem;
+
   position: relative;
   padding-right: $size * 2.5;
 
   &::before {
     content: '';
-    background: url('#{$static}/img/icons/icons--chevron-down-white.svg') no-repeat center center;
-    height: $size;
-    width: $size;
     position: absolute;
     top: 11px;
     right: 8px;
+    width: $size;
+    height: $size;
+    background: url('#{$static}/img/icons/icons--chevron-down-white.svg') no-repeat center center;
     background-size: $size $size;
   }
 
@@ -166,8 +168,4 @@
   @include mq(m) {
     display: none;
   }
-
-  .no-js & {
-    display: none;
-  }
 }
diff --git a/src/components/details/_details.scss b/src/components/details/_details.scss
index 75be52a133..39350a5c55 100644
--- a/src/components/details/_details.scss
+++ b/src/components/details/_details.scss
@@ -21,7 +21,7 @@ $details-caret-width: 1.1rem;
     pointer-events: none;
   }
 
-  &--has-js & {
+  &--initialised & {
     &__summary {
       padding: 0 0 0 ($details-caret-width + 0.4rem);
       color: $color-links;
diff --git a/src/components/details/collapsible.js b/src/components/details/collapsible.js
index 737f5f48f4..a8d45adc4d 100644
--- a/src/components/details/collapsible.js
+++ b/src/components/details/collapsible.js
@@ -34,7 +34,7 @@ export class Collapsible {
 
     this.summary.addEventListener('click', this.toggle.bind(this));
 
-    this.details.classList.add('details--has-js');
+    this.details.classList.add('details--initialised');
   }
 
   toggle(event) {
diff --git a/src/components/header/_header-nav.scss b/src/components/header/_header-nav.scss
index 87ac3fbb80..02441609d5 100644
--- a/src/components/header/_header-nav.scss
+++ b/src/components/header/_header-nav.scss
@@ -70,16 +70,12 @@
   }
 }
 
-.has-js {
-  .header-nav--mobile {
-    @include mq(xs, m) {
-      max-height: 0;
-      overflow: hidden;
-      opacity: 0;
-
-      .nav__item {
-        display: none;
-      }
+.header-nav--mobile {
+  @include mq(xs, m) {
+    opacity: 0;
+    max-height: 0;
+    .nav__item {
+      display: none;
     }
   }
 }
diff --git a/src/components/header/_macro.njk b/src/components/header/_macro.njk
index 73c70962e0..a2c701cdd4 100644
--- a/src/components/header/_macro.njk
+++ b/src/components/header/_macro.njk
@@ -85,7 +85,7 @@
                               "text": params.toggleButton.text,
                               "ariaControls": params.navigation.id,
                               "ariaLabel": params.toggleButton.ariaLabel,
-                              "classes": "btn--mobile js-toggle-main"
+                              "classes": "btn--mobile u-d-no js-toggle-main"
                           }) }}
                       </div>
                   {% endif %}
diff --git a/src/components/header/header-nav.js b/src/components/header/header-nav.js
index 5b99789ee9..db2feedf87 100644
--- a/src/components/header/header-nav.js
+++ b/src/components/header/header-nav.js
@@ -1,15 +1,16 @@
 import domReady from 'js/domready';
 
-export const attrExpanded = 'aria-expanded';
-export const attrHidden = 'aria-hidden';
-export const hideClass = 'header-nav--mobile';
-export const openClass = 'open';
+const attrExpanded = 'aria-expanded';
+const attrHidden = 'aria-hidden';
+const hideClass = 'header-nav--mobile';
+const openClass = 'open';
 
 export default class NavToggle {
   constructor(toggle, nav) {
     this.toggle = toggle;
     this.nav = nav;
     this.toggleNavBinding = this.toggleNav.bind(this);
+    this.toggle.classList.remove('u-d-no');
   }
 
   registerEvents() {
@@ -37,12 +38,12 @@ export default class NavToggle {
 }
 
 export function mobileNav() {
-  const toggleMainBtn = document.getElementsByClassName('js-toggle-main')[0];
-  const mainNavList = document.getElementsByClassName('js-header-nav')[0];
+  const toggleMainBtn = document.querySelector('.js-toggle-main');
+  const mainNavList = document.querySelector('.js-header-nav');
 
-  if (!toggleMainBtn) return;
-
-  new NavToggle(toggleMainBtn, mainNavList).registerEvents();
+  if (toggleMainBtn) {
+    new NavToggle(toggleMainBtn, mainNavList).registerEvents();
+  }
 }
 
 domReady(mobileNav);
diff --git a/src/components/tabs/_macro.njk b/src/components/tabs/_macro.njk
index 62e48560a8..a27e8f0fa0 100644
--- a/src/components/tabs/_macro.njk
+++ b/src/components/tabs/_macro.njk
@@ -1,6 +1,6 @@
 {% macro onsTabs(params) %}
     <section role="region" class="tabs">
-        <h2 class="tabs__title u-fs-m u-vh">{{params.title}}</h2>
+        <h2 class="tabs__title u-fs-m">{{params.title}}</h2>
         <ul class="tabs__list">
             {% for tab in params.tabs %}
                 <li id="tabId{{loop.index}}Item" class="tab__list-item"><a href="#tabId{{loop.index}}" class="tab" data=ga="click" data-ga-category="tabs" data-ga-action="Show: {{tab.title}}" data-ga-label="Show: {{tab.title}}">{{tab.title}}</a></li>
diff --git a/src/components/tabs/_tabs.scss b/src/components/tabs/_tabs.scss
index 2f76a424be..0685b53b08 100644
--- a/src/components/tabs/_tabs.scss
+++ b/src/components/tabs/_tabs.scss
@@ -2,102 +2,86 @@
   margin-bottom: 1rem;
 }
 
-.tabs__title {
-  .no-js & {
-    // We visually hide the title with u-vh and need to undo with no-js
-    position: relative;
-    width: auto;
-    height: auto;
-    margin: 0 0 1rem;
-  }
-}
-
 // Tabs - list
 .tabs__list {
-  margin: 0;
+  margin: 0 0 1rem 0;
   padding: 0;
   overflow: visible;
-  border-bottom: 1px solid $color-borders;
+  border-bottom: none;
 
-  .no-js &,
-  &--list {
-    border-bottom: none;
-    margin: 0 0 1rem 0;
-    padding-left: 0;
+  &--row {
+    margin: 0;
+    border-bottom: 1px solid $color-borders;
   }
 }
 
 .tab__list-item {
-  list-style: none;
-  display: inline;
-  margin: 0;
+  display: list-item;
   box-sizing: border-box;
+  margin: 0 0 0.3rem;
+  list-style: none;
 
-  .no-js &,
-  &--list {
-    // No-js & mobile display styling as table of contents
-    list-style: none;
-    display: list-item;
-    margin-bottom: 0.3rem;
+  &--row {
+    display: inline;
   }
 }
 
-.tab:not(.tab--list) {
-  .has-js & {
-    position: relative;
-    margin: 0 0.1rem 0 0;
-    padding: 0.5rem 1rem;
-    background: lighten($color-borders, 10%);
-    border: 1px solid lighten($color-borders, 10%);
-    border-radius: 3px 3px 0 0;
-    overflow: visible;
-    text-decoration: none;
+.tab--row {
+  position: relative;
+  margin: 0 0.1rem 0 0;
+  padding: 0.5rem 1rem;
+  background: lighten($color-borders, 10%);
+  border: 1px solid lighten($color-borders, 10%);
+  border-radius: 3px 3px 0 0;
+  overflow: visible;
+  text-decoration: none;
 
-    display: inline-block;
-    height: 2.5rem;
+  display: inline-block;
+  height: 2.5rem;
 
-    &:hover {
-      background-color: $color-borders;
-      border-color: $color-borders;
-    }
+  &:hover {
+    background-color: $color-borders;
+    border-color: $color-borders;
+  }
 
-    &:focus {
-      outline: 3px solid $color-focus;
-      outline-offset: 3px;
-    }
+  &:focus {
+    outline: 3px solid $color-focus;
+    outline-offset: 3px;
+  }
 
-    &[aria-selected='true'] {
-      // Tab when selected
-      border-radius: 3px 3px 0 0;
-      background-color: $color-white;
-      border-color: $color-borders;
-      font-weight: 700;
+  &[aria-selected='true'] {
+    // Tab when selected
+    border-radius: 3px 3px 0 0;
+    background-color: $color-white;
+    border-color: $color-borders;
+    font-weight: 700;
 
-      &:after {
-        // hides the lower border of the active tab.
-        position: absolute;
-        z-index: 3;
-        bottom: -3px;
-        right: 0;
-        left: 0;
-        height: 0.35rem;
-        background: $color-white;
-        box-shadow: none;
-        content: '';
-      }
+    &:after {
+      // hides the lower border of the active tab.
+      position: absolute;
+      z-index: 3;
+      bottom: -3px;
+      right: 0;
+      left: 0;
+      height: 0.35rem;
+      background: $color-white;
+      box-shadow: none;
+      content: '';
     }
   }
 }
 
 // Tabs - Panels
 .tabs__panel {
+  z-index: 10;
+  position: relative;
   margin-bottom: 1rem;
   padding-top: 1rem;
-  position: relative;
-  z-index: 10;
+
   &--hidden {
     display: none;
   }
+
   &:focus {
     outline: 3px solid $color-focus;
   }
diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js
index d78908ed37..c90267fab4 100644
--- a/src/components/tabs/tabs.js
+++ b/src/components/tabs/tabs.js
@@ -6,11 +6,12 @@
 import domready from 'js/domready';
 import matchMedia from 'js/utils/matchMedia';
 
-export const classTabs = 'tabs';
-export const classTab = 'tab';
-export const classTabList = 'tabs__list';
-export const classTabListItems = 'tab__list-item';
-export const classTabsPanel = 'tabs__panel';
+const classTabs = 'tabs';
+const classTab = 'tab';
+const classTabTitle = 'tabs__title';
+const classTabList = 'tabs__list';
+const classTabListItems = 'tab__list-item';
+const classTabsPanel = 'tabs__panel';
 
 const matchMediaUtil = matchMedia;
 
@@ -20,15 +21,18 @@ export default class Tabs {
     this.boundTabKeydown = this.onTabKeydown.bind(this);
 
     this.component = component;
+    this.tabsTitle = component.querySelector(`.${classTabTitle}`);
     this.tabs = [...component.getElementsByClassName(classTab)];
     this.tabList = component.getElementsByClassName(classTabList);
     this.tabListItems = [...component.getElementsByClassName(classTabListItems)];
     this.tabPanels = [...component.getElementsByClassName(classTabsPanel)];
 
     this.jsHiddenClass = 'tabs__panel--hidden';
-    this.jsTabListAsListClass = 'tabs__list--list';
-    this.jsTabItemAsListClass = 'tab__list-item--list';
-    this.jsTabAsListClass = 'tab--list';
+    this.jsTabListAsRowClass = 'tabs__list--row';
+    this.jsTabItemAsRowClass = 'tab__list-item--row';
+    this.jsTabAsListClass = 'tab--row';
+
+    this.tabsTitle.classList.add('u-vh');
 
     if (matchMediaUtil.hasMatchMedia()) {
       this.setupViewportChecks();
@@ -57,7 +61,7 @@ export default class Tabs {
 
   makeTabs() {
     this.tabList[0].setAttribute('role', 'tablist');
-    this.tabList[0].classList.remove(this.jsTabListAsListClass);
+    this.tabList[0].classList.add(this.jsTabListAsRowClass);
 
     this.tabPanels.forEach(panel => {
       panel.setAttribute('tabindex', '0');
@@ -65,12 +69,12 @@ export default class Tabs {
 
     this.tabListItems.forEach(item => {
       item.setAttribute('role', 'presentation');
-      item.classList.remove(this.jsTabItemAsListClass);
+      item.classList.add(this.jsTabItemAsRowClass);
     });
 
     this.tabs.forEach(tab => {
       this.setAttributes(tab);
-      tab.classList.remove(this.jsTabAsListClass);
+      tab.classList.add(this.jsTabAsListClass);
 
       tab.addEventListener('click', this.boundTabClick, true);
       tab.addEventListener('keydown', this.boundTabKeydown, true);
@@ -86,7 +90,7 @@ export default class Tabs {
 
   makeList() {
     this.tabList[0].removeAttribute('role');
-    this.tabList[0].classList.add(this.jsTabListAsListClass);
+    this.tabList[0].classList.remove(this.jsTabListAsRowClass);
 
     this.tabPanels.forEach(panel => {
       panel.removeAttribute('tabindex', '0');
@@ -94,13 +98,13 @@ export default class Tabs {
 
     this.tabListItems.forEach(item => {
       item.removeAttribute('role', 'presentation');
-      item.classList.add(this.jsTabItemAsListClass);
+      item.classList.remove(this.jsTabItemAsRowClass);
     });
 
     this.tabs.forEach(tab => {
       tab.removeEventListener('click', this.boundTabClick, true);
       tab.removeEventListener('keydown', this.boundTabKeydown, true);
-      tab.classList.add(this.jsTabAsListClass);
+      tab.classList.remove(this.jsTabAsListClass);
       this.unsetAttributes(tab);
     });
 
diff --git a/src/scss/objects/_page.scss b/src/scss/objects/_page.scss
index c998fc136c..4dd19e5039 100644
--- a/src/scss/objects/_page.scss
+++ b/src/scss/objects/_page.scss
@@ -1,5 +1,3 @@
-$nav-width: 14rem;
-
 .page {
   display: flex;
   flex-direction: column;
@@ -53,73 +51,11 @@ $nav-width: 14rem;
   overflow-x: hidden;
 }
 
-.page__menubtn {
-  display: none;
-  float: right;
-}
-
 .page__main {
   @extend .u-mt-s;
   margin-bottom: 4.5rem;
 }
 
-.no-js {
-  .page__nav {
-    margin-bottom: 2rem;
-  }
-}
-
-.has-js {
-  .page__nav {
-    display: none;
-    position: absolute;
-    top: 0;
-    right: 0- ($nav-width + 1rem);
-    margin: 0 0 1rem;
-    width: $nav-width;
-
-    @include mq(m) {
-      display: block;
-      position: relative;
-      right: 0;
-      width: auto;
-    }
-  }
-
-  .page__menubtn {
-    display: inline-block;
-    position: relative;
-    line-height: 1;
-    vertical-align: middle;
-  }
-
-  .page__container {
-    transition: transform 200ms ease-out;
-  }
-
-  .page__main {
-    transform: translateX(0);
-    transition: opacity 100ms ease-out;
-  }
-
-  .has-nav-open {
-    .page__container {
-      transform: translateX(0- ($nav-width + 1rem));
-    }
-    .page__main {
-      opacity: 0.2;
-      pointer-events: none;
-    }
-    .page__nav {
-      display: block;
-    }
-  }
-}
-
-.page__prefooter {
-  clear: both;
-}
-
-.page__footer {
-  clear: both;
+.page__container {
+  transition: transform 200ms ease-out;
 }
diff --git a/src/scss/utilities/_utilities.scss b/src/scss/utilities/_utilities.scss
index c7ea60e54e..868ed12b32 100644
--- a/src/scss/utilities/_utilities.scss
+++ b/src/scss/utilities/_utilities.scss
@@ -6,18 +6,6 @@
   display: block;
 }
 
-.u-no-js-hide {
-  .no-js & {
-    display: none;
-  }
-}
-
-.u-no-js-show {
-  .has-js & {
-    display: none;
-  }
-}
-
 // Utility class to override the height property to 'auto'
 .u-ha {
   height: auto;
diff --git a/src/styles/page-template/_template.njk b/src/styles/page-template/_template.njk
index 734e574c21..89f961347d 100644
--- a/src/styles/page-template/_template.njk
+++ b/src/styles/page-template/_template.njk
@@ -32,7 +32,7 @@
 {% endif %}
 
 <!doctype html>
-<html lang="{{ currentLanguageISOCode }}" class="no-js">
+<html lang="{{ currentLanguageISOCode }}">
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
diff --git a/src/tests/spec/collapsible/collapsible.spec.js b/src/tests/spec/collapsible/collapsible.spec.js
index 7f1ec8815f..be0c5ddfe9 100644
--- a/src/tests/spec/collapsible/collapsible.spec.js
+++ b/src/tests/spec/collapsible/collapsible.spec.js
@@ -35,8 +35,8 @@ describe('Component: Details', function() {
         expect(this.details.hasAttribute('open')).to.be.true;
       });
 
-      it('then the details element should not have a details--has-js class', function() {
-        expect(this.details.classList.contains('details--has-js')).to.be.false;
+      it('then the details element should not have a details--initialised class', function() {
+        expect(this.details.classList.contains('details--initialised')).to.be.false;
       });
 
       it('then the details element should not have an aria-expanded attribute', function() {
@@ -73,8 +73,8 @@ describe('Component: Details', function() {
         expect(this.details.hasAttribute('open')).to.be.false;
       });
 
-      it('then the details--has-js class should be added to the details element', function() {
-        expect(this.details.classList.contains('details--has-js')).to.be.true;
+      it('then the details--initialised class should be added to the details element', function() {
+        expect(this.details.classList.contains('details--initialised')).to.be.true;
       });
 
       it('then an aria-expanded attribute should be added to the details element', function() {
diff --git a/src/tests/spec/tabs/tabs.spec.js b/src/tests/spec/tabs/tabs.spec.js
index 2e22be0b4e..3c29205a18 100644
--- a/src/tests/spec/tabs/tabs.spec.js
+++ b/src/tests/spec/tabs/tabs.spec.js
@@ -100,7 +100,7 @@ describe('Component: Tabs', () => {
           });
 
           it('Then should be assigned the class tab--selected', function() {
-            expect(this.tab[0].getAttribute('class')).to.equal('tab tab--selected');
+            expect(this.tab[0].classList.contains('tab--selected')).to.be.true;
           });
 
           it('Then should show the corresponding panel', function() {
@@ -132,7 +132,7 @@ describe('Component: Tabs', () => {
           });
 
           it('Then the tab should be assigned the class tab--selected', function() {
-            expect(this.tab[1].getAttribute('class')).to.equal('tab tab--selected');
+            expect(this.tab[1].classList.contains('tab--selected')).to.be.true;
           });
 
           it('Then the the corresponding panel should be shown', function() {
diff --git a/src/views/layouts/_master.njk b/src/views/layouts/_master.njk
index 3067b5d5c6..d4b089eefa 100644
--- a/src/views/layouts/_master.njk
+++ b/src/views/layouts/_master.njk
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="no-js">
+<html lang="en">
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">