Permalink
Browse files

Merge remote-tracking branch 'upstream/master' into faux_empty_columns

Conflicts:
	core/grid/grids.css
  • Loading branch information...
2 parents a8e951a + d3ad519 commit 2f67aa3470659344aedecdaae81ac003c312dbe3 @yodasw16 committed Aug 1, 2011
View
@@ -2,7 +2,7 @@
* Split module skins
-## Filestructure Coventions
+## Filestructure Conventions
_Example:_
@@ -0,0 +1,3 @@
+.rtl {direction:rtl;}
+.rtl .unit{float:right;}
+.rtl .lastUnit{_right:-3px;_margin-left:-3px;_margin-right:0; _left:0;}
View
@@ -1,6 +1,8 @@
-.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:before,.line:after{content:"";display:table;}
+.line:after{clear:both;}
.line{*zoom:1;}
.unit{float:left;}
+.unitRight{float:right;}
.size1of1{float:none;}
.size1of2{width:50%;}
.size1of3{width:33.33333%;}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,10 @@
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+This copyright and license notice covers the images in this directory.
+************************************************************************
+
+TITLE: Crystal Project Icons
+AUTHOR: Everaldo Coelho
+SITE: http://www.everaldo.com
+CONTACT: everaldo@everaldo.com
+
+Copyright (c) 2006-2007 Everaldo Coelho.
View
@@ -1,67 +1,58 @@
<!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>Media Block</title>
-<link rel="stylesheet" type="text/css" media="all" href="../../all.css" />
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <title>Media Block</title>
+ <link rel="stylesheet" type="text/css" media="all" href="../../all.css" />
</head>
<body>
<div class="page">
- <div class="body">
- <h1>Media Block</h1>
+ <div class="body">
+ <h1>Media Block</h1>
<p>Use any sized image or flash for the right or left area. Any content in the body including nesting other media blocks.</p>
<div class="media">
- <a href="http://twitter.com/stubbornella" class="img icon"><img src="../../../../Pictures/icons/crystal_project/16x16/actions/1day.png" alt="img" /></a>
+ <a href="http://twitter.com/stubbornella" class="img icon"><img src="assets/crystal_project/16x16/actions/1day.png" width="16" height="16" alt="1day" /></a>
<div class="bd">event date</div>
</div>
-
- <div class="media attribution">
+ <div class="media attribution">
<a href="http://twitter.com/stubbornella" class="img"><img src="http://placehold.it/32x32" alt="img" height="32" width="32" /></a>
<div class="bd">
- <p class="ptn"><a href="http://twitter.com/stubbornella">@Stubbornella</a> <span class="detail">14 minutes ago</span></p>
+ <p class="ptn"><a href="http://twitter.com/stubbornella">@Stubbornella</a> <span class="detail">14 minutes ago</span></p>
</div>
</div>
-
-
<div class="media">
<a href="http://twitter.com/stubbornella" class="img"><img src="http://placehold.it/64x64" alt="img" width="64" height="64" /></a>
<a href="http://twitter.com/stubbornella" class="imgExt">X</a>
<div class="bd">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
-
-
<div class="media">
<a href="http://twitter.com/stubbornella" class="img"><img src="http://placehold.it/128x128" alt="img" /></a>
<!--<a href="http://twitter.com/stubbornella" class="imgExt">X</a>-->
<div class="bd">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <div class="media">
- <a href="http://twitter.com/stubbornella" class="img icon"><img src="../../../../Pictures/icons/crystal_project/16x16/actions/1day.png" alt="img" /></a>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <div class="media">
+ <a href="http://twitter.com/stubbornella" class="img icon"><img src="assets/crystal_project/16x16/actions/1day.png" width="16" height="16" alt="1day" /></a>
<div class="bd">event date</div>
</div>
</div>
</div>
-
-
-
<!-- TODO: make media player into a skin -->
<div class="media">
- <a href="http://twitter.com/stubbornella" class="img" style="background-image:url(http://placehold.it/510x290); width:510px; height:290px;"><img src="../../../../Pictures/icons/crystal_project/32x32/actions/player_play.png" alt="img" style="position:relative; top:50%; left:50%;margin-left: -32px; margin-top:-32px;opacity: .8;" height="64" width="64" /></a>
+ <a href="http://twitter.com/stubbornella" class="img" style="background-image:url(http://placehold.it/510x290); width:510px; height:290px;"><img src="assets/crystal_project/32x32/actions/player_play.png" alt="img" style="position:relative; top:50%; left:50%;margin-left: -32px; margin-top:-32px;opacity: .8;" height="64" width="64" /></a>
<div class="bd">
- <p>Last week I went to Yahoo! to give a talk about design performance for YUI theater.</p>
+ <p>Last week I went to Yahoo! to give a talk about design performance for YUI theater.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
-
- </div>
+ </div>
</div>
</body>
</html>
View
@@ -10,7 +10,7 @@ version: 0.2
.bd,.ft, .hd{display: inline-block; width:100%; *display:block; *width:auto; zoom:1;}
.inner:after,.hd:after,.bd:after,.ft: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 ";}
.inner{position:relative;}
-b{display:block;background-repeat:no-repeat;font-size:1%;position:relative;z-index:10;}
+b.top, b.top b, b.bottom, b.bottom b{display:block;background-repeat:no-repeat;font-size:1%;position:relative;z-index:10;}
.tl, .tr, .bl, .br{height:10px; width:10px;float:left;}
.tl{background-position: left top;}
.tr{background-position: right top;}
@@ -32,4 +32,4 @@ b{display:block;background-repeat:no-repeat;font-size:1%;position:relative;z-ind
.pop .inner{right:-10px; bottom:-10px; background-position:right bottom;padding:0 10px 10px 0;}
.pop .tl, .pop .br{display:none;}
.pop .bl{bottom:-10px;}
-.pop .tr{float:right;margin-right:-10px;_display:inline;/fix double margin bug/}
+.pop .tr{float:right;margin-right:-10px;_display:inline; /*fix double margin bug*/ }
@@ -16,35 +16,35 @@ a,t,r,b,l,h,v = all,top,right,bottom,left,horizontal,vertical
s,m,l,n = small(5px),medium(10px),large(20px),none(0px)
*/
-.ptn,.pvn,.pan{padding-top:0px}
-.pts,.pvs,.pas{padding-top:5px}
-.ptm,.pvm,.pam{padding-top:10px}
-.ptl,.pvl,.pal{padding-top:20px}
-.prn,.phn,.pan{padding-right:0px}
-.prs,.phs,.pas{padding-right:5px}
-.prm,.phm,.pam{padding-right:10px}
-.prl,.phl,.pal{padding-right:20px}
-.pbn,.pvn,.pan{padding-bottom:0px}
-.pbs,.pvs,.pas{padding-bottom:5px}
-.pbm,.pvm,.pam{padding-bottom:10px}
-.pbl,.pvl,.pal{padding-bottom:20px}
-.pln,.phn,.pan{padding-left:0px}
-.pls,.phs,.pas{padding-left:5px}
-.plm,.phm,.pam{padding-left:10px}
-.pll,.phl,.pal{padding-left:20px}
-.mtn,.mvn,.man{margin-top:0px}
-.mts,.mvs,.mas{margin-top:5px}
-.mtm,.mvm,.mam{margin-top:10px}
-.mtl,.mvl,.mal{margin-top:20px}
-.mrn,.mhn,.man{margin-right:0px}
-.mrs,.mhs,.mas{margin-right:5px}
-.mrm,.mhm,.mam{margin-right:10px}
-.mrl,.mhl,.mal{margin-right:20px}
-.mbn,.mvn,.man{margin-bottom:0px}
-.mbs,.mvs,.mas{margin-bottom:5px}
-.mbm,.mvm,.mam{margin-bottom:10px}
-.mbl,.mvl,.mal{margin-bottom:20px}
-.mln,.mhn,.man{margin-left:0px}
-.mls,.mhs,.mas{margin-left:5px}
-.mlm,.mhm,.mam{margin-left:10px}
-.mll,.mhl,.mal{margin-left:20px}
+.ptn,.pvn,.pan{padding-top:0px !important}
+.pts,.pvs,.pas{padding-top:5px !important}
+.ptm,.pvm,.pam{padding-top:10px !important}
+.ptl,.pvl,.pal{padding-top:20px !important}
+.prn,.phn,.pan{padding-right:0px !important}
+.prs,.phs,.pas{padding-right:5px !important}
+.prm,.phm,.pam{padding-right:10px !important}
+.prl,.phl,.pal{padding-right:20px !important}
+.pbn,.pvn,.pan{padding-bottom:0px !important}
+.pbs,.pvs,.pas{padding-bottom:5px !important}
+.pbm,.pvm,.pam{padding-bottom:10px !important}
+.pbl,.pvl,.pal{padding-bottom:20px !important}
+.pln,.phn,.pan{padding-left:0px !important}
+.pls,.phs,.pas{padding-left:5px !important}
+.plm,.phm,.pam{padding-left:10px !important}
+.pll,.phl,.pal{padding-left:20px !important}
+.mtn,.mvn,.man{margin-top:0px !important}
+.mts,.mvs,.mas{margin-top:5px !important}
+.mtm,.mvm,.mam{margin-top:10px !important}
+.mtl,.mvl,.mal{margin-top:20px !important}
+.mrn,.mhn,.man{margin-right:0px !important}
+.mrs,.mhs,.mas{margin-right:5px !important}
+.mrm,.mhm,.mam{margin-right:10px !important}
+.mrl,.mhl,.mal{margin-right:20px !important}
+.mbn,.mvn,.man{margin-bottom:0px !important}
+.mbs,.mvs,.mas{margin-bottom:5px !important}
+.mbm,.mvm,.mam{margin-bottom:10px !important}
+.mbl,.mvl,.mal{margin-bottom:20px !important}
+.mln,.mhn,.man{margin-left:0px !important}
+.mls,.mhs,.mas{margin-left:5px !important}
+.mlm,.mhm,.mam{margin-left:10px !important}
+.mll,.mhl,.mal{margin-left:20px !important}
@@ -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="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>
@@ -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;}
@@ -0,0 +1,3 @@
+/* Allow grid divisions of 1/6 etc. */
+.size1of6{width:16.6666666%;}
+.size5of6{width:83.3333333%;}
@@ -0,0 +1,7 @@
+/* Allow grid divisions of 1/7 etc. */
+.size1of7{width:14.2857143%;}
+.size2of7{width:28.5714286%;}
+.size3of7{width:42.8571429%;}
+.size4of7{width:57.1428572%;}
+.size5of7{width:71.4285715%;}
+.size6of7{width:85.7142858%;}
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 2f67aa3

Please sign in to comment.