Merge pull request stubbornella#71 from iurevych/master

.unit-right class and Abstract font colors
rdbartlett · Jul 21, 2011 · 7a11054 · 7a11054
2 parents 00549fd + c22446f
commit 7a11054
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 1 deletion.
diff --git a/core/grid/grids.css b/core/grid/grids.css
@@ -2,6 +2,7 @@
 .line:after{clear:both;}
 .line{*zoom:1;}
 .unit{float:left;}
+.unitRight{float:right;}
 .size1of1{float:none;}
 .size1of2{width:50%;}
 .size1of3{width:33.33333%;}

diff --git a/plugins/color/color.css 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
@@ -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="skinA">
+            <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
@@ -0,0 +1,9 @@
+.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;}
diff --git 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");
+@import url("talk/talk_skins.css");
+@import url("color/color.css");
+@import url("color/color_skins.css");