From a33b0a42e9859ad5bfe898c755600b72fcc7d32d Mon Sep 17 00:00:00 2001
From: Adam Jolicoeur <mindreeper2420@users.noreply.github.com>
Date: Tue, 20 Jun 2017 10:28:08 -0400
Subject: [PATCH 1/2] update to add BEM section

---
 code-guidelines.md | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/code-guidelines.md b/code-guidelines.md
index 87c65c4..4d1cc38 100644
--- a/code-guidelines.md
+++ b/code-guidelines.md
@@ -437,38 +437,38 @@ Always use classes - avoid using an ID. Use classes over generic element tag for
 
 ```
 
-<!-- ### BEM
+### BEM
 
-PatternFly follows the [BEM methodology](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/). It's a way to decouple CSS from HTML, and modularize class names so they can be extended.
+OpenShift.io follows the [BEM methodology](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/). It's a way to decouple CSS from HTML, and modularize class names so they can be extended.
 
-Class name structure follows the `{{pf-block}}__{{element}}--{{modifier}}` structure:
+Class name structure follows the `{{io-block}}__{{element}}--{{modifier}}` structure:
 
 ```less
-.pf-block__element--modifier {}
+.io-block__element--modifier {}
 ```
 
 Example:
 
 ```html
-<div class="pf-panel pf-panel--collapsible">
-  <div class="pf-panel__title">
+<div class="io-panel pf-panel--collapsible">
+  <div class="io-panel__title">
     <h1>Heading</h1>
   </div>
 
-  <div class="pf-panel__content">
+  <div class="io-panel__content">
     <p>Lorem ipsum dolor sit amet.</p>
   </div>
 </div>
 ```
 
 ```less
-.pf-panel {}                      // Block
-.pf-panel--collapsible {}         // Modifier of block
+.io-panel {}                      // Block
+.io-panel--collapsible {}         // Modifier of block
 
-.pf-panel__title {}               // Element
+.io-panel__title {}               // Element
 
-.pf-panel__content {}             // Element
-.pf-panel__content--unpadded {}   // Modifier of element
+.io-panel__content {}             // Element
+.io-panel__content--unpadded {}   // Modifier of element
 ```
 
 **Why it’s better**
@@ -476,7 +476,7 @@ Example:
 - All the selectors have same specificity.
 - Every element is defined via a block.
 - Every modifier is defined via a block or element.
-- Each class name imparts structural info without binding to exact HTML. -->
+- Each class name imparts structural info without binding to exact HTML.
 
 <!-- ============================================================ -->
 

From f16060279c8c1371418b6f84caf0b83db0fab86a Mon Sep 17 00:00:00 2001
From: Adam Jolicoeur <mindreeper2420@users.noreply.github.com>
Date: Tue, 20 Jun 2017 12:01:45 -0400
Subject: [PATCH 2/2] update per PR review

---
 code-guidelines.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/code-guidelines.md b/code-guidelines.md
index 4d1cc38..2381349 100644
--- a/code-guidelines.md
+++ b/code-guidelines.md
@@ -411,7 +411,7 @@ To avoid conflicts, OpenShift.io prefixes all classes with io-”. This also hel
 }
 
 // Good
-.pf-selector {
+.io-selector {
   ...
 }
 ```
@@ -450,7 +450,7 @@ Class name structure follows the `{{io-block}}__{{element}}--{{modifier}}` struc
 Example:
 
 ```html
-<div class="io-panel pf-panel--collapsible">
+<div class="io-panel io-panel--collapsible">
   <div class="io-panel__title">
     <h1>Heading</h1>
   </div>