Permalink
Browse files

Color plugin

  • Loading branch information...
1 parent 3cff481 commit 30d64f9661dfc6c1a639aafa8d5dd21708ad8db9 @iurevych iurevych committed Jul 6, 2011
Showing with 82 additions and 41 deletions.
  1. +0 −40 core/color/colors.css
  2. +9 −0 plugins/color/color.css
  3. +61 −0 plugins/color/color_doc.html
  4. +9 −0 plugins/color/color_skins.css
  5. +3 −1 plugins/plugins.css
View
@@ -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;
-}
View
@@ -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;}
@@ -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>
@@ -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;}
View
@@ -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");

0 comments on commit 30d64f9

Please sign in to comment.