From e8399635ea5e81a9fc9dcbcc94318c964b1d0249 Mon Sep 17 00:00:00 2001
From: Adam Jolicoeur <adam.jolicoeur@redhat.com>
Date: Mon, 26 Jun 2017 21:28:02 -0400
Subject: [PATCH] fix(guide): update code guidelines

update the code guidelines to note the Field CSS Manual and HTML character limit
---
 code-guidelines.md | 40 +++++++++++++++++++++++++++-------------
 1 file changed, 27 insertions(+), 13 deletions(-)

diff --git a/code-guidelines.md b/code-guidelines.md
index 2381349..cc670a8 100644
--- a/code-guidelines.md
+++ b/code-guidelines.md
@@ -115,6 +115,8 @@ Whenever possible, avoid superfluous parent elements when writing HTML. Take the
 <img class="avatar" src="...">
 ```
 
+Preferably, we want to keep our lines of HTML to 120 characters or less. This is enforced in our Less Hint configuration.
+
 <!-- ============================================================ -->
 
 # CSS
@@ -186,43 +188,55 @@ Related property declarations should be grouped together following a logical ord
 
 1. Positioning
 1. Box model
-1. Typographic
 1. Visual
+1. Typography
 
 Positioning comes first because it can remove an element from the normal flow of the document and override box model related styles. The box model comes next as it dictates a component's dimensions and placement.
 
 Everything else takes place inside the component or without impacting the previous two sections, and thus they come last.
 
-For our complete list of properties and their order, please see [CSS Property Orders](https://github.com/fabric8io/fabric8-ux/blob/master/src/docs/CSS_Property_Order.md).
+For a complete list of properties and their order, please see [Field CSS Manuals](http://manuals.gravitydept.com/code/css/properties).
 
 Example:
 ```less
 .declaration-order {
   // Positioning
   position: absolute;
+
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
+
   z-index: 100;
 
-  // Box-model
-  display: block;
-  float: right;
+  // Box
   width: 100px;
   height: 100px;
+  
+  margin-top: 5px;
+  margin-right: 5px;
+  margin-bottom: 5px;
+  margin-left: 5px;
+  
+  padding-top: 2px;
+  padding-right: 2px;
+  padding-bottom: 2px;
+  padding-left: 2px;
+
+  // Visual Box
+  background-color: #f5f5f5;
+  border: 1px solid #f7f7f7;
 
   // Typography
-  font: normal 13px "Helvetica Neue", sans-serif;
-  line-height: 1.5;
   color: #333;
-  text-align: center;
 
-  // Visual
-  background-color: #f5f5f5;
-  border: 1px solid;
-  border-color: #e5e5e5;
-  border-radius: 3px;
+  font-family: "Helvetica Neue", sans-serif;
+  font-size: 13px;
+
+  line-height: 1.5;
+
+  text-align: center;
 
   // Misc
   opacity: 1;