Skip to content
Browse files

Corrected a few typos, removed double/trailing spaces, converted spac…

…es to tabs, added proper double quotes, added language attribute.
  • Loading branch information...
1 parent 5037bfd commit 86fb835fba3c540e8bd59327371c28dadd767d03 @oli oli committed with martinklepsch Dec 22, 2009
View
6 core/content.css
@@ -13,12 +13,12 @@ hr{border: 5px solid #e2e2e2; border-width: 0 0 5px 0; margin: 20px 10px 10px 10
code{color:#0B8C8F;}
/* ====== Headings ====== */
/* .h1-.h6 classes should be used to maintain the semantically appropriate heading levels - NOT for use on non-headings */
-h1, .h1{font-size:196%; font-weight:normal; font-style: normal; color:#AE0345;}
+h1, .h1{font-size:196%; font-weight:normal; font-style: normal; color:#AE0345;}
h2, .h2{font-size:167%; font-weight:normal; font-style: normal; color:#AE0345;}
h3, .h3{font-size:146.5%; font-weight:normal; font-style: normal; color:#DF2B72;}
h4, .h4{font-size:123.1%; font-weight:normal; font-style: normal; color: #333;}
h5, .h5{font-size:108%; font-weight:bold; font-style: normal; color:#AE0345;}
-h6, .h6{font-size:108%; font-weight:normal; font-style: italic; color:#333;}
+h6, .h6{font-size:108%; font-weight:normal; font-style: italic; color:#333;}
/* if additional headings are needed they should be created via additional classes, never via location dependant styling */
.category{font-size:108%; font-weight:normal; font-style: normal; text-transform:uppercase; color: #333;}
.category a{color: #333;}
@@ -59,7 +59,7 @@ cite{display:block; text-align:right; padding-top: 10px;}
.callout span.quotLast{vertical-align:middle;}
/* ====== image treatments (get more from jason santa maria) ====== */
.caption{font-size:13px; color:#666666; font-style:italic;padding-top:0;}
-/* will need to either
+/* will need to either
1. find a way to capture the width of the caption in the width of the image or flash
2. Set some default widths, mby use flickr widths?
*/
View
8 core/grid/grids_doc.html
@@ -16,7 +16,7 @@
</head>
<body>
<h1>Lines &amp; Grids</h1>
-<p class="intro">Grids are used to break any space into fractions, they can be nested. A unit can contain another line or it can contain other objects directly. The sum of the fractional sizes of all children of one line should be equal to one. Grids control width, content controls height.</p>
+<p class="intro">Grids are used to break any space into fractions, they can be nested. A unit can contain another line or it can contain other objects directly. The sum of the fractional sizes of all children of one line should be equal to one. Grids control width, content controls height.</p>
<h2>Base Classes</h2>
<div class="data">
<table>
@@ -29,7 +29,7 @@
<tbody>
<tr class="odd">
<th scope="row"><code>line</code></th>
- <td>Groups units on one horizontal line. Note: for mobile layout units may be stacked to avoid horizontal scrolling.</td>
+ <td>Groups units on one horizontal line. Note: for mobile layout units may be stacked to avoid horizontal scrolling.</td>
</tr>
<tr class="even">
<th scope="row"><code>unit</code></th>
@@ -94,7 +94,7 @@
<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 class="unit size1of3 lastUnit">
- <h3>1/3</h3>
+ <h3>1/3</h3>
<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>
@@ -164,7 +164,7 @@
<h2>Complicated Nesting - the AG test</h2>
-<p>Many years ago Arnaud Gueras, an excellent developer I worked with, created this litmus test of a great grid system. It should be able to nest any combination of the units and lines, and so it should be able to create the complicated layout below. His test reminded me of the golden mean, so I still use it today. </p>
+<p>Many years ago Arnaud Gueras, an excellent developer I worked with, created this litmus test of a great grid system. It should be able to nest any combination of the units and lines, and so it should be able to create the complicated layout below. His test reminded me of the golden mean, so I still use it today.</p>
<div class="line">
<div class="unit size1of5">
View
4 core/module/mod.css
@@ -13,7 +13,7 @@ b{display:block;background-repeat:no-repeat;font-size:1%;position:relative;z-ind
.tl, .tr, .bl, .br{height:10px; width:10px;float:left;}
.tl{background-position: left top;}
.tr{background-position: right top;}
-.bl{background-position: left bottom;}
+.bl{background-position: left bottom;}
.br{background-position: right bottom;}
.br,.tr{float:right;}
.tr, .tl{overflow:hidden;margin-bottom:-32000px;}/* margin bottom needs to be < -9px */
@@ -26,7 +26,7 @@ b{display:block;background-repeat:no-repeat;font-size:1%;position:relative;z-ind
.complex .bl, .complex .br{/*margin-top:0;*/}
.complex .top{height:5px;}
.complex .bottom{height:5px;/*margin-top:-10px;*/}
-/* pop */
+/* pop */
.pop{overflow:visible;margin: 10px 20px 20px 10px; background-position:left top;}
.pop .inner{right:-10px; bottom:-10px; background-position:right bottom;padding:0 10px 10px 0;}
.pop .tl, .pop .br{display:none;}
View
144 core/module/mod_doc.html
@@ -9,18 +9,18 @@
<link rel="stylesheet" type="text/css" media="all" href="../../core/content.css" />
<link rel="stylesheet" type="text/css" media="all" href="../../core/module/mod.css" />
<link rel="stylesheet" type="text/css" media="all" href="../../core/module/mod_skins.css" />
-<!--<link rel="stylesheet" type="text/css" media="all" href="../../core/module/mod_debug.css" />
---></head>
+<!--<link rel="stylesheet" type="text/css" media="all" href="../../core/module/mod_debug.css" /> -->
+</head>
<body>
<div class="page">
<h1>Modules</h1>
<h2>Block Structures</h2>
- <p>There are three basic block structures that you can build from. Examine how the structures work in Firebug, Dragonfly, or by applying the stylesheet mod_debug.css</p>
+ <p>There are three basic block structures that you can build from. Examine how the structures work in Firebug, Dragonfly, WebKit Inspector or by applying the stylesheet mod_debug.css</p>
<div class="line">
<div class="unit size1of3">
- <div class="mod">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="mod">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
<h3>mod </h3>
@@ -35,18 +35,18 @@
</ul>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
</div>
<div class="unit size1of3">
- <div class="mod complex">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="mod complex">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
<h3>complex</h3>
</div>
<div class="bd">
- <p>complex should be used in cases where you require images for borders because borders or drop shadows are too complex to be simulated via borders on mod and/or inner. </p>
+ <p>complex should be used in cases where you require images for borders because borders or drop shadows are too complex to be simulated via borders on mod and/or inner.</p>
<ul class="simpleList">
<li>One image</li>
<li>Height and width limited by image size</li>
@@ -56,12 +56,12 @@
<p>Inspired by a conversation with Arnaud.</p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
</div>
<div class="unit size1of3 lastUnit">
- <div class="mod pop">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="mod pop">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
<h3>pop </h3>
@@ -74,10 +74,10 @@
<li>Compatible with any container, but not any content</li>
<li>Choose when you require outside transparency which cannot be simulated. (do i need to make this work with clip rather than bkg position?)</li>
</ul>
- <p>Inspired by Leslie Sommers mojo blocks.</p>
+ <p>Inspired by <a href="http://www.lesliesommer.com/wdw07/html/" title="CSS Mojo: Adding Polish To Your Pages">Leslie Sommer’s Mojo blocks</a>.</p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
</div>
</div>
@@ -86,8 +86,8 @@
<div class="line">
<div class=" unit size1of3">
<h4>Extends mod</h4>
- <div class="mod grab">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="mod grab">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
<h3>grab</h3>
@@ -96,10 +96,10 @@
<p>Body</p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
- <div class="mod simpleExt">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="mod simpleExt">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
<h3>simpleExt</h3>
@@ -108,10 +108,10 @@
<p>Body</p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
- <div class="mod simple">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="mod simple">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
<h3>simple</h3>
@@ -120,10 +120,10 @@
<p>Body</p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
- <div class="mod noted">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="mod noted">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
<h3>noted</h3>
@@ -132,10 +132,10 @@
<p>Body</p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
- <div class="mod talk">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="mod talk">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
<h3>talk</h3>
@@ -144,10 +144,10 @@
<p>Body</p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
- <div class="mod me">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="mod me">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
<h3>me</h3>
@@ -156,10 +156,10 @@
<p>Body</p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
- <div class="mod basic">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="mod basic">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
<h3>basic</h3>
@@ -168,7 +168,7 @@
<p>Must be combined with a background color or content, adds rounded corners.</p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
</div>
<div class=" unit size1of3">
@@ -186,10 +186,10 @@
<p>Foot</p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
- <div class="mod complex flow">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="mod complex flow">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
<h3>flow</h3>
@@ -198,9 +198,9 @@
<p><a href="#">Body</a></p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
- <!--<div class="mod boo">
+ <!--<div class="mod boo">
<b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
@@ -210,22 +210,22 @@
<p><a href="#">Body</a></p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>-->
- <div class="mod complex photo">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="mod complex photo">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="bd">
<img src="skin/kakapo.png" alt="boo" />
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
</div>
<div class=" unit size1of3 lastUnit">
<h4>Extends pop</h4>
- <div class="mod pop sommers">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="mod pop sommers">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
<h3>sommers</h3>
@@ -234,10 +234,10 @@
<p>Body</p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
- <div class="mod pop gonzalo">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="mod pop gonzalo">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd gonz">
<h3>gonzalo</h3>
@@ -246,15 +246,15 @@
<p>Body</p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
</div>
</div>
<h2>Background Objects</h2>
<div class="line">
<div class="unit size1of3">
- <div class="mod highlight">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="mod highlight">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
<h3>highlight</h3>
@@ -263,10 +263,10 @@
<p>Body</p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
- <div class="mod universe">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="mod universe">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
<h3>universe</h3>
@@ -275,12 +275,12 @@
<p>Body</p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
</div>
<div class="unit size1of3">
- <div class="mod comment">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="mod comment">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
<h3>comment</h3>
@@ -289,10 +289,10 @@
<p>Body</p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
- <div class="mod foo">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="mod foo">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
<h3>foo</h3>
@@ -301,12 +301,12 @@
<p>Body</p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
</div>
<div class="unit size1of3 lastUnit">
- <div class="mod nicole">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="mod nicole">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
<h3>nicole</h3>
@@ -315,10 +315,10 @@
<p>Body</p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
- <div class="mod login">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="mod login">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
<h3>login</h3>
@@ -327,10 +327,10 @@
<p>Body</p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
</div>
-
+
</div>
<h2>Block Headers</h2>
<h3 class="bam">Bam</h3>
@@ -340,10 +340,10 @@ <h3 class="topper">Topper</h3>
<h3 class="section">Section</h3>
<h2>Block Footers</h2>
<div class="ft act">button here</div>
-
+
</div>
-<!--<script type="text/javascript" src="http://webbits.pl/yui/build/yahoo/yahoo.js"></script>
-<script type="text/javascript" src="http://webbits.pl/yui/build/dom/dom.js"></script>
+<!--<script type="text/javascript" src="http://webbits.pl/yui/build/yahoo/yahoo.js"></script>
+<script type="text/javascript" src="http://webbits.pl/yui/build/dom/dom.js"></script>
<script type="text/javascript">
var currentStyles = YAHOO.util.Dom.getStyle(document.body, 'backgroundColor');
console.log(currentStyles);
View
10 core/module/mod_skins.css
@@ -13,23 +13,23 @@
.simpleExt b{background-image:url(skin/simple_extended.png);}
.simpleExt .tl{left:-1px;top:-1px;height:12px; width:12px;}
.simpleExt .tr{right:-1px;top:-1px;height:12px; width:12px;}
-.simpleExt .bl{left:-1px;bottom:-1px;height:12px; width:12px;margin-top:-12px;}
+.simpleExt .bl{left:-1px;bottom:-1px;height:12px; width:12px;margin-top:-12px;}
.simpleExt .br{right:-1px;bottom:-1px;height:12px; width:12px;margin-top:-12px;}
/* ----- me (extends mod) use for my comments ----- */
.me,.me .inner{border:1px solid #909090;/*-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;*/}
.me .inner{border-color:#d76a84;}
.me b{background-image:url(skin/me.png);}
.me .tl{left:-1px;top:-1px;}
.me .tr{right:-1px;top:-1px;}
-.me .bl{left:-1px;bottom:-1px;}
+.me .bl{left:-1px;bottom:-1px;}
.me .br{right:-1px;bottom:-1px;}
/* ----- noted (extends mod) ----- */
.noted,.noted .inner{border:1px solid #c2c2c2;/*-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;*/}
.noted .inner{border-color:#eded68;}
.noted b{background-image:url(skin/noted.png);}
.noted .tl{left:-1px;top:-1px;}
.noted .tr{right:-1px;top:-1px;}
-.noted .bl{left:-1px;bottom:-1px;}
+.noted .bl{left:-1px;bottom:-1px;}
.noted .br{right:-1px;bottom:-1px;}
/* ----- grab (extends mod) ----- */
.grab .inner{border: 3px solid #00477a; border-bottom-width:10px;}/* can't be done w border radius */
@@ -54,13 +54,13 @@
.talk b{*background-image:url(skin/talk.png);}
.talk .tl{left:-1px;top:-1px;}
.talk .tr{right:-1px;top:-1px;}
-.talk .bl{left:-1px;bottom:-1px;}
+.talk .bl{left:-1px;bottom:-1px;}
.talk .br{right:-1px;bottom:-1px;}
/* ----- photo (extends complex) ----- */
.photo .inner{border:solid 10px #fff;margin:0 4px;}/* muck with margins to change how the block will align with other blocks, any value between 0-10px */
.photo b{background-image:url(skin/photo.png);}
.photo .tr, .photo .tl{width:20px;}
-.photo .top, .photo .bottom{height:4px;margin-top:0px;}
+.photo .top, .photo .bottom{height:4px;margin-top:0px;}
.photo .bl, .photo .br{height:16px;margin-top: -12px;}
/* ----- flow (extends complex) ----- */
.flow{margin:6px;}
View
8 core/template/template.html
@@ -31,7 +31,7 @@
</div>
<div class="rightCol">
<h2>Right Column</h2>
- <p>The right column is by default 300px wide. It can be extended via all the same classes that are available to right column.</p>
+ <p>The right column is by default 300px wide. It can be extended via all the same classes that are available to right column.</p>
<ul>
<li>.gMail = 160px</li>
<li>.gCal = 180px</li>
@@ -41,13 +41,13 @@
</div>
<div class="main">
<h2>Main Content</h2>
- <p>Main Content is fully liquid. It takes all the remaining space on the line after the widths of "leftCol" and "rightCol" are taken into account. Alternatively, grids can be used to break up the main content area for fully fluid layouts.</p>
+ <p>Main Content is fully liquid. It takes all the remaining space on the line after the widths of leftCol and rightCol are taken into account. Alternatively, grids can be used to break up the main content area for fully fluid layouts.</p>
</div>
</div>
<div class="foot">
<h2>Foot</h2>
- <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>
+ <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>
</body>
</html>
View
2 core/template/template_debug.css
@@ -1,6 +1,6 @@
/* **************** TEMPLATE DEBUG ***************** */
.body{background-color:red;}
-.page{background-color:orange;}
+.page{background-color:orange;}
.main{background-color:yellow;}
.leftCol{background-color:lime;}
.rightCol{background-color:aqua;}
View
9 core/template/template_doc.html
@@ -15,7 +15,7 @@
</head>
<body>
<h1>Template</h1>
-<p>Templates are used to solve common design patterns for page templates. Using these templates you can build pages which have a <strong>header</strong>, <strong>footer</strong>, <strong>left</strong> and <strong>right columns</strong>, and a <strong>main content area</strong>. Any of the sections can be broken up via <a href="grids_docs.html">grids</a>. You can also use grids instead of columns. The main column is fully liquid, taking up all the rest of the space when the left column and right colum have been rendered. </p>
+<p>Templates are used to solve common design patterns for page templates. Using these templates you can build pages which have a <strong>header</strong>, <strong>footer</strong>, <strong>left</strong> and <strong>right columns</strong>, and a <strong>main content area</strong>. Any of the sections can be broken up via <a href="grids_docs.html">grids</a>. You can also use grids instead of columns. The main column is fully liquid, taking up all the rest of the space when the left column and right column have been rendered.</p>
<h2>Base Classes</h2>
<div class="data">
<table>
@@ -44,7 +44,7 @@
</tr>
<tr class="odd">
<th scope="row"><code>main</code></th>
- <td>Creates a main content area, often the center column. Fully liquid, it takes all remaining space when left and right columns have been rendered. You may have 1 main columns.</td>
+ <td>Creates a main content area, often the center column. Fully liquid, it takes all remaining space when left and right columns have been rendered. You may have 1 main columns.</td>
</tr>
<tr class="odd">
<th scope="row"><code>leftCol</code></th>
@@ -87,7 +87,7 @@
<pre>&lt;div class=&quot;page <strong>liquid</strong>&quot;&gt;<br /> &lt;div class=&quot;head&quot;&gt;&lt;!-- Head --&gt;&lt;/div&gt;<br /> &lt;div class=&quot;body&quot;&gt;&lt;!-- Body --&gt;<br /> &lt;div class=&quot;leftCol <strong>gMail</strong>&quot;&gt;&lt;!-- Left Column (optional region) --&gt;&lt;/div&gt;
<strong>&lt;!-- note: right column has been removed --&gt;</strong><br /> &lt;div class=&quot;main&quot;&gt;&lt;!-- Main Content --&gt;&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;foot&quot;&gt;&lt;!-- Foot --&gt;&lt;/div&gt; <br />&lt;/div&gt;</pre>
<h2>Goals</h2>
-<p>In object oriented CSS the most important goal is to have a single template from which all pages are built. This eases CMS development because by having a single starting point all pages can be made into any other page. Users of the CMS do not have traps in which a page they have built cannot be morphed into a different page type. Another goal of and OO template is to have each section (column, header, etc) control it's own destiny. Practically, that means that if you want to add a left column to the template, the only required action should be actually adding the column to the HTML. You never want to write CSS in such a way that changes are required higher in the DOM tree in order to make child elements behave properly. Looping through the dom is costly for CMS development. Similarly, if you want to have a different left column width, it should be accomplished by <em>extending the left column object</em> by adding an additional class. </p>
+<p>In object oriented CSS the most important goal is to have a single template from which all pages are built. This eases CMS development because by having a single starting point all pages can be made into any other page. Users of the CMS do not have traps in which a page they have built cannot be morphed into a different page type. Another goal of an OO template is to have each section (column, header, etc) control it's own destiny. Practically, that means that if you want to add a left column to the template, the only required action should be actually adding the column to the HTML. You never want to write CSS in such a way that changes are required higher in the DOM tree in order to make child elements behave properly. Looping through the DOM is costly for CMS development. Similarly, if you want to have a different left column width, it should be accomplished by <em>extending the left column object</em> by adding an additional class.</p>
<h3>Extending an object</h3>
<pre>&lt;div class=&quot;leftCol <strong>gMail</strong>&quot;&gt; ... &lt;/div&gt;</pre>
@@ -102,8 +102,7 @@
<h2>Known Issues</h2>
<ul>
<li><strong>Source order</strong> - the right column is before the main content in the source order. This choice was made in order to allow the columns to be completely independent objects and to have one unique template rather than multiple starting points for a site. This speeds and simplifies CMS development and enhances usability for those creating pages within the CMS. Skip to content links and navigational items marked up as lists are strongly encouraged.</li>
- <li><strong>Overflow</strong> - the containing blocks are made to wrap floats using the <em>contexte de formattage</em>; <code>overflow:hidden; _overflow:visible; zoom:1;</code>. This is known to cause printing bugs in older versions of Firefox and can cause absolutely positioned blocks origniating in that container to be cropped. Removing floats and overflow via the print stylesheet is a corrective option.
- </li>
+ <li><strong>Overflow</strong> - the containing blocks are made to wrap floats using the <em lang="fr" xml:lang="fr">contexte de formattage</em>; <code>overflow:hidden; _overflow:visible; zoom:1;</code>. This is known to cause printing bugs in older versions of Firefox and can cause absolutely positioned blocks originating in that container to be cropped. Removing floats and overflow via the print stylesheet is a corrective option.</li>
</ul>
</body>
</html>
View
2 license.txt
@@ -3,7 +3,7 @@ Software License Agreement (BSD License)
Copyright (c) 2009, Nicole Sullivan.
All rights reserved.
-Redistribution and use of this software in source and binary forms, with or without modification, are
+Redistribution and use of this software in source and binary forms, with or without modification, are
permitted provided that the following conditions are met:
* Redistributions of source code must retain the above
View
40 plugins/tabs/tabs_doc.html
@@ -8,32 +8,30 @@
<link rel="stylesheet" type="text/css" media="all" href="../../core/module/mod.css" />
<link rel="stylesheet" type="text/css" media="all" href="../../core/module/mod_skins.css" />
<link rel="stylesheet" type="text/css" media="all" href="tabs.css" />
-
</head>
<body>
-<div class="mod simple tabs">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
- <div class="inner">
- <div class="hd topper">
- <ul class="tabControl"><li><a href="#"><span>Tab 1</span></a></li><li><a href="#"><span>Tab 2</span></a></li><li class="current"><a href="#"><span>Tab 3 <br /> boo foo foo</span></a></li><li><a href="#"><span>Tab 4</span></a></li><li><a href="#"><span>Tab 5</span></a></li><li><a href="#"><span>Tab 6 has lots and lots of text on one line</span></a></li></ul>
- <ul class="controls"><li><a href="#"><span>x</span></a></li><li><a href="#"><span>-</span></a></li><li><a href="#"><span>+</span></a></li></ul>
- </div>
- <div class="bd">
- <ul>
- <li>Tab 1 Content</li>
- <li>Tab 2 Content</li>
- <li class="current">Tab 3 Content <br /><br /><br /></li>
- <li>Tab 4 Content</li>
- <li>Tab 5 Content</li>
- <li>Tab 6 Content</li>
- </ul>
- </div>
- </div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+<div class="mod simple tabs">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="inner">
+ <div class="hd topper">
+ <ul class="tabControl"><li><a href="#"><span>Tab 1</span></a></li><li><a href="#"><span>Tab 2</span></a></li><li class="current"><a href="#"><span>Tab 3 <br /> boo foo foo</span></a></li><li><a href="#"><span>Tab 4</span></a></li><li><a href="#"><span>Tab 5</span></a></li><li><a href="#"><span>Tab 6 has lots and lots of text on one line</span></a></li></ul>
+ <ul class="controls"><li><a href="#"><span>x</span></a></li><li><a href="#"><span>-</span></a></li><li><a href="#"><span>+</span></a></li></ul>
+ </div>
+ <div class="bd">
+ <ul>
+ <li>Tab 1 Content</li>
+ <li>Tab 2 Content</li>
+ <li class="current">Tab 3 Content<br /><br /><br /></li>
+ <li>Tab 4 Content</li>
+ <li>Tab 5 Content</li>
+ <li>Tab 6 Content</li>
+ </ul>
+ </div>
+ </div>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
-
</body>
</html>
View
64 plugins/talk/talk_doc.html
@@ -11,17 +11,17 @@
<link rel="stylesheet" type="text/css" media="all" href="../../core/module/mod_skins.css" />
<link rel="stylesheet" type="text/css" media="all" href="talk.css" />
<link rel="stylesheet" type="text/css" media="all" href="talk_skins.css" />
-<!--<link rel="stylesheet" type="text/css" media="all" href="css/mod_debug.css" />
---></head>
+<!--<link rel="stylesheet" type="text/css" media="all" href="css/mod_debug.css" /> -->
+</head>
<body>
<div class="page">
<h1>Talk Bubbles</h1>
<p>Talk bubbles allow you to have cartoon-like talk bubbles with zero images. For now, they are based on standard module format.</p>
<div class="line">
<div class=" unit size1of4">
- <div class="mod bubble bubbleTop yowza">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="mod bubble bubbleTop yowza">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd fire">
<h3>yowza</h3>
@@ -30,12 +30,12 @@
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
</div>
<div class=" unit size1of4">
- <div class="mod bubble bubbleLeft lol">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="mod bubble bubbleLeft lol">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd fire">
<h3>lol</h3>
@@ -44,12 +44,12 @@
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
</div>
<div class=" unit size1of4">
- <div class="mod bubble bubbleRight meep">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="mod bubble bubbleRight meep">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd fire">
<h3>meep</h3>
@@ -58,12 +58,12 @@
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
</div>
<div class=" unit size1of4 lastUnit">
- <div class="mod bubble bubbleBottom yoyo">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="mod bubble bubbleBottom yoyo">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd fire">
<h3>Yoyo</h3>
@@ -72,15 +72,15 @@
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
</div>
</div>
<h2>Extending the talk bubbles</h2>
<div class="line">
<div class=" unit size1of4">
- <div class="mod bubble bubbleTop yowza bubbleVerticalExt">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="mod bubble bubbleTop yowza bubbleVerticalExt">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd fire">
<h3>yowza + bubbleVerticalExt</h3>
@@ -89,12 +89,12 @@
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
</div>
<div class=" unit size1of4">
- <div class="mod bubble bubbleLeft lol bubbleHorizontalExt">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="mod bubble bubbleLeft lol bubbleHorizontalExt">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd fire">
<h3>lol + bubbleHorizontalExt</h3>
@@ -103,12 +103,12 @@
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
</div>
<div class=" unit size1of4">
- <div class="mod bubble bubbleRight meep bubbleHorizontalExt">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="mod bubble bubbleRight meep bubbleHorizontalExt">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd fire">
<h3>meep + bubbleHorizontalExt</h3>
@@ -117,12 +117,12 @@
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
</div>
<div class=" unit size1of4 lastUnit">
- <div class="mod bubble bubbleBottom yoyo bubbleVerticalExt">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="mod bubble bubbleBottom yoyo bubbleVerticalExt">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd fire">
<h3>Yoyo + bubbleVerticalExt</h3>
@@ -131,28 +131,28 @@
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
</div>
</div>
<h2>Suggested use:</h2>
<div class="line">
<div class=" unit size1of3">
- <div class="mod bubble bubbleBottom discuss ">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="mod bubble bubbleBottom discuss">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="bd">
- <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga."</p>
+ <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
<div class="media attribution">
<a href="http://twitter.com/stubbornella" class="img"><img src="http://a3.twimg.com/profile_images/72157651/tattoo_pink_bkg_square_mini.jpg" alt="Stubbornella" /></a>
- <div class="bd"><a href="http://twitter.com/stubbornella">@Stubbornella</a> <span class="detail">14 miniutes ago</span></div>
+ <div class="bd"><a href="http://twitter.com/stubbornella">@Stubbornella</a> <span class="detail">14 minutes ago</span></div>
</div>
</div>
- </div>
+ </div>
</div>
</body>
</html>

0 comments on commit 86fb835

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