Skip to content
This repository
Browse code

Color plugin

  • Loading branch information...
commit 30d64f9661dfc6c1a639aafa8d5dd21708ad8db9 1 parent 3cff481
iurevych authored
40  core/color/colors.css
... ...
@@ -1,40 +0,0 @@
1  
-/* Font colors should be as abstract as possible.
2  
- * This allows us using any skins we like without modifying classes
3  
- * Use .firm class for unique color of the project (like orange in my example)
4  
- * Use .positive, .negative to style only relative information (like system messages or feedback, etc)
5  
- */
6  
-.bare {
7  
-  color: #bbb;
8  
-}
9  
-
10  
-.pale {
11  
-  color: #999;
12  
-}
13  
-
14  
-.neutral {
15  
-  color: #666;
16  
-}
17  
-
18  
-.opaque {
19  
-  color: #333;
20  
-}
21  
-
22  
-.sharp {
23  
-  color: #000;
24  
-}
25  
-
26  
-.contrast {
27  
-  color: #fff;
28  
-}
29  
-
30  
-.firm {
31  
-  color: #fc6c06;
32  
-}
33  
-
34  
-.positive {
35  
-  color: #73ab00;
36  
-}
37  
-
38  
-.negative {
39  
-  color: #c20000;
40  
-}
9  plugins/color/color.css
... ...
@@ -0,0 +1,9 @@
  1
+.bare{color:#bbb;}
  2
+.pale{color:#999;}
  3
+.neutral{color:#666;}
  4
+.opaque{color:#333;}
  5
+.sharp{color:#000;}
  6
+.contrast{color:#fff;}
  7
+.firm{color:#fc6c06;}
  8
+.positive{color:#73ab00;}
  9
+.negative{color:#c20000;}
61  plugins/color/color_doc.html
... ...
@@ -0,0 +1,61 @@
  1
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2
+<html xmlns="http://www.w3.org/1999/xhtml">
  3
+  <head>
  4
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5
+    <title>Colors</title>
  6
+    <link rel="stylesheet" type="text/css" media="all"  href="../../all.css" />
  7
+  </head>
  8
+  <body>
  9
+    <div class="page">
  10
+      <div class="line pvl">
  11
+        <div class="unit size1of2">
  12
+          <h1>Basic colors</h1>
  13
+          <h3 class="bare">Bare</h3>
  14
+          <h3 class="pale">Pale</h3>
  15
+          <h3 class="neutral">Neutral</h3>
  16
+          <h3 class="opaque">Opaque</h3>
  17
+          <h3 class="sharp">Sharp</h3>
  18
+          <div class="mod comment">
  19
+            <div class="inner">
  20
+              <div class="hd">
  21
+                <h3 class="contrast">Contrast</h3>
  22
+              </div>
  23
+            </div>
  24
+          </div>
  25
+          <h3 class="firm">Firm</h3>
  26
+          <h3 class="positive">Positive</h3>
  27
+          <h3 class="negative">Negative</h3>
  28
+        </div>
  29
+        <div class="unit size1of2">
  30
+          <div class="skin-a">
  31
+            <h1>Skin A</h1>
  32
+            <h3 class="bare">Bare</h3>
  33
+            <h3 class="pale">Pale</h3>
  34
+            <h3 class="neutral">Neutral</h3>
  35
+            <h3 class="opaque">Opaque</h3>
  36
+            <h3 class="sharp">Sharp</h3>
  37
+            <div class="mod comment">
  38
+              <div class="inner">
  39
+                <div class="hd">
  40
+                  <h3 class="contrast">Contrast</h3>
  41
+                </div>
  42
+              </div>
  43
+            </div>
  44
+            <h3 class="firm">Firm</h3>
  45
+            <h3 class="positive">Positive</h3>
  46
+            <h3 class="negative">Negative</h3>
  47
+          </div>
  48
+        </div>
  49
+      </div>
  50
+
  51
+      <h2>Notes</h2>
  52
+      <ul class="simpleList">
  53
+        <li>Font colors should be as abstract as possible.</li>
  54
+        <li>This allows us using any skins we like without modifying classes.</li>
  55
+        <li>Just give to a body <code>skin-<strong>name</strong></code> class and you're done.</li>
  56
+        <li>Use <code>firm</code> class for unique color of the project (like orange in my example).</li>
  57
+        <li>Use <code>positive</code>, <code>negative</code> to style only relative information (like system messages or feedback, etc).</li>
  58
+      </ul>
  59
+    </div>
  60
+  </body>
  61
+</html>
9  plugins/color/color_skins.css
... ...
@@ -0,0 +1,9 @@
  1
+.skin-a .bare{color:#f7edd6;}
  2
+.skin-a .pale{color:#ebddbf;}
  3
+.skin-a .neutral{color:#cebd97;}
  4
+.skin-a .opaque{color:#bfa877;}
  5
+.skin-a .sharp{color:#ae7700;}
  6
+.skin-a .contrast{color:#000;}
  7
+.skin-a .firm{color:#eba000;}
  8
+.skin-a .positive{color:#b8c800;}
  9
+.skin-a .negative{color:#ba6d6d;}
4  plugins/plugins.css
@@ -2,4 +2,6 @@
2 2
 @import url("breadcrumb/breadcrumb.css");
3 3
 @import url("tabs/tabs.css");
4 4
 @import url("talk/talk.css");
5  
-@import url("talk/talk_skins.css");
  5
+@import url("talk/talk_skins.css");
  6
+@import url("color/color.css");
  7
+@import url("color/color_skins.css");

0 notes on commit 30d64f9

Please sign in to comment.
Something went wrong with that request. Please try again.