From 2918ac00839705f467ff60067f89da2c66424946 Mon Sep 17 00:00:00 2001
From: Nick Field <heyimnick@live.com>
Date: Wed, 21 Dec 2016 14:50:44 +0000
Subject: [PATCH 1/3] Bem Refactor - payment confirmation

---
 css/payment-confirmation.css | 18 +++++++++---------
 payment-confirmation.html    | 36 ++++++++++++++++++------------------
 2 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/css/payment-confirmation.css b/css/payment-confirmation.css
index 54dad85..87a9370 100644
--- a/css/payment-confirmation.css
+++ b/css/payment-confirmation.css
@@ -1,4 +1,4 @@
-.thanks-container {
+.thanks {
   font-size: 0.95em;
   display: inline-block;
   margin-top: 3.5em;
@@ -6,12 +6,12 @@
   text-align: center;
 }
 
-.thanks-container__completion-message {
+.thanks__completion-message {
   font-weight: 100;
   font-size: 1.2em;
 }
 
-.thanks-container__thanks-message {
+.thanks__thanks-message {
   display: block;
   margin: auto;
   width: 60%;
@@ -20,12 +20,12 @@
   font-size: 2.2em;
 }
 
-.thanks-container__heart-image {
+.thanks__heart-image {
   padding-top: 1.5em;
   height: 2.7em;
 }
 
-.summary-container {
+.summary {
   display: block;
   margin: auto;
   width: 80%;
@@ -33,14 +33,14 @@
   padding-bottom: 6rem;
 }
 
-.summary-container__title {
+.summary__title {
   text-align: center;
   font-weight: 300;
   font-size: 1.1em;
   margin: 1.7em 0em 0em 0em;;
 }
 
-.summary-container__row {
+.row {
   position: relative;
   border-style: solid;
   border-color: #BDBDBD;
@@ -49,14 +49,14 @@
   height: 2.7em;
 }
 
-.summary-container__row__property-name {
+.row__property-name {
   margin-top: inherit;
   padding-left: 0.8em;
   position: absolute;
   font-size: 1.1em;
 }
 
-.summary-container__row__property-value {
+.row__property-value {
   position:  absolute;
   right: 0.8em;
   margin-top: inherit;
diff --git a/payment-confirmation.html b/payment-confirmation.html
index 8337fcd..5483b45 100644
--- a/payment-confirmation.html
+++ b/payment-confirmation.html
@@ -26,29 +26,29 @@
 
   </header>
 
-  <section class="thanks-container">
-    <h3 class="thanks-container__completion-message">Donation Complete</h3>
-    <h2 class="thanks-container__thanks-message">Thank you for your kindness</h2>
-    <img src="images/heart.png" class="thanks-container__heart-image">
+  <section class="thanks">
+    <h3 class="thanks__completion-message">Donation Complete</h3>
+    <h2 class="thanks__thanks-message">Thank you for your kindness</h2>
+    <img src="images/heart.png" class="thanks__heart-image">
   </section>
 
-  <section class="summary-container">
-    <h4 class="summary-container__title">Donation Summary</h4>
-    <div class="summary-container__row">
-      <p class="summary-container__row__property-name">Payment Method</p>
-      <p class="summary-container__row__property-value">VISA</p>
+  <section class="summary">
+    <h4 class="summary__title">Donation Summary</h4>
+    <div class="row">
+      <p class="row__property-name">Payment Method</p>
+      <p class="row__property-value">VISA</p>
     </div>
-    <div class="summary-container__row">
-      <p class="summary-container__row__property-name">Card Number</p>
-      <p class="summary-container__row__property-value">* * * 4325</p>
+    <div class="row">
+      <p class="row__property-name">Card Number</p>
+      <p class="row__property-value">* * * 4325</p>
     </div>
-    <div class="summary-container__row">
-      <p class="summary-container__row__property-name">Name</p>
-      <p class="summary-container__row__property-value">Jordan Smith</p>
+    <div class="row">
+      <p class="row__property-name">Name</p>
+      <p class="row__property-value">Jordan Smith</p>
     </div>
-    <div class="summary-container__row">
-      <p class="summary-container__row__property-name">Amount billed</p>
-      <p class="summary-container__row__property-value">£30</p>
+    <div class="row">
+      <p class="row__property-name">Amount billed</p>
+      <p class="row__property-value">£30</p>
     </div>
   </section>
 </body>

From 765ec84190ff7e61c2bb7407fd963499a7bdab86 Mon Sep 17 00:00:00 2001
From: Nick Field <heyimnick@live.com>
Date: Wed, 21 Dec 2016 15:06:28 +0000
Subject: [PATCH 2/3] Refactor BEM - payment confirmation

---
 css/payment-form.css | 32 +++++++++++++++++----------
 payment-form.html    | 52 ++++++++++++++++++++++----------------------
 2 files changed, 47 insertions(+), 37 deletions(-)

diff --git a/css/payment-form.css b/css/payment-form.css
index 0ac24e6..65651f1 100644
--- a/css/payment-form.css
+++ b/css/payment-form.css
@@ -1,52 +1,62 @@
-.payment-form {
+/* Payment Form */
+
+.form {
   font-size: 1.2rem;
   padding: 4em 2em 6em;
   position: relative;
 }
 
-.form-title {
+.form__title {
   font-size: 1.2rem;
 }
 
-.form-field {
+/*Label + Input */
+.form__field {
   display: block;
   margin-bottom: 1em;
 }
 
-.form-field--block {
+.form__field--full {
   display: block;
 }
 
-.form-field--inline-block {
+.form__field--inline-block {
   display: inline-block;
   width: 35%;
 }
 
-.form-field--inline-block--right {
+.form__field--inline-block-right {
+  display: inline-block;
   position: absolute;
   right: 2em;
 }
 
-.form-field__input {
+/* Just input */
+.form__input {
   width: 100%;
   height: 1.3em;
   border: 1px solid #bdbdbd;
   border-radius: 2px;
 }
 
-.form-field__label {
+
+/* Just label */
+
+.form__label {
   font-size: 0.7em;
 }
 
-.form-field__label--block {
+.form__label--full {
   display: block;
 }
 
-.form-field__label--inline {
+.form__label--inline {
   display: inline-block;
 }
 
-#payment-method {
+/*-- Options--*/
+
+.payment-method {
   width: 100%;
   font-size: 0.8em;
   background-color: white;
diff --git a/payment-form.html b/payment-form.html
index a00bff0..345d2ae 100644
--- a/payment-form.html
+++ b/payment-form.html
@@ -25,21 +25,21 @@
       </a>
     </header>
 
-    <section class="payment-form">
-      <h1 class="form-title">Your contribution</h1>
+    <section class="form">
+      <h1 class="form__title">Your contribution</h1>
       <form>
-        <div class="form-field form-field--block">
-          <label class="form-field__label form-field__label--block" for="email">Email</label>
-          <input class="form-field__input" id="email" type="text"/>
+        <div class="form__field form__field--full">
+          <label class="form__field__label form__field__label--full" for="email">Email</label>
+          <input class="form__field__input" id="email" type="text"/>
         </div>
 
-        <div class="form-field form-field--inline-block">
-          <label class="form-field__label form-field__label--block" for="amount">Amount</label>
-          <input class="form-field__input" id="amount" type="number"/>
+        <div class="form__field form__field--inline-block">
+          <label class="form__field__label form__field__label--full" for="amount">Amount</label>
+          <input class="form__field__input" id="amount" type="number"/>
         </div>
 
-        <div class="form-field form-field--inline-block form-field--inline-block--right">
-          <label class="form-field__label form-field__label--block" for="payment-method">Payment Method</label>
+        <div class="form__field form__field--inline-block form__field--inline-block--right">
+          <label class="form__field__label form__field__label--full" for="payment-method">Payment Method</label>
           <select id="payment-method">
             <option>Visa</option>
             <option>MasterCard</option>
@@ -50,34 +50,34 @@ <h1 class="form-title">Your contribution</h1>
           </select>
         </div>
 
-        <div class="form-field form-field--block">
-          <label class="form-field__label form-field__label--block" for="card-number">Card Number</label>
-          <input class="form-field__input" id="card-number" type="text"/>
+        <div class="form__field form__field--full">
+          <label class="form__field__label form__field__label--full" for="card-number">Card Number</label>
+          <input class="form__field__input" id="card-number" type="text"/>
         </div>
 
-        <div class="form-field form-field--block">
-          <label class="form-field__label form-field__label--block" for="cardholder-name">Cardholder Name</label>
-          <input class="form-field__input" id="cardholder-name" type="text"/>
+        <div class="form__field form__field--full">
+          <label class="form__field__label form__field__label--full" for="cardholder-name">Cardholder Name</label>
+          <input class="form__field__input" id="cardholder-name" type="text"/>
         </div>
 
-        <div class="form-field form-field--inline-block">
-          <label class="form-field__label form-field__label--block" for="expiration-date">Expiration Date</label>
-          <input class="form-field__input" id="expiration-date" type="text"/>
+        <div class="form__field form__field--inline-block">
+          <label class="form__field__label form__field__label--full" for="expiration-date">Expiration Date</label>
+          <input class="form__field__input" id="expiration-date" type="text"/>
         </div>
 
-        <div class="form-field form-field--inline-block form-field--inline-block--right">
-          <label class="form-field__label form-field__label--block" for="CVV">CVV</label>
-          <input class="form-field__input" id="CVV" type="text"/>
+        <div class="form__field form__field--inline-block form__field--inline-block--right">
+          <label class="form__field__label form__field__label--full" for="CVV">CVV</label>
+          <input class="form__field__input" id="CVV" type="text"/>
         </div>
 
-        <div class="form-field form-field--block">
+        <div class="form__field form__field--full">
           <input id="terms and conditions" type="checkbox"/>
-          <label class="form-field__label form-field__label--inline" for="terms and conditions">I agree to the <a href="#">terms and conditions</a></label>
+          <label class="form__field__label form__field__label--inline" for="terms and conditions">I agree to the <a href="#">terms and conditions</a></label>
         </div>
 
-        <div class="form-field form-field--block">
+        <div class="form__field form__field--full">
           <input id="email updates" type="checkbox"/>
-          <label class="form-field__label form-field__label--inline" for="email updates">Send me updates about Future Leaders</label>
+          <label class="form__field__label form__field__label--inline" for="email updates">Send me updates about Future Leaders</label>
         </div>
       </form>
     </section>

From 6f1076c6629df016610f60d4267b1fee7e6555ae Mon Sep 17 00:00:00 2001
From: Nick Field <heyimnick@live.com>
Date: Wed, 21 Dec 2016 15:29:12 +0000
Subject: [PATCH 3/3] Refactor bem names

---
 css/footer.css               | 22 +++++++++----------
 css/payment-confirmation.css |  4 ++--
 css/payment-form.css         |  1 +
 donate.html                  | 14 ++++++------
 index.html                   |  6 +++---
 payment-confirmation.html    | 16 +++++++-------
 payment-form.html            | 42 ++++++++++++++++++------------------
 7 files changed, 53 insertions(+), 52 deletions(-)

diff --git a/css/footer.css b/css/footer.css
index a64f17d..1a0ac1c 100644
--- a/css/footer.css
+++ b/css/footer.css
@@ -1,4 +1,4 @@
-.button-container {
+.cta {
   background-color: #93C745;
   text-align: center;
   width: 100%;
@@ -8,11 +8,11 @@
   padding: 0em;
 }
 
-.button-container__link, .button-container__link:visited {
+.cta__link, .cta__link:visited {
   text-decoration: none;
   color: white;
 }
-.button-container__button--green {
+.cta__button--green {
   font-size: 2rem;
   font-weight: 400;
   border: none;
@@ -23,12 +23,12 @@
   cursor: pointer;
 }
 
-.button-container__options {
+.cta__options {
   position: absolute;
   font-size: 1.3rem;
 }
 
-.button-container__button--white {
+.cta__button--white {
   background-color: white;
   height: 50%;
   width: 4.5em;
@@ -39,26 +39,26 @@
   cursor: pointer;
 }
 
-.button-container__button__paypal {
+.cta__button__paypal {
   right: 5.5em;
 }
 
-.button-container__button__paypal__img {
+.cta__button__paypal__img {
   margin-top: 0.3em;
 }
 
-.button-container__button__card {
+.cta__button__card {
   right: 0.5em;
 }
 
-.button-container__button__card__img {
+.cta__button__card__img {
   height: 1em;
   position: absolute;
   left: 0.5em;
   top: 0.5em;
 }
 
-.button-container__button__card__text {
+.cta__button__card__text {
   margin: 0em;
   display: inline-block;
   font-weight: bold;
@@ -68,7 +68,7 @@
   font-size: 0.9em;
 }
 
-.button-container__text {
+.cta__text {
   color: white;
   left: 0.5em;
   margin-top: 1em;
diff --git a/css/payment-confirmation.css b/css/payment-confirmation.css
index 87a9370..f14ff10 100644
--- a/css/payment-confirmation.css
+++ b/css/payment-confirmation.css
@@ -49,14 +49,14 @@
   height: 2.7em;
 }
 
-.row__property-name {
+.row__property {
   margin-top: inherit;
   padding-left: 0.8em;
   position: absolute;
   font-size: 1.1em;
 }
 
-.row__property-value {
+.row__value {
   position:  absolute;
   right: 0.8em;
   margin-top: inherit;
diff --git a/css/payment-form.css b/css/payment-form.css
index 65651f1..087f37a 100644
--- a/css/payment-form.css
+++ b/css/payment-form.css
@@ -28,6 +28,7 @@
 .form__field--inline-block-right {
   display: inline-block;
   position: absolute;
+  width: 35%;
   right: 2em;
 }
 
diff --git a/donate.html b/donate.html
index 40ab5c9..35d3ddb 100644
--- a/donate.html
+++ b/donate.html
@@ -37,17 +37,17 @@ <h1 class="donation__title">
       <span class="donation__quote--type-normal">Sam, 15, London</span>
     </section>
 
-    <section class="button-container">
-      <p class="button-container__options button-container__text">Donate with</p>
+    <section class="cta">
+      <p class="cta__options cta__text">Donate with</p>
       <a href="https://www.paypal.com/">
-        <button class="button-container__options button-container__button--white button-container__button__paypal">
-          <img src="images/paypal-logo.svg" class="button-container__button__paypal__img" alt="Paypal Logo">
+        <button class="cta__options cta__button--white cta__button__paypal">
+          <img src="images/paypal-logo.svg" class="cta__button__paypal__img" alt="Paypal Logo">
         </button>
       </a>
       <a href="payment-form.html">
-        <button class="button-container__options button-container__button--white button-container__button__card">
-          <img src="images/card-security.png" class="button-container__button__card__img" alt="Secure Card Logo">
-          <p class="button-container__button__card__text">Card</p>
+        <button class="cta__options cta__button--white cta__button__card">
+          <img src="images/card-security.png" class="cta__button__card__img" alt="Secure Card Logo">
+          <p class="cta__button__card__text">Card</p>
         </button>
       </a>
     </section>
diff --git a/index.html b/index.html
index 5a193e5..9f9fc7c 100644
--- a/index.html
+++ b/index.html
@@ -35,9 +35,9 @@ <h2 class="heading__sub">Inspiring the next generation</h2>
     <!-- end Landing Page Content -->
 
 
-    <section class="button-container">
-      <a href="donate.html" class="button-container__link">
-        <button class="button-container__button--green">DONATE</button>
+    <section class="cta">
+      <a href="donate.html" class="cta__link">
+        <button class="cta__button--green">DONATE</button>
       </a>
     </section>
   </body>
diff --git a/payment-confirmation.html b/payment-confirmation.html
index 5483b45..d2392c8 100644
--- a/payment-confirmation.html
+++ b/payment-confirmation.html
@@ -35,20 +35,20 @@ <h2 class="thanks__thanks-message">Thank you for your kindness</h2>
   <section class="summary">
     <h4 class="summary__title">Donation Summary</h4>
     <div class="row">
-      <p class="row__property-name">Payment Method</p>
-      <p class="row__property-value">VISA</p>
+      <p class="row__property">Payment Method</p>
+      <p class="row__value">VISA</p>
     </div>
     <div class="row">
-      <p class="row__property-name">Card Number</p>
-      <p class="row__property-value">* * * 4325</p>
+      <p class="row__property">Card Number</p>
+      <p class="row__value">* * * 4325</p>
     </div>
     <div class="row">
-      <p class="row__property-name">Name</p>
-      <p class="row__property-value">Jordan Smith</p>
+      <p class="row__property">Name</p>
+      <p class="row__value">Jordan Smith</p>
     </div>
     <div class="row">
-      <p class="row__property-name">Amount billed</p>
-      <p class="row__property-value">£30</p>
+      <p class="row__property">Amount billed</p>
+      <p class="row__value">£30</p>
     </div>
   </section>
 </body>
diff --git a/payment-form.html b/payment-form.html
index 345d2ae..2c47f38 100644
--- a/payment-form.html
+++ b/payment-form.html
@@ -29,18 +29,18 @@
       <h1 class="form__title">Your contribution</h1>
       <form>
         <div class="form__field form__field--full">
-          <label class="form__field__label form__field__label--full" for="email">Email</label>
-          <input class="form__field__input" id="email" type="text"/>
+          <label class="form__label form__label--full" for="email">Email</label>
+          <input class="form__input" id="email" type="text"/>
         </div>
 
         <div class="form__field form__field--inline-block">
-          <label class="form__field__label form__field__label--full" for="amount">Amount</label>
-          <input class="form__field__input" id="amount" type="number"/>
+          <label class="form__label form__label--full" for="amount">Amount</label>
+          <input class="form__input" id="amount" type="number"/>
         </div>
 
-        <div class="form__field form__field--inline-block form__field--inline-block--right">
-          <label class="form__field__label form__field__label--full" for="payment-method">Payment Method</label>
-          <select id="payment-method">
+        <div class="form__field form__field--inline-block-right">
+          <label class="form__label form__label--full" for="payment-method">Payment Method</label>
+          <select id="payment-method" class="payment-method">
             <option>Visa</option>
             <option>MasterCard</option>
             <option>American Express</option>
@@ -51,40 +51,40 @@ <h1 class="form__title">Your contribution</h1>
         </div>
 
         <div class="form__field form__field--full">
-          <label class="form__field__label form__field__label--full" for="card-number">Card Number</label>
-          <input class="form__field__input" id="card-number" type="text"/>
+          <label class="form__label form__label--full" for="card-number">Card Number</label>
+          <input class="form__input" id="card-number" type="text"/>
         </div>
 
         <div class="form__field form__field--full">
-          <label class="form__field__label form__field__label--full" for="cardholder-name">Cardholder Name</label>
-          <input class="form__field__input" id="cardholder-name" type="text"/>
+          <label class="form__label form__label--full" for="cardholder-name">Cardholder Name</label>
+          <input class="form__input" id="cardholder-name" type="text"/>
         </div>
 
         <div class="form__field form__field--inline-block">
-          <label class="form__field__label form__field__label--full" for="expiration-date">Expiration Date</label>
-          <input class="form__field__input" id="expiration-date" type="text"/>
+          <label class="form__label form__label--full" for="expiration-date">Expiration Date</label>
+          <input class="form__input" id="expiration-date" type="text"/>
         </div>
 
-        <div class="form__field form__field--inline-block form__field--inline-block--right">
-          <label class="form__field__label form__field__label--full" for="CVV">CVV</label>
-          <input class="form__field__input" id="CVV" type="text"/>
+        <div class="form__field form__field--inline-block form__field--inline-block-right">
+          <label class="form__label form__label--full" for="CVV">CVV</label>
+          <input class="form__input" id="CVV" type="text"/>
         </div>
 
         <div class="form__field form__field--full">
           <input id="terms and conditions" type="checkbox"/>
-          <label class="form__field__label form__field__label--inline" for="terms and conditions">I agree to the <a href="#">terms and conditions</a></label>
+          <label class="form__label form__label--inline" for="terms and conditions">I agree to the <a href="#">terms and conditions</a></label>
         </div>
 
         <div class="form__field form__field--full">
           <input id="email updates" type="checkbox"/>
-          <label class="form__field__label form__field__label--inline" for="email updates">Send me updates about Future Leaders</label>
+          <label class="form__label form__label--inline" for="email updates">Send me updates about Future Leaders</label>
         </div>
       </form>
     </section>
 
-    <section class="button-container">
-      <a href="payment-confirmation.html" class="button-container__link">
-        <button class="button-container__button--green">DONATE</button>
+    <section class="cta">
+      <a href="payment-confirmation.html" class="cta__link">
+        <button class="cta__button--green">DONATE</button>
       </a>
     </section>
   </body>