Merge pull request #644 from alphagov/remove-c-o-h-prefixes

Remove -c -o -h layer prefixes
alphagov · Apr 13, 2018 · 089de4d · 089de4d
2 parents 129210b + 778d150
commit 089de4d
Show file tree

Hide file tree

Showing 138 changed files with 2,201 additions and 2,191 deletions.
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">