From d2eb70286ab75866e4f77decf06a6bd6ca2aefb1 Mon Sep 17 00:00:00 2001
From: iurevych <sergii.iurevych@railsware.com>
Date: Fri, 13 May 2011 08:50:39 +0300
Subject: [PATCH 1/5] Syntax refactoring. Added .unit-right for better
 compatibility with float width

---
 core/grid/grids.css | 88 +++++++++++++++++++++++++++++++++++++--------
 1 file changed, 74 insertions(+), 14 deletions(-)

diff --git a/core/grid/grids.css b/core/grid/grids.css
index adf8d2fb..f3fe1627 100644
--- a/core/grid/grids.css
+++ b/core/grid/grids.css
@@ -1,14 +1,74 @@
-.line:after,.lastUnit:after{clear:both;display:block;visibility:hidden;overflow:hidden;height:0 !important;line-height:0;font-size:xx-large;content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";}
-.line{*zoom:1;}
-.unit{float:left;}
-.size1of1{float:none;}
-.size1of2{width:50%;}
-.size1of3{width:33.33333%;}
-.size2of3{width:66.66666%;}
-.size1of4{width:25%;}
-.size3of4{width:75%;}
-.size1of5{width:20%;}
-.size2of5{width:40%;}
-.size3of5{width:60%;}
-.size4of5{width:80%;}
-.lastUnit{display:table-cell;float:none;width:auto;*display:block;*zoom:1;_position:relative;_left:-3px;_margin-right:-3px;}
+.line:after,
+.lastUnit:after {
+  clear: both;
+  display: block;
+  visibility: hidden;
+  overflow: hidden;
+  height: 0 !important;
+  line-height: 0;
+  font-size: xx-large;
+  content: " x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";
+}
+
+.line {
+  *zoom: 1;
+}
+
+.unit {
+  float: left;
+}
+
+.unit-right {
+  float: right;
+}
+
+.size1of1 {
+  float: none;
+}
+
+.size1of2 {
+  width: 50%;
+}
+
+.size1of3 {
+  width: 33.33333%;
+}
+
+.size2of3 {
+  width: 66.66666%;
+}
+
+.size1of4 {
+  width: 25%;
+}
+
+.size3of4 {
+  width: 75%;
+}
+
+.size1of5 {
+  width: 20%;
+}
+
+.size2of5 {
+  width: 40%;
+}
+
+.size3of5 {
+  width: 60%;
+}
+
+.size4of5 {
+  width: 80%;
+}
+
+.lastUnit {
+  display: table-cell;
+  float: none;
+  width: auto;
+  *display: block;
+  *zoom: 1;
+  _position: relative;
+  _left: -3px;
+  _margin-right: -3px;
+}

From 91053f51096903d4419564c887ab51e8c62b7180 Mon Sep 17 00:00:00 2001
From: iurevych <sergii.iurevych@railsware.com>
Date: Fri, 13 May 2011 09:23:28 +0300
Subject: [PATCH 2/5] Abstract font colors

---
 core/color/colors.css | 40 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 core/color/colors.css

diff --git a/core/color/colors.css b/core/color/colors.css
new file mode 100644
index 00000000..5c075daf
--- /dev/null
+++ b/core/color/colors.css
@@ -0,0 +1,40 @@
+/* Font colors should be as abstract as possible.
+ * This allows us using any skins we like without modifying classes
+ * Use .firm class for unique color of the project (like orange in my example)
+ * Use .positive, .negative to style only relative information (like system messages or feedback, etc)
+ */
+.bare {
+  color: #bbb;
+}
+
+.pale {
+  color: #999;
+}
+
+.neutral {
+  color: #666;
+}
+
+.opaque {
+  color: #333;
+}
+
+.sharp {
+  color: #000;
+}
+
+.contrast {
+  color: #fff;
+}
+
+.firm {
+  color: #fc6c06;
+}
+
+.positive {
+  color: #73ab00;
+}
+
+.negative {
+  color: #c20000;
+}

From 3cff48106696490206d4d1f8d3c7b5ff29b16839 Mon Sep 17 00:00:00 2001
From: iurevych <sergii.iurevych@railsware.com>
Date: Wed, 6 Jul 2011 11:56:12 +0300
Subject: [PATCH 3/5] unit-right class added. Reformated back to an original

---
 core/grid/grids.css | 90 ++++++++-------------------------------------
 1 file changed, 16 insertions(+), 74 deletions(-)

diff --git a/core/grid/grids.css b/core/grid/grids.css
index f3fe1627..c6a2f5ed 100644
--- a/core/grid/grids.css
+++ b/core/grid/grids.css
@@ -1,74 +1,16 @@
-.line:after,
-.lastUnit:after {
-  clear: both;
-  display: block;
-  visibility: hidden;
-  overflow: hidden;
-  height: 0 !important;
-  line-height: 0;
-  font-size: xx-large;
-  content: " x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";
-}
-
-.line {
-  *zoom: 1;
-}
-
-.unit {
-  float: left;
-}
-
-.unit-right {
-  float: right;
-}
-
-.size1of1 {
-  float: none;
-}
-
-.size1of2 {
-  width: 50%;
-}
-
-.size1of3 {
-  width: 33.33333%;
-}
-
-.size2of3 {
-  width: 66.66666%;
-}
-
-.size1of4 {
-  width: 25%;
-}
-
-.size3of4 {
-  width: 75%;
-}
-
-.size1of5 {
-  width: 20%;
-}
-
-.size2of5 {
-  width: 40%;
-}
-
-.size3of5 {
-  width: 60%;
-}
-
-.size4of5 {
-  width: 80%;
-}
-
-.lastUnit {
-  display: table-cell;
-  float: none;
-  width: auto;
-  *display: block;
-  *zoom: 1;
-  _position: relative;
-  _left: -3px;
-  _margin-right: -3px;
-}
+.line:before,.line:after{content:"";display:table;}
+.line:after{clear:both;}
+.line{*zoom:1;}
+.unit{float:left;}
+.unit-right{float:right;}
+.size1of1{float:none;}
+.size1of2{width:50%;}
+.size1of3{width:33.33333%;}
+.size2of3{width:66.66666%;}
+.size1of4{width:25%;}
+.size3of4{width:75%;}
+.size1of5{width:20%;}
+.size2of5{width:40%;}
+.size3of5{width:60%;}
+.size4of5{width:80%;}
+.lastUnit{float:none;display:block;display:table-cell;width:9999em;*width:auto;*zoom:1;_position:relative;_left:-3px;_margin-right:-3px;}

From 30d64f9661dfc6c1a639aafa8d5dd21708ad8db9 Mon Sep 17 00:00:00 2001
From: iurevych <sergii.iurevych@railsware.com>
Date: Wed, 6 Jul 2011 11:57:05 +0300
Subject: [PATCH 4/5] Color plugin

---
 core/color/colors.css         | 40 -----------------------
 plugins/color/color.css       |  9 ++++++
 plugins/color/color_doc.html  | 61 +++++++++++++++++++++++++++++++++++
 plugins/color/color_skins.css |  9 ++++++
 plugins/plugins.css           |  4 ++-
 5 files changed, 82 insertions(+), 41 deletions(-)
 delete mode 100644 core/color/colors.css
 create mode 100644 plugins/color/color.css
 create mode 100644 plugins/color/color_doc.html
 create mode 100644 plugins/color/color_skins.css

diff --git a/core/color/colors.css b/core/color/colors.css
deleted file mode 100644
index 5c075daf..00000000
--- a/core/color/colors.css
+++ /dev/null
@@ -1,40 +0,0 @@
-/* Font colors should be as abstract as possible.
- * This allows us using any skins we like without modifying classes
- * Use .firm class for unique color of the project (like orange in my example)
- * Use .positive, .negative to style only relative information (like system messages or feedback, etc)
- */
-.bare {
-  color: #bbb;
-}
-
-.pale {
-  color: #999;
-}
-
-.neutral {
-  color: #666;
-}
-
-.opaque {
-  color: #333;
-}
-
-.sharp {
-  color: #000;
-}
-
-.contrast {
-  color: #fff;
-}
-
-.firm {
-  color: #fc6c06;
-}
-
-.positive {
-  color: #73ab00;
-}
-
-.negative {
-  color: #c20000;
-}
diff --git a/plugins/color/color.css b/plugins/color/color.css
new file mode 100644
index 00000000..da5c0372
--- /dev/null
+++ b/plugins/color/color.css
@@ -0,0 +1,9 @@
+.bare{color:#bbb;}
+.pale{color:#999;}
+.neutral{color:#666;}
+.opaque{color:#333;}
+.sharp{color:#000;}
+.contrast{color:#fff;}
+.firm{color:#fc6c06;}
+.positive{color:#73ab00;}
+.negative{color:#c20000;}
diff --git a/plugins/color/color_doc.html b/plugins/color/color_doc.html
new file mode 100644
index 00000000..cf624436
--- /dev/null
+++ b/plugins/color/color_doc.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>Colors</title>
+    <link rel="stylesheet" type="text/css" media="all"  href="../../all.css" />
+  </head>
+  <body>
+    <div class="page">
+      <div class="line pvl">
+        <div class="unit size1of2">
+          <h1>Basic colors</h1>
+          <h3 class="bare">Bare</h3>
+          <h3 class="pale">Pale</h3>
+          <h3 class="neutral">Neutral</h3>
+          <h3 class="opaque">Opaque</h3>
+          <h3 class="sharp">Sharp</h3>
+          <div class="mod comment">
+            <div class="inner">
+              <div class="hd">
+                <h3 class="contrast">Contrast</h3>
+              </div>
+            </div>
+          </div>
+          <h3 class="firm">Firm</h3>
+          <h3 class="positive">Positive</h3>
+          <h3 class="negative">Negative</h3>
+        </div>
+        <div class="unit size1of2">
+          <div class="skin-a">
+            <h1>Skin A</h1>
+            <h3 class="bare">Bare</h3>
+            <h3 class="pale">Pale</h3>
+            <h3 class="neutral">Neutral</h3>
+            <h3 class="opaque">Opaque</h3>
+            <h3 class="sharp">Sharp</h3>
+            <div class="mod comment">
+              <div class="inner">
+                <div class="hd">
+                  <h3 class="contrast">Contrast</h3>
+                </div>
+              </div>
+            </div>
+            <h3 class="firm">Firm</h3>
+            <h3 class="positive">Positive</h3>
+            <h3 class="negative">Negative</h3>
+          </div>
+        </div>
+      </div>
+
+      <h2>Notes</h2>
+      <ul class="simpleList">
+        <li>Font colors should be as abstract as possible.</li>
+        <li>This allows us using any skins we like without modifying classes.</li>
+        <li>Just give to a body <code>skin-<strong>name</strong></code> class and you're done.</li>
+        <li>Use <code>firm</code> class for unique color of the project (like orange in my example).</li>
+        <li>Use <code>positive</code>, <code>negative</code> to style only relative information (like system messages or feedback, etc).</li>
+      </ul>
+    </div>
+  </body>
+</html>
diff --git a/plugins/color/color_skins.css b/plugins/color/color_skins.css
new file mode 100644
index 00000000..475b18e1
--- /dev/null
+++ b/plugins/color/color_skins.css
@@ -0,0 +1,9 @@
+.skin-a .bare{color:#f7edd6;}
+.skin-a .pale{color:#ebddbf;}
+.skin-a .neutral{color:#cebd97;}
+.skin-a .opaque{color:#bfa877;}
+.skin-a .sharp{color:#ae7700;}
+.skin-a .contrast{color:#000;}
+.skin-a .firm{color:#eba000;}
+.skin-a .positive{color:#b8c800;}
+.skin-a .negative{color:#ba6d6d;}
diff --git a/plugins/plugins.css b/plugins/plugins.css
index a62ef39c..94426518 100644
--- a/plugins/plugins.css
+++ b/plugins/plugins.css
@@ -2,4 +2,6 @@
 @import url("breadcrumb/breadcrumb.css");
 @import url("tabs/tabs.css");
 @import url("talk/talk.css");
-@import url("talk/talk_skins.css");
\ No newline at end of file
+@import url("talk/talk_skins.css");
+@import url("color/color.css");
+@import url("color/color_skins.css");
\ No newline at end of file

From c22446fc46a640d3c88547b05b69a9a1ba92aa1e Mon Sep 17 00:00:00 2001
From: iurevych <sergii.iurevych@railsware.com>
Date: Fri, 8 Jul 2011 19:59:34 +0300
Subject: [PATCH 5/5] camelCase

---
 core/grid/grids.css           |  2 +-
 plugins/color/color_doc.html  |  2 +-
 plugins/color/color_skins.css | 18 +++++++++---------
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/core/grid/grids.css b/core/grid/grids.css
index c6a2f5ed..1350235a 100644
--- a/core/grid/grids.css
+++ b/core/grid/grids.css
@@ -2,7 +2,7 @@
 .line:after{clear:both;}
 .line{*zoom:1;}
 .unit{float:left;}
-.unit-right{float:right;}
+.unitRight{float:right;}
 .size1of1{float:none;}
 .size1of2{width:50%;}
 .size1of3{width:33.33333%;}
diff --git a/plugins/color/color_doc.html b/plugins/color/color_doc.html
index cf624436..76a161b0 100644
--- a/plugins/color/color_doc.html
+++ b/plugins/color/color_doc.html
@@ -27,7 +27,7 @@ <h3 class="positive">Positive</h3>
           <h3 class="negative">Negative</h3>
         </div>
         <div class="unit size1of2">
-          <div class="skin-a">
+          <div class="skinA">
             <h1>Skin A</h1>
             <h3 class="bare">Bare</h3>
             <h3 class="pale">Pale</h3>
diff --git a/plugins/color/color_skins.css b/plugins/color/color_skins.css
index 475b18e1..494c2f09 100644
--- a/plugins/color/color_skins.css
+++ b/plugins/color/color_skins.css
@@ -1,9 +1,9 @@
-.skin-a .bare{color:#f7edd6;}
-.skin-a .pale{color:#ebddbf;}
-.skin-a .neutral{color:#cebd97;}
-.skin-a .opaque{color:#bfa877;}
-.skin-a .sharp{color:#ae7700;}
-.skin-a .contrast{color:#000;}
-.skin-a .firm{color:#eba000;}
-.skin-a .positive{color:#b8c800;}
-.skin-a .negative{color:#ba6d6d;}
+.skinA .bare{color:#f7edd6;}
+.skinA .pale{color:#ebddbf;}
+.skinA .neutral{color:#cebd97;}
+.skinA .opaque{color:#bfa877;}
+.skinA .sharp{color:#ae7700;}
+.skinA .contrast{color:#000;}
+.skinA .firm{color:#eba000;}
+.skinA .positive{color:#b8c800;}
+.skinA .negative{color:#ba6d6d;}