oocss-compass 0.0.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (70) hide show
  1. data/LICENSE +30 -0
  2. data/lib/oocss-compass.rb +4 -0
  3. data/stylesheets/_definitions.scss +64 -0
  4. data/stylesheets/_mixins.scss +13 -0
  5. data/stylesheets/_oocss-compass.scss +61 -0
  6. data/stylesheets/core/_libraries.scss +82 -0
  7. data/stylesheets/core/grid/_grids.scss +59 -0
  8. data/stylesheets/core/grid/_grids_debug.scss +36 -0
  9. data/stylesheets/core/module/_mod.scss +120 -0
  10. data/stylesheets/core/module/_mod_debug.scss +28 -0
  11. data/stylesheets/core/template/_template.scss +69 -0
  12. data/stylesheets/core/template/_template_debug.scss +19 -0
  13. data/stylesheets/plugins/breadcrumb/_breadcrumb.scss +15 -0
  14. data/stylesheets/plugins/breadcrumb/breadcrumb.css +4 -0
  15. data/stylesheets/plugins/tabs/_tabs.scss +146 -0
  16. data/stylesheets/plugins/talk/_talk.scss +76 -0
  17. data/stylesheets/plugins/talk/talk.css +20 -0
  18. data/templates/project/default.scss +19 -0
  19. data/templates/project/demos/core/grids/grids_all.html +362 -0
  20. data/templates/project/demos/core/grids/grids_doc.html +225 -0
  21. data/templates/project/demos/core/module/mod_doc.html +352 -0
  22. data/templates/project/demos/core/template/template.html +53 -0
  23. data/templates/project/demos/core/template/template_doc.html +108 -0
  24. data/templates/project/demos/plugins/breadcrumb/breadcrumb.html +42 -0
  25. data/templates/project/demos/plugins/tabs/tabs_doc.html +105 -0
  26. data/templates/project/demos/plugins/talk/talk_doc.html +158 -0
  27. data/templates/project/manifest.rb +13 -0
  28. data/templates/project/partials/_base.scss +0 -0
  29. data/templates/project/partials/core/_content.scss +261 -0
  30. data/templates/project/partials/core/_mod_skins.scss +405 -0
  31. data/templates/project/partials/core/content.css +73 -0
  32. data/templates/project/partials/core/mod_skins.css +113 -0
  33. data/templates/project/partials/plugins/_talk_skins.scss +54 -0
  34. data/templates/project/partials/plugins/talk_skins.css +18 -0
  35. data/templates/project/skin/about.png +0 -0
  36. data/templates/project/skin/author.png +0 -0
  37. data/templates/project/skin/even.png +0 -0
  38. data/templates/project/skin/even_borders.psd +0 -0
  39. data/templates/project/skin/even_lr.png +0 -0
  40. data/templates/project/skin/even_tb.png +0 -0
  41. data/templates/project/skin/excerpt.png +0 -0
  42. data/templates/project/skin/faq.png +0 -0
  43. data/templates/project/skin/gc.png +0 -0
  44. data/templates/project/skin/gc_header.png +0 -0
  45. data/templates/project/skin/gc_header2.png +0 -0
  46. data/templates/project/skin/glow.png +0 -0
  47. data/templates/project/skin/glow_7px.png +0 -0
  48. data/templates/project/skin/glow_test.png +0 -0
  49. data/templates/project/skin/glow_thin.png +0 -0
  50. data/templates/project/skin/grab.png +0 -0
  51. data/templates/project/skin/header.png +0 -0
  52. data/templates/project/skin/header_glossy.png +0 -0
  53. data/templates/project/skin/header_gradient_light.png +0 -0
  54. data/templates/project/skin/help.png +0 -0
  55. data/templates/project/skin/highlight.png +0 -0
  56. data/templates/project/skin/info.png +0 -0
  57. data/templates/project/skin/kakapo.png +0 -0
  58. data/templates/project/skin/me.png +0 -0
  59. data/templates/project/skin/noted.png +0 -0
  60. data/templates/project/skin/online.png +0 -0
  61. data/templates/project/skin/photo.png +0 -0
  62. data/templates/project/skin/round.png +0 -0
  63. data/templates/project/skin/simple_corners.png +0 -0
  64. data/templates/project/skin/simple_extended.png +0 -0
  65. data/templates/project/skin/store.png +0 -0
  66. data/templates/project/skin/talk.png +0 -0
  67. data/templates/project/skin/universe.png +0 -0
  68. data/templates/project/skin/universe_gray.png +0 -0
  69. data/templates/project/skin/universe_login.png +0 -0
  70. metadata +147 -0
data/templates/project/demos/core/template/template.html ADDED
@@ -0,0 +1,53 @@
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>Template Documentation</title>
6
+ <link rel="stylesheet" type="text/css" media="all" href="../../core/libraries.css" />
7
+ <link rel="stylesheet" type="text/css" media="all" href="../../core/template/template.css" />
8
+ <!--<link rel="stylesheet" type="text/css" media="all" href="../../core/template/template_debug.css" />-->
9
+ <link rel="stylesheet" type="text/css" media="all" href="../../core/grid/grids.css" />
10
+ <link rel="stylesheet" type="text/css" media="all" href="../../core/content.css" />
11
+ <link rel="stylesheet" type="text/css" media="all" href="../../core/module/mod.css" />
12
+ <link rel="stylesheet" type="text/css" media="all" href="../../core/module/mod_skins.css" />
13
+ </head>
14
+ <body>
15
+ <h1>Template</h1>
16
+ <div class="page">
17
+ <div class="head">
18
+ <h2>Head</h2>
19
+ <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>
20
+ </div>
21
+ <div class="body">
22
+ <div class="leftCol">
23
+ <h2>Left Column</h2>
24
+ <p>Left column is 250px by default. It can be extended by several classes to allow for additional layouts.</p>
25
+ <ul>
26
+ <li>.gMail = 160px</li>
27
+ <li>.gCal = 180px</li>
28
+ <li>.yahoo = 240px</li>
29
+ <li>.myYahoo = 300px</li>
30
+ </ul>
31
+ </div>
32
+ <div class="rightCol">
33
+ <h2>Right Column</h2>
34
+ <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>
35
+ <ul>
36
+ <li>.gMail = 160px</li>
37
+ <li>.gCal = 180px</li>
38
+ <li>.yahoo = 240px</li>
39
+ <li>.myYahoo = 300px</li>
40
+ </ul>
41
+ </div>
42
+ <div class="main">
43
+ <h2>Main Content</h2>
44
+ <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>
45
+ </div>
46
+ </div>
47
+ <div class="foot">
48
+ <h2>Foot</h2>
49
+ <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>
50
+ </div>
51
+ </div>
52
+ </body>
53
+ </html>
data/templates/project/demos/core/template/template_doc.html ADDED
@@ -0,0 +1,108 @@
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>Template Documentation</title>
6
+ <link rel="stylesheet" type="text/css" media="all" href="../../core/libraries.css" />
7
+ <link rel="stylesheet" type="text/css" media="all" href="../../core/template/template.css" />
8
+ <link rel="stylesheet" type="text/css" media="all" href="../../core/grid/grids.css" />
9
+ <link rel="stylesheet" type="text/css" media="all" href="../../core/content.css" />
10
+ <style type="text/css">
11
+ dt{font-weight:bold;}
12
+ pre strong, dt strong{color: #0B8C8F;}
13
+ pre{padding: 20px;background-color: #FCF8BC;overflow:auto;width:auto;}
14
+ </style>
15
+ </head>
16
+ <body>
17
+ <h1>Template</h1>
18
+ <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>
19
+ <h2>Base Classes</h2>
20
+ <div class="data">
21
+ <table>
22
+ <thead>
23
+ <tr>
24
+ <th>Property</th>
25
+ <th>Description</th>
26
+ </tr>
27
+ </thead>
28
+ <tbody>
29
+ <tr class="odd">
30
+ <th scope="row"><code>page</code></th>
31
+ <td>Main wraps site content. It can be extended via the classes <code>oldSchool</code> and <code>liquid</code> to provide 750px and full width layouts respectively.</td>
32
+ </tr>
33
+ <tr class="even">
34
+ <th scope="row"><code>head</code></th>
35
+ <td>Site header, generally contains custom code. (e.g. horizontal navigation, logo, search box)</td>
36
+ </tr>
37
+ <tr class="odd">
38
+ <th scope="row"><code>body</code></th>
39
+ <td>Main content area, body of the page.</td>
40
+ </tr>
41
+ <tr class="even">
42
+ <th scope="row"><code>foot<strong></strong></code></th>
43
+ <td>Site footer, generally contains custom code.</td>
44
+ </tr>
45
+ <tr class="odd">
46
+ <th scope="row"><code>main</code></th>
47
+ <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>
48
+ </tr>
49
+ <tr class="odd">
50
+ <th scope="row"><code>leftCol</code></th>
51
+ <td>Creates a left column, default width is 250px. Extended by <code>gMail</code>, <code>gCal</code>, <code>yahoo</code>, and <code>myYahoo</code> to create widths of 160px, 180px, 240px, and 300px respectively. You may have 0-n left columns.</td>
52
+ </tr>
53
+ <tr class="even">
54
+ <th scope="row"><code>rightCol</code></th>
55
+ <td>Creates a right column, default width is 250px. Extended by <code>gMail</code>, <code>gCal</code>, <code>yahoo</code>, and <code>myYahoo</code> to create widths of 160px, 180px, 240px, and 300px respectively. You may have 0-n right columns.</td>
56
+ </tr>
57
+ <tr class="odd">
58
+ <th scope="row"><code>gMail</code></th>
59
+ <td>Extends <code>leftCol</code> and <code>rightCol</code> to create a <strong>160px</strong> column width.</td>
60
+ </tr>
61
+ <tr class="even">
62
+ <th scope="row"><code>gCal</code></th>
63
+ <td>Extends <code>leftCol</code> and <code>rightCol</code> to create a <strong>180px</strong> column width.</td>
64
+ </tr>
65
+ <tr class="even">
66
+ <th scope="row"><code>yahoo</code></th>
67
+ <td>Extends <code>leftCol</code> and <code>rightCol</code> to create a <strong>240px</strong> column width.</td>
68
+ </tr>
69
+ <tr class="odd">
70
+ <th scope="row"><code>myYahoo</code></th>
71
+ <td>Extends <code>leftCol</code> and <code>rightCol</code> to create a <strong>300px</strong> column width.</td>
72
+ </tr>
73
+ <tr class="odd">
74
+ <th scope="row"><code>oldSchool</code></th>
75
+ <td>Extends <code>page</code> to create a <strong>750px</strong> layout.</td>
76
+ </tr>
77
+ <tr class="even">
78
+ <th scope="row"><code>liquid</code></th>
79
+ <td>Extends <code>page</code> to create a <strong>full-width</strong> liquid layout.</td>
80
+ </tr>
81
+ </tbody>
82
+ </table>
83
+ </div>
84
+ <h2>Basic template</h2>
85
+ <pre>&lt;div class=&quot;page&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&quot;&gt;&lt;!-- Left Column (optional region) --&gt;&lt;/div&gt;<br /> &lt;div class=&quot;rightCol&quot;&gt;&lt;!-- Right Column (optional region) --&gt;&lt;/div&gt;<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>
86
+ <h2>Full width template, 2 columns, gmail style (160px left column width)</h2>
87
+ <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;
88
+ <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>
89
+ <h2>Goals</h2>
90
+ <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>
91
+ <h3>Extending an object</h3>
92
+ <pre>&lt;div class=&quot;leftCol <strong>gMail</strong>&quot;&gt; ... &lt;/div&gt;</pre>
93
+
94
+ <h2>Customizing the template</h2>
95
+ <p>You may not find the default and extended widths of columns or pages match your site. In this case you can extend the column or page objects to allow custom widths. For performance reasons, you should avoid customizing templates whenever possible.</p>
96
+ <h3>Columns</h3>
97
+ <p><code>myColumn</code> extends column objects to allow for custom column widths.</p>
98
+ <pre>.myColumn{width:400px;}</pre>
99
+ <h3>Main page</h3>
100
+ <p><code>myPage</code> extends <code>page</code>.</p>
101
+ <pre>.myPage{width:1050px;}</pre>
102
+ <h2>Known Issues</h2>
103
+ <ul>
104
+ <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>
105
+ <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>
106
+ </ul>
107
+ </body>
108
+ </html>
data/templates/project/demos/plugins/breadcrumb/breadcrumb.html ADDED
@@ -0,0 +1,42 @@
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>Breadcrumbs</title>
6
+ <link rel="stylesheet" type="text/css" media="all" href="../../core/libraries.css" />
7
+ <link rel="stylesheet" type="text/css" media="all" href="../../core/content.css" />
8
+ <link rel="stylesheet" type="text/css" media="all" href="../../plugins/breadcrumb/breadcrumb.css" />
9
+ </head>
10
+
11
+ <body>
12
+ <h1>Breadcrumbs</h1>
13
+ <h2>short test</h2>
14
+ <ul class="breadcrumb">
15
+ <li><a href="#">Top Level Title</a></li>
16
+ <li>Current Page Title</li>
17
+ </ul>
18
+ <h2>long test</h2>
19
+ <ul class="breadcrumb">
20
+ <li><a href="#">Top Level Title</a></li>
21
+ <li><a href="#">Second Level Title</a></li>
22
+ <li><a href="#">Third Level Title</a></li>
23
+ <li><a href="#">Fourth Level Title</a></li>
24
+ <li><a href="#">Fifth Level Title</a></li>
25
+ <li><a href="#">Sixth Level Title</a></li>
26
+ <li><a href="#">Seventh Level Title</a></li>
27
+ <li>Current Page Title</li>
28
+ </ul>
29
+ <h2>long item test</h2>
30
+ <ul class="breadcrumb">
31
+ <li><a href="#">Top Level Title</a></li>
32
+ <li><a href="#">Second Level is really really long and wraps at small widths lorem ipsum doler lorem ipsum doler lorem ipsum doler lorem ipsum doler lorem ipsum doler </a></li>
33
+ <li><a href="#">Third Level Title</a></li>
34
+ <li><a href="#">Fourth Level Title</a></li>
35
+ <li><a href="#">Fifth Level Title</a></li>
36
+ <li><a href="#">Sixth Level Title</a></li>
37
+ <li><a href="#">Seventh Level Title</a></li>
38
+ <li>Current Page</li>
39
+ </ul>
40
+ <p>Currently tested on Safari, FF, Opera, & Chrome. Likely to have issues in IE6&7 due to advanced selectors, needs img backup. </p>
41
+ </body>
42
+ </html>
data/templates/project/demos/plugins/tabs/tabs_doc.html ADDED
@@ -0,0 +1,105 @@
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>Tabs</title>
6
+ <link rel="stylesheet" type="text/css" media="all" href="../../core/libraries.css" />
7
+ <link rel="stylesheet" type="text/css" media="all" href="../../core/content.css" />
8
+ <link rel="stylesheet" type="text/css" media="all" href="../../core/module/mod.css" />
9
+ <link rel="stylesheet" type="text/css" media="all" href="../../core/module/mod_skins.css" />
10
+ <link rel="stylesheet" type="text/css" media="all" href="tabs.css" />
11
+ </head>
12
+
13
+ <body>
14
+ <h2>Standard Tabs</h2>
15
+ <div class="mod simple tabs tabPosTop">
16
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
17
+ <div class="inner">
18
+ <div class="hd topper">
19
+ <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>
20
+ <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>
21
+ </div>
22
+ <div class="bd">
23
+ <ul>
24
+ <li>Tab 1 Content</li>
25
+ <li>Tab 2 Content</li>
26
+ <li class="current">Tab 3 Content<br /><br /><br /><img style="float:left;" src="../../../../Pictures/5stocker_taxis2.jpg" alt="boo" /></li>
27
+ <li>Tab 4 Content</li>
28
+ <li>Tab 5 Content</li>
29
+ <li>Tab 6 Content</li>
30
+ </ul>
31
+ </div>
32
+ </div>
33
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
34
+ </div>
35
+ <h2>Bottom Tabs</h2>
36
+ <div class="mod simple tabs tabPosBottom">
37
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
38
+ <div class="inner">
39
+ <div class="bd">
40
+ <ul>
41
+ <li>Tab 1 Content</li>
42
+ <li>Tab 2 Content</li>
43
+ <li class="current">Tab 3 Content<br /><br /><br /></li>
44
+ <li>Tab 4 Content</li>
45
+ <li>Tab 5 Content</li>
46
+ <li>Tab 6 Content</li>
47
+ </ul>
48
+ </div>
49
+ <div class="hd topper">
50
+ <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>
51
+ <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>
52
+ </div>
53
+ </div>
54
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
55
+ </div>
56
+ <h2>Left-side tabs</h2>
57
+ <div class="mod simple tabs tabPosLeft">
58
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
59
+ <div class="inner">
60
+ <div class="hd topper">
61
+ <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>
62
+ <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>
63
+ </div>
64
+ <div class="bd">
65
+ <ul>
66
+ <li>Tab 1 Content</li>
67
+ <li>Tab 2 Content</li>
68
+ <li class="current">Tab 3 Content<br /><br /><br /></li>
69
+ <li>Tab 4 Content</li>
70
+ <li>Tab 5 Content</li>
71
+ <li>Tab 6 Content</li>
72
+ </ul>
73
+ </div>
74
+ </div>
75
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
76
+ </div>
77
+
78
+
79
+ <h2>Right-side tabs</h2>
80
+ <div class="mod simple tabs tabPosRight">
81
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
82
+ <div class="inner">
83
+ <div class="hd topper">
84
+ <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>
85
+ <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>
86
+ </div>
87
+ <div class="bd">
88
+ <ul>
89
+ <li>Tab 1 Content</li>
90
+ <li>Tab 2 Content</li>
91
+ <li class="current">
92
+ <h3>Tab 3 Content</h3>
93
+ <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>
94
+ <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
95
+ </li>
96
+ <li>Tab 4 Content</li>
97
+ <li>Tab 5 Content</li>
98
+ <li>Tab 6 Content</li>
99
+ </ul>
100
+ </div>
101
+ </div>
102
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
103
+ </div>
104
+ </body>
105
+ </html>
data/templates/project/demos/plugins/talk/talk_doc.html ADDED
@@ -0,0 +1,158 @@
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>Talk Bubbles</title>
6
+ <link rel="stylesheet" type="text/css" media="all" href="../../core/libraries.css" />
7
+ <link rel="stylesheet" type="text/css" media="all" href="../../core/template/template.css" />
8
+ <link rel="stylesheet" type="text/css" media="all" href="../../core/grid/grids.css" />
9
+ <link rel="stylesheet" type="text/css" media="all" href="../../core/content.css" />
10
+ <link rel="stylesheet" type="text/css" media="all" href="../../core/module/mod.css" />
11
+ <link rel="stylesheet" type="text/css" media="all" href="../../core/module/mod_skins.css" />
12
+ <link rel="stylesheet" type="text/css" media="all" href="talk.css" />
13
+ <link rel="stylesheet" type="text/css" media="all" href="talk_skins.css" />
14
+ <!--<link rel="stylesheet" type="text/css" media="all" href="css/mod_debug.css" /> -->
15
+ </head>
16
+ <body>
17
+ <div class="page">
18
+
19
+ <h1>Talk Bubbles</h1>
20
+ <p>Talk bubbles allow you to have cartoon-like talk bubbles with zero images. For now, they are based on standard module format.</p>
21
+ <div class="line">
22
+ <div class=" unit size1of4">
23
+ <div class="mod bubble bubbleTop yowza">
24
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
25
+ <div class="inner">
26
+ <div class="hd fire">
27
+ <h3>yowza</h3>
28
+ </div>
29
+ <div class="bd">
30
+ <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>
31
+ </div>
32
+ </div>
33
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
34
+ </div>
35
+ </div>
36
+ <div class=" unit size1of4">
37
+ <div class="mod bubble bubbleLeft lol">
38
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
39
+ <div class="inner">
40
+ <div class="hd fire">
41
+ <h3>lol</h3>
42
+ </div>
43
+ <div class="bd">
44
+ <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>
45
+ </div>
46
+ </div>
47
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
48
+ </div>
49
+ </div>
50
+ <div class=" unit size1of4">
51
+ <div class="mod bubble bubbleRight meep">
52
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
53
+ <div class="inner">
54
+ <div class="hd fire">
55
+ <h3>meep</h3>
56
+ </div>
57
+ <div class="bd">
58
+ <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>
59
+ </div>
60
+ </div>
61
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
62
+ </div>
63
+ </div>
64
+ <div class=" unit size1of4 lastUnit">
65
+ <div class="mod bubble bubbleBottom yoyo">
66
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
67
+ <div class="inner">
68
+ <div class="hd fire">
69
+ <h3>Yoyo</h3>
70
+ </div>
71
+ <div class="bd">
72
+ <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>
73
+ </div>
74
+ </div>
75
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ <h2>Extending the talk bubbles</h2>
80
+ <div class="line">
81
+ <div class=" unit size1of4">
82
+ <div class="mod bubble bubbleTop yowza bubbleVerticalExt">
83
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
84
+ <div class="inner">
85
+ <div class="hd fire">
86
+ <h3>yowza + bubbleVerticalExt</h3>
87
+ </div>
88
+ <div class="bd">
89
+ <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>
90
+ </div>
91
+ </div>
92
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
93
+ </div>
94
+ </div>
95
+ <div class=" unit size1of4">
96
+ <div class="mod bubble bubbleLeft lol bubbleHorizontalExt">
97
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
98
+ <div class="inner">
99
+ <div class="hd fire">
100
+ <h3>lol + bubbleHorizontalExt</h3>
101
+ </div>
102
+ <div class="bd">
103
+ <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>
104
+ </div>
105
+ </div>
106
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
107
+ </div>
108
+ </div>
109
+ <div class=" unit size1of4">
110
+ <div class="mod bubble bubbleRight meep bubbleHorizontalExt">
111
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
112
+ <div class="inner">
113
+ <div class="hd fire">
114
+ <h3>meep + bubbleHorizontalExt</h3>
115
+ </div>
116
+ <div class="bd">
117
+ <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>
118
+ </div>
119
+ </div>
120
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
121
+ </div>
122
+ </div>
123
+ <div class=" unit size1of4 lastUnit">
124
+ <div class="mod bubble bubbleBottom yoyo bubbleVerticalExt">
125
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
126
+ <div class="inner">
127
+ <div class="hd fire">
128
+ <h3>Yoyo + bubbleVerticalExt</h3>
129
+ </div>
130
+ <div class="bd">
131
+ <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>
132
+ </div>
133
+ </div>
134
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
135
+ </div>
136
+ </div>
137
+ </div>
138
+ <h2>Suggested use:</h2>
139
+ <div class="line">
140
+ <div class=" unit size1of3">
141
+ <div class="mod bubble bubbleBottom discuss">
142
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
143
+ <div class="inner">
144
+ <div class="bd">
145
+ <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>
146
+ </div>
147
+ </div>
148
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
149
+ </div>
150
+ <div class="media attribution">
151
+ <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>
152
+ <div class="bd"><a href="http://twitter.com/stubbornella">@Stubbornella</a> <span class="detail">14 minutes ago</span></div>
153
+ </div>
154
+ </div>
155
+ </div>
156
+ </div>
157
+ </body>
158
+ </html>