alphagov · kr8n3r · Apr 13, 2018 · Apr 11, 2018 · Apr 11, 2018 · Apr 11, 2018
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,18 +4,32 @@ Note: We're not following semantic versioning yet, we are going to talk about th
 
 ## Unreleased
 
+Breaking change:
+
+- Remove -c -o -h layer prefixes 
+  ([PR #644](https://github.com/alphagov/govuk-frontend/pull/644))
+  In user research and in feedback from Private Beta partners we 
+  learned that users didn't really understand what -o, -c and -h prefixes 
+  stand for or why they're useful.
+
+  They also introduced additional cognitive load when composing classes, 
+  having to remember which suffix the classname contains.
+
+  As a result of this, we're removing these prefixes from our codebase.
+
 Fixes:
 
 - Remove redundant font-family declaration from the button component – this will
   also fix an issue where the button uses New Transport when printed instead of
   falling back to the print stack as expected.
   (PR [#650](https://github.com/alphagov/govuk-frontend/pull/650))
 
+Internal:
 
-Internal
 - Update publishing docs (PR [#651](https://github.com/alphagov/govuk-frontend/pull/651)) 
 - Wrap `app.css` in conditional comments in review app layout (PR [#653](https://github.com/alphagov/govuk-frontend/pull/653))
 
+
 ## 0.0.27-alpha (Breaking release)
 
 Breaking changes:

diff --git a/README.md b/README.md
@@ -148,7 +148,7 @@ Add the CSS and JavaScript code to your HTML template:
   </head>
   <body>
     <!-- Copy and paste component HTML-->
-    <button class="govuk-c-button">This is a button component</button>
+    <button class="govuk-button">This is a button component</button>
     <script src="assets/govuk-frontend-[latest version].min.js"></script>
   </body>
 </html>

diff --git a/app/assets/scss/partials/_app.scss b/app/assets/scss/partials/_app.scss
@@ -17,14 +17,14 @@ body {
   display: inline;
 }
 
-.app-c-component-preview {
+.app-component-preview {
   position: relative;
   margin-top: -15px;
   margin-bottom: 15px;
   width: 100%;
 }
 
-.app-c-component-preview__iframe {
+.app-component-preview__iframe {
   z-index: 20;
   display: block;
   position: relative;
@@ -35,8 +35,8 @@ body {
 // Highlight the whitespace around a component, so you can see without having to
 // inspect it.
 .app-iframe-in-component-preview {
-  .app-c-whitespace-highlight {
-    @include govuk-h-clearfix;
+  .app-whitespace-highlight {
+    @include govuk-clearfix;
 
     content: " ";
     display: table;

diff --git a/app/views/examples/all-components/index.njk b/app/views/examples/all-components/index.njk
@@ -8,7 +8,7 @@
   "text": "Back"
 }) }}
 
-  <main class="govuk-o-main-wrapper">
+  <main class="govuk-main-wrapper">
     {% include "back-link/back-link.njk" %}
     {% include "breadcrumbs/breadcrumbs.njk" %}
     {% include "button/button.njk" %}

diff --git a/app/views/examples/error-messages/index.njk b/app/views/examples/error-messages/index.njk
@@ -37,7 +37,7 @@
   "text": "Back"
 }) }}
 
-<main class="govuk-o-main-wrapper">
+<main class="govuk-main-wrapper">
 
 {% from "fieldset/macro.njk" import govukFieldset %}
 {% from "label/macro.njk" import govukLabel %}
@@ -197,7 +197,7 @@
       items:[
         {
           name: 'day',
-          classes: 'govuk-c-input--error'
+          classes: 'govuk-input--error'
         },
         {
           name: 'month'

diff --git a/app/views/examples/error-summary-with-messages/index.njk b/app/views/examples/error-summary-with-messages/index.njk
@@ -13,7 +13,7 @@
   "text": "Back"
 }) }}
 
-<main class="govuk-o-main-wrapper">
+<main class="govuk-main-wrapper">
 
 <form action="/" method="post">
 

diff --git a/app/views/examples/error-summary-with-one-thing-per-page/index.njk b/app/views/examples/error-summary-with-one-thing-per-page/index.njk
@@ -12,7 +12,7 @@
   "text": "Back"
 }) }}
 
-<main class="govuk-o-main-wrapper">
+<main class="govuk-main-wrapper">
 
 <form action="/" method="post">
 

diff --git a/app/views/examples/form-alignment/index.njk b/app/views/examples/form-alignment/index.njk
@@ -38,7 +38,7 @@
   "text": "Back"
 }) }}
 
-<main class="govuk-o-main-wrapper">
+<main class="govuk-main-wrapper">
 
   {% from "fieldset/macro.njk" import govukFieldset %}
   {% from "label/macro.njk" import govukLabel %}
@@ -55,11 +55,11 @@
     {% call govukFieldset() %}
       {{ govukLabel({
         "text": "National Insurance number",
-        "for": "govuk-c-input-a"
+        "for": "govuk-input-a"
       }) }}
       <div class="app-u-w-half">
         {{ govukInput({
-          id: "govuk-c-input-a",
+          id: "govuk-input-a",
           name: "national-insurance-number"
         }) }}
       </div>

diff --git a/app/views/examples/form-elements/index.njk b/app/views/examples/form-elements/index.njk
@@ -9,7 +9,7 @@
   "text": "Back"
 }) }}
 
-<main class="govuk-o-main-wrapper">
+<main class="govuk-main-wrapper">
 
   {% from "fieldset/macro.njk" import govukFieldset %}
   {% from "input/macro.njk" import govukInput %}
@@ -37,7 +37,7 @@
     {% call govukFieldset() %}
       <span id="input"></span>
       {{ govukInput({
-        id: "govuk-c-input-a",
+        id: "govuk-input-a",
         label: {
           text: "National Insurance number"
         }
@@ -51,8 +51,8 @@
       <span id="textarea"></span>
       {% from "textarea/macro.njk" import govukTextarea %}
       {{ govukTextarea({
-        id: "govuk-c-textarea-a",
-        name: "govuk-c-textarea-a",
+        id: "govuk-textarea-a",
+        name: "govuk-textarea-a",
         rows: "5",
         label: {
           text: "Why can't you provide a National Insurance number?"
@@ -86,7 +86,7 @@
     <span id="radio-inline"></span>
     {{ govukRadios({
       "fieldset": {},
-      "classes": "govuk-c-radio--inline",
+      "classes": "govuk-radio--inline",
       "idPrefix": "radio-inline",
       "name": "radio-inline",
       "items": [

diff --git a/app/views/examples/grid/index.njk b/app/views/examples/grid/index.njk
@@ -9,70 +9,70 @@
   "text": "Back"
 }) }}
 
-<main id="content" role="main" class="govuk-o-main-wrapper">
+<main id="content" role="main" class="govuk-main-wrapper">
   <h1 class="govuk-heading-l">Example: Grid layout</h1>
-  <div class="govuk-o-grid">
-    <div class="govuk-o-grid__item govuk-o-grid__item--two-thirds">
+  <div class="govuk-grid">
+    <div class="govuk-grid__item govuk-grid__item--two-thirds">
       <h2 class="govuk-heading-m">Two thirds</h2>
       <p class="govuk-body">
         This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
       </p>
     </div>
-    <div class="govuk-o-grid__item govuk-o-grid__item--one-third">
+    <div class="govuk-grid__item govuk-grid__item--one-third">
       <h2 class="govuk-heading-m">One third</h2>
       <p class="govuk-body">
         This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
       </p>
     </div>
-    <div class="govuk-o-grid__item govuk-o-grid__item--one-third">
+    <div class="govuk-grid__item govuk-grid__item--one-third">
       <h2 class="govuk-heading-m">One third</h2>
       <p class="govuk-body">
         This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
       </p>
     </div>
-    <div class="govuk-o-grid__item govuk-o-grid__item--one-third">
+    <div class="govuk-grid__item govuk-grid__item--one-third">
       <h2 class="govuk-heading-m">One third</h2>
       <p class="govuk-body">
         This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
       </p>
     </div>
-    <div class="govuk-o-grid__item govuk-o-grid__item--one-third">
+    <div class="govuk-grid__item govuk-grid__item--one-third">
       <h2 class="govuk-heading-m">One third</h2>
       <p class="govuk-body">
         This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
       </p>
     </div>
-    <div class="govuk-o-grid__item govuk-o-grid__item--one-half">
+    <div class="govuk-grid__item govuk-grid__item--one-half">
       <h2 class="govuk-heading-m">One half</h2>
       <p class="govuk-body">
         This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
       </p>
     </div>
-    <div class="govuk-o-grid__item govuk-o-grid__item--one-half">
+    <div class="govuk-grid__item govuk-grid__item--one-half">
       <h2 class="govuk-heading-m">One half</h2>
       <p class="govuk-body">
         This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
       </p>
     </div>
-    <div class="govuk-o-grid__item govuk-o-grid__item--one-quarter">
+    <div class="govuk-grid__item govuk-grid__item--one-quarter">
       <h2 class="govuk-heading-m">One quarter</h2>
       <p class="govuk-body">
         This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
       </p>
     </div>
-    <div class="govuk-o-grid__item govuk-o-grid__item--one-quarter">
+    <div class="govuk-grid__item govuk-grid__item--one-quarter">
       <h2 class="govuk-heading-m">One quarter</h2>
       <p class="govuk-body">
         This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
       </p>
     </div>
-    <div class="govuk-o-grid__item govuk-o-grid__item--one-quarter">
+    <div class="govuk-grid__item govuk-grid__item--one-quarter">
       <h2 class="govuk-heading-m">One quarter</h2>
       <p class="govuk-body">
         This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
       </p>
     </div>
-    <div class="govuk-o-grid__item govuk-o-grid__item--one-quarter">
+    <div class="govuk-grid__item govuk-grid__item--one-quarter">
       <h2 class="govuk-heading-m">One quarter</h2>
       <p class="govuk-body">
         This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.

diff --git a/app/views/examples/links/index.njk b/app/views/examples/links/index.njk
@@ -27,10 +27,10 @@
   'Focussed active link': ':focus :active'
 } %}
 
-<main class="govuk-o-main-wrapper">
+<main class="govuk-main-wrapper">
 
-  <div class="govuk-o-grid">
-    <div class="govuk-o-grid__item govuk-o-grid__item--two-thirds">
+  <div class="govuk-grid">
+    <div class="govuk-grid__item govuk-grid__item--two-thirds">
 
       <h1 class="govuk-heading-xl">
         Links

diff --git a/app/views/examples/prose-scope/index.njk b/app/views/examples/prose-scope/index.njk
@@ -9,10 +9,10 @@
   "text": "Back"
 }) }}
 
-<main class="govuk-o-main-wrapper">
+<main class="govuk-main-wrapper">
 
-  <div class="govuk-o-grid">
-    <div class="govuk-o-grid__item govuk-o-grid__item--two-thirds">
+  <div class="govuk-grid">
+    <div class="govuk-grid__item govuk-grid__item--two-thirds">
       <h1 class="govuk-heading-xl">
         Prose scope
       </h1>

diff --git a/app/views/examples/typography/index.njk b/app/views/examples/typography/index.njk
@@ -11,10 +11,10 @@
 
 {% from 'table/macro.njk' import govukTable %}
 
-<main class="govuk-o-main-wrapper">
+<main class="govuk-main-wrapper">
 
-  <div class="govuk-o-grid">
-    <div class="govuk-o-grid__item govuk-o-grid__item--two-thirds">
+  <div class="govuk-grid">
+    <div class="govuk-grid__item govuk-grid__item--two-thirds">
 
       <h1 class="govuk-heading-xl">
         Typography

diff --git a/app/views/layouts/component-preview.njk b/app/views/layouts/component-preview.njk
@@ -5,7 +5,7 @@
 {% endblock %}
 
 {% block content %}
-  <div class="app-c-whitespace-highlight">
+  <div class="app-whitespace-highlight">
     {{ componentView | safe }}
   </div>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.15/iframeResizer.contentWindow.min.js"></script>

diff --git a/app/views/layouts/component.njk b/app/views/layouts/component.njk
@@ -11,7 +11,7 @@
 {% endset %}
 
 {% from "breadcrumbs/macro.njk" import govukBreadcrumbs %}
-<div class="govuk-o-width-container">
+<div class="govuk-width-container">
 {{ govukBreadcrumbs({
   "items": [
     { text: 'GOV.UK Frontend', href: '/' },
@@ -20,8 +20,8 @@
 }) }}
 </div>
 
-<div class="govuk-o-main-wrapper">
-  <div class="govuk-o-width-container">
+<div class="govuk-main-wrapper">
+  <div class="govuk-width-container">
     <h1 class="govuk-heading-xl">
     {% block componentName %}
     {{ componentNameHuman }}

diff --git a/app/views/layouts/http-error.njk b/app/views/layouts/http-error.njk
@@ -1,7 +1,7 @@
 {% extends "layout-debug.njk" %}
 
 {% block content %}
-  <div class="govuk-o-content">
+  <div class="govuk-content">
     <h1 class="govuk-heading-l">{{ error }}</h1>
     <p class="govuk-body">{{ message }}</p>
   </div>

diff --git a/app/views/layouts/index.njk b/app/views/layouts/index.njk
@@ -1,14 +1,14 @@
 {% extends "layout-debug.njk" %}
 
 {% block content %}
-  <div class="govuk-o-main-wrapper">
+  <div class="govuk-main-wrapper">
     <h1 class="govuk-heading-xl">
       GOV.UK Frontend
     </h1>
 
-    <div class="govuk-o-grid">
+    <div class="govuk-grid">
 
-      <div class="govuk-o-grid__item govuk-o-grid__item--one-half">
+      <div class="govuk-grid__item govuk-grid__item--one-half">
         <h2 class="govuk-heading-m">Components</h2>
 
         <ul class="govuk-list">
@@ -18,7 +18,7 @@
         </ul>
       </div>
 
-      <div class="govuk-o-grid__item govuk-o-grid__item--one-half">
+      <div class="govuk-grid__item govuk-grid__item--one-half">
         <h2 class="govuk-heading-m">Examples</h2>
 
         <ul class="govuk-list">