Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Merge pull request #71 from iurevych/master

.unit-right class and Abstract font colors
  • Loading branch information...
commit 7a11054093e9b95fa365f16155511a82c4f9c147 2 parents 00549fd + c22446f
@stubbornella authored
View
1  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%;}
View
9 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;}
View
61 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>
View
9 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;}
View
4 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");
Please sign in to comment.
Something went wrong with that request. Please try again.