bsherman-compass 0.5.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (155) hide show
  1. data/Manifest +178 -0
  2. data/README.markdown +17 -0
  3. data/Rakefile +98 -0
  4. data/VERSION +1 -0
  5. data/bin/compass +8 -0
  6. data/compass.gemspec +37 -0
  7. data/examples/blueprint_default/index.html +73 -0
  8. data/examples/blueprint_default/parts/elements.html +246 -0
  9. data/examples/blueprint_default/parts/forms.html +100 -0
  10. data/examples/blueprint_default/parts/grid.html +206 -0
  11. data/examples/blueprint_default/parts/test-small.jpg +0 -0
  12. data/examples/blueprint_default/parts/test.jpg +0 -0
  13. data/examples/blueprint_default/parts/valid.png +0 -0
  14. data/examples/blueprint_plugins/index.html +60 -0
  15. data/examples/blueprint_plugins/parts/fancy_type.html +84 -0
  16. data/examples/blueprint_plugins/parts/test-small.jpg +0 -0
  17. data/examples/blueprint_plugins/parts/test.jpg +0 -0
  18. data/examples/blueprint_plugins/parts/valid.png +0 -0
  19. data/examples/blueprint_semantic/index.html +68 -0
  20. data/examples/blueprint_semantic/parts/fancy_type.html +84 -0
  21. data/examples/blueprint_semantic/parts/liquid.html +84 -0
  22. data/examples/blueprint_semantic/parts/test-small.jpg +0 -0
  23. data/examples/blueprint_semantic/parts/test.jpg +0 -0
  24. data/examples/blueprint_semantic/parts/valid.png +0 -0
  25. data/examples/compass/compass.html +19 -0
  26. data/examples/compass/sticky_footer.html.haml +14 -0
  27. data/examples/compass/utilities.html.haml +141 -0
  28. data/examples/yui/divisions.html.haml +179 -0
  29. data/examples/yui/index.html.haml +19 -0
  30. data/examples/yui/sub_divisions.html.haml +169 -0
  31. data/examples/yui/templates.html.haml +54 -0
  32. data/examples/yui/test.jpg +0 -0
  33. data/examples/yui/typography.html.haml +132 -0
  34. data/frameworks/blueprint.rb +2 -0
  35. data/frameworks/blueprint/lib/blueprint/constants.rb +17 -0
  36. data/frameworks/blueprint/lib/blueprint/grid_builder.rb +54 -0
  37. data/frameworks/blueprint/stylesheets/_blueprint.sass +3 -0
  38. data/frameworks/blueprint/stylesheets/blueprint/_ie.sass +49 -0
  39. data/frameworks/blueprint/stylesheets/blueprint/_print.sass +82 -0
  40. data/frameworks/blueprint/stylesheets/blueprint/_screen.sass +15 -0
  41. data/frameworks/blueprint/stylesheets/blueprint/modules/_colors.sass +30 -0
  42. data/frameworks/blueprint/stylesheets/blueprint/modules/_debug.sass +9 -0
  43. data/frameworks/blueprint/stylesheets/blueprint/modules/_fancy_type.sass +81 -0
  44. data/frameworks/blueprint/stylesheets/blueprint/modules/_form.sass +43 -0
  45. data/frameworks/blueprint/stylesheets/blueprint/modules/_grid.sass +141 -0
  46. data/frameworks/blueprint/stylesheets/blueprint/modules/_interaction.sass +58 -0
  47. data/frameworks/blueprint/stylesheets/blueprint/modules/_liquid.sass +137 -0
  48. data/frameworks/blueprint/stylesheets/blueprint/modules/_scaffolding.sass +46 -0
  49. data/frameworks/blueprint/stylesheets/blueprint/modules/_typography.sass +154 -0
  50. data/frameworks/blueprint/stylesheets/blueprint/modules/_utilities.sass +37 -0
  51. data/frameworks/blueprint/templates/project/grid.png +0 -0
  52. data/frameworks/blueprint/templates/project/ie.sass +3 -0
  53. data/frameworks/blueprint/templates/project/manifest.rb +5 -0
  54. data/frameworks/blueprint/templates/project/print.sass +3 -0
  55. data/frameworks/blueprint/templates/project/screen.sass +8 -0
  56. data/frameworks/compass.rb +2 -0
  57. data/frameworks/compass/stylesheets/_compass.sass +1 -0
  58. data/frameworks/compass/stylesheets/compass/_layout.sass +1 -0
  59. data/frameworks/compass/stylesheets/compass/_reset.sass +3 -0
  60. data/frameworks/compass/stylesheets/compass/_utilities.sass +5 -0
  61. data/frameworks/compass/stylesheets/compass/layout/_sticky_footer.sass +17 -0
  62. data/frameworks/compass/stylesheets/compass/utilities/_general.sass +4 -0
  63. data/frameworks/compass/stylesheets/compass/utilities/_links.sass +3 -0
  64. data/frameworks/compass/stylesheets/compass/utilities/_lists.sass +3 -0
  65. data/frameworks/compass/stylesheets/compass/utilities/_print.sass +24 -0
  66. data/frameworks/compass/stylesheets/compass/utilities/_tables.sass +3 -0
  67. data/frameworks/compass/stylesheets/compass/utilities/_text.sass +2 -0
  68. data/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.sass +11 -0
  69. data/frameworks/compass/stylesheets/compass/utilities/general/_inline_block.sass +6 -0
  70. data/frameworks/compass/stylesheets/compass/utilities/general/_reset.sass +56 -0
  71. data/frameworks/compass/stylesheets/compass/utilities/general/_tabs.sass +0 -0
  72. data/frameworks/compass/stylesheets/compass/utilities/general/_tag_cloud.sass +19 -0
  73. data/frameworks/compass/stylesheets/compass/utilities/links/_hover_link.sass +5 -0
  74. data/frameworks/compass/stylesheets/compass/utilities/links/_link_colors.sass +24 -0
  75. data/frameworks/compass/stylesheets/compass/utilities/links/_unstyled_link.sass +5 -0
  76. data/frameworks/compass/stylesheets/compass/utilities/lists/_bullets.sass +21 -0
  77. data/frameworks/compass/stylesheets/compass/utilities/lists/_horizontal_list.sass +20 -0
  78. data/frameworks/compass/stylesheets/compass/utilities/lists/_inline_list.sass +29 -0
  79. data/frameworks/compass/stylesheets/compass/utilities/tables/_alternating_rows_and_columns.sass +20 -0
  80. data/frameworks/compass/stylesheets/compass/utilities/tables/_borders.sass +27 -0
  81. data/frameworks/compass/stylesheets/compass/utilities/tables/_scaffolding.sass +9 -0
  82. data/frameworks/compass/stylesheets/compass/utilities/text/_nowrap.sass +3 -0
  83. data/frameworks/compass/stylesheets/compass/utilities/text/_replacement.sass +10 -0
  84. data/frameworks/compass/templates/project/ie.sass +6 -0
  85. data/frameworks/compass/templates/project/manifest.rb +3 -0
  86. data/frameworks/compass/templates/project/print.sass +6 -0
  87. data/frameworks/compass/templates/project/screen.sass +7 -0
  88. data/frameworks/yui.rb +2 -0
  89. data/frameworks/yui/COPYRIGHT +15 -0
  90. data/frameworks/yui/stylesheets/_yui.sass +7 -0
  91. data/frameworks/yui/stylesheets/yui/modules/_base.sass +60 -0
  92. data/frameworks/yui/stylesheets/yui/modules/_fonts.sass +38 -0
  93. data/frameworks/yui/stylesheets/yui/modules/_grids.sass +341 -0
  94. data/frameworks/yui/templates/project/manifest.rb +1 -0
  95. data/frameworks/yui/templates/project/screen.sass +4 -0
  96. data/lib/compass.rb +39 -0
  97. data/lib/compass/actions.rb +92 -0
  98. data/lib/compass/commands/base.rb +29 -0
  99. data/lib/compass/commands/create_project.rb +41 -0
  100. data/lib/compass/commands/list_frameworks.rb +16 -0
  101. data/lib/compass/commands/print_version.rb +23 -0
  102. data/lib/compass/commands/project_base.rb +82 -0
  103. data/lib/compass/commands/update_project.rb +25 -0
  104. data/lib/compass/commands/watch_project.rb +53 -0
  105. data/lib/compass/commands/write_configuration.rb +37 -0
  106. data/lib/compass/compiler.rb +40 -0
  107. data/lib/compass/configuration.rb +167 -0
  108. data/lib/compass/core_ext.rb +12 -0
  109. data/lib/compass/errors.rb +7 -0
  110. data/lib/compass/exec.rb +184 -0
  111. data/lib/compass/frameworks.rb +29 -0
  112. data/lib/compass/installers.rb +5 -0
  113. data/lib/compass/installers/base.rb +135 -0
  114. data/lib/compass/installers/manifest.rb +57 -0
  115. data/lib/compass/installers/rails.rb +118 -0
  116. data/lib/compass/installers/stand_alone.rb +76 -0
  117. data/lib/compass/logger.rb +34 -0
  118. data/lib/compass/merb.rb +43 -0
  119. data/lib/compass/test_case.rb +37 -0
  120. data/lib/compass/validate.rb +13 -0
  121. data/lib/compass/validate/COPYRIGHT.html +93 -0
  122. data/lib/compass/validate/JIGSAW_COPYRIGHT +64 -0
  123. data/lib/compass/validate/README.html +83 -0
  124. data/lib/compass/validate/XERCES_COPYING.txt +56 -0
  125. data/lib/compass/validate/css-validator-javadoc.jar +0 -0
  126. data/lib/compass/validate/css-validator.jar +0 -0
  127. data/lib/compass/validate/jigsaw.jar +0 -0
  128. data/lib/compass/validate/xerces.jar +0 -0
  129. data/lib/compass/validator.rb +59 -0
  130. data/lib/compass/version.rb +66 -0
  131. data/lib/sass_extensions.rb +13 -0
  132. data/test/command_line_test.rb +147 -0
  133. data/test/compass_test.rb +148 -0
  134. data/test/configuration_test.rb +29 -0
  135. data/test/fixtures/stylesheets/blueprint/css/typography.css +159 -0
  136. data/test/fixtures/stylesheets/blueprint/sass/ie.sass +3 -0
  137. data/test/fixtures/stylesheets/blueprint/sass/print.sass +3 -0
  138. data/test/fixtures/stylesheets/blueprint/sass/screen.sass +17 -0
  139. data/test/fixtures/stylesheets/blueprint/sass/typography.sass +3 -0
  140. data/test/fixtures/stylesheets/compass/css/layout.css +14 -0
  141. data/test/fixtures/stylesheets/compass/css/print.css +19 -0
  142. data/test/fixtures/stylesheets/compass/css/reset.css +66 -0
  143. data/test/fixtures/stylesheets/compass/css/utilities.css +23 -0
  144. data/test/fixtures/stylesheets/compass/sass/layout.sass +3 -0
  145. data/test/fixtures/stylesheets/compass/sass/print.sass +5 -0
  146. data/test/fixtures/stylesheets/compass/sass/reset.sass +1 -0
  147. data/test/fixtures/stylesheets/compass/sass/utilities.sass +5 -0
  148. data/test/fixtures/stylesheets/yui/css/mixins.css +16 -0
  149. data/test/fixtures/stylesheets/yui/sass/base.sass +3 -0
  150. data/test/fixtures/stylesheets/yui/sass/fonts.sass +3 -0
  151. data/test/fixtures/stylesheets/yui/sass/grids.sass +3 -0
  152. data/test/fixtures/stylesheets/yui/sass/mixins.sass +16 -0
  153. data/test/sass_extensions_test.rb +26 -0
  154. data/test/test_helper.rb +47 -0
  155. metadata +295 -0
data/examples/blueprint_semantic/index.html ADDED
@@ -0,0 +1,68 @@
1
+ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2
+ "http://www.w3.org/TR/html4/strict.dtd">
3
+
4
+ <html lang="en">
5
+ <head>
6
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7
+ <title>Blueprint test pages</title>
8
+
9
+ <!-- Framework CSS -->
10
+ <link rel="stylesheet" href="stylesheets/screen.css" type="text/css" media="screen, projection">
11
+ <link rel="stylesheet" href="stylesheets/print.css" type="text/css" media="print">
12
+ <!--[if IE]><link rel="stylesheet" href="stylesheets/ie.css" type="text/css" media="screen, projection"><![endif]-->
13
+ </head>
14
+ <body id="index" class="blueprint">
15
+
16
+ <div class="container">
17
+ <h1>Blueprint Semantic Test Pages</h1>
18
+ <hr>
19
+
20
+ <p>Welcome to the Blueprint Semantic test pages. The HTML files below test the assignment of styles to semantic classes and ids using Sass mixins.</p>
21
+
22
+ <table border="0" cellspacing="0" cellpadding="0">
23
+ <tr>
24
+ <th id="page-header">Test page</th>
25
+ <th id="files-header">Main files tested</th>
26
+ <th id="description-header">Description</th>
27
+ </tr>
28
+ <tr>
29
+ <td><a href="parts/fancy_type.html">Fancy Type</a></td>
30
+ <td>
31
+ <a href="../../frameworks/blueprint/stylesheets/blueprint/modules/_grid.sass">grid.sass</a>,
32
+ <a href="../../frameworks/blueprint/stylesheets/blueprint/modules/_typography.sass">typography.sass</a>,
33
+ <a href="../../frameworks/blueprint/stylesheets/blueprint/modules/_fancy_type.sass">fancy_type.sass</a>
34
+ </td>
35
+ <td>A simple sample page, with common elements and fancy type.</td>
36
+ </tr>
37
+ <tr>
38
+ <td><a href="parts/liquid.html">Liquid Grid</a></td>
39
+ <td>
40
+ <a href="../../frameworks/blueprint/stylesheets/blueprint/modules/_liquid.sass">liquid.sass</a>,
41
+ <a href="../../frameworks/blueprint/stylesheets/blueprint/modules/_typography.sass">typography.sass</a>,
42
+ <a href="../../frameworks/blueprint/stylesheets/blueprint/modules/_fancy_type.sass">fancy_type.sass</a>
43
+ </td>
44
+ <td>Like Fancy Type, but using a liquid percent based grid.</td>
45
+ </tr>
46
+ </table>
47
+
48
+ <p><em><strong>Note about the css files:</strong></em>
49
+ These test files utilize the css files that are generated from
50
+ <a href="http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html">Sass templates</a>.
51
+ In other words, if you change any of the source files,
52
+ you'll have to re-build them with <code>rake examples</code> to see any&nbsp;changes.</p>
53
+
54
+ <div id="info">
55
+ <p>For more information and help, try these resources:</p>
56
+ <ul>
57
+ <li><a href="http://code.google.com/p/blueprintcss">The Blueprint home page.</a></li>
58
+ <li><a href="http://groups.google.com/group/blueprintcss">Our anything-goes mailing list.</a></li>
59
+ <li><a href="http://bjorkoy.com">The blog where news about Blueprint gets posted.</a></li>
60
+ </ul>
61
+ </div>
62
+
63
+ <p><a href="http://validator.w3.org/check?uri=referer">
64
+ <img src="parts/valid.png" alt="Valid HTML 4.01 Strict" height="31" width="88" id="w3c"></a></p>
65
+
66
+ </div>
67
+ </body>
68
+ </html>
data/examples/blueprint_semantic/parts/fancy_type.html ADDED
@@ -0,0 +1,84 @@
1
+ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2
+ "http://www.w3.org/TR/html4/strict.dtd">
3
+
4
+ <html lang="en">
5
+ <head>
6
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7
+ <title>Blueprint Semantic Sample Page</title>
8
+
9
+ <!-- Framework CSS -->
10
+ <link rel="stylesheet" href="../stylesheets/screen.css" type="text/css" media="screen, projection">
11
+ <link rel="stylesheet" href="../stylesheets/print.css" type="text/css" media="print">
12
+ <!--[if IE]><link rel="stylesheet" href="../stylesheets/ie.css" type="text/css" media="screen, projection"><![endif]-->
13
+ </head>
14
+
15
+ <body id="sample" class="blueprint">
16
+
17
+ <div class="container">
18
+ <h1>A simple sample page</h1>
19
+ <hr>
20
+ <h2>This sample page demonstrates a tiny fraction of what you get with Blueprint.</h2>
21
+ <hr>
22
+
23
+ <div id="first-box">
24
+ <h6>Here's a box</h6>
25
+ <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.</p>
26
+ </div>
27
+
28
+ <div id="another-box">
29
+ <h6>And another box</h6>
30
+ <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 laboris nisi ut aliquip.</p>
31
+ </div>
32
+
33
+ <div id="aligned-box">
34
+ <h6>This box is aligned with the sidebar</h6>
35
+ <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.</p>
36
+ </div>
37
+ <hr>
38
+ <hr class="space">
39
+
40
+ <div id="main">
41
+ <p><img src="test.jpg" id="test" alt="test">Lorem ipsum dolor sit amet, <em>consectetuer adipiscing elit</em>. Nunc congue ipsum vestibulum libero. Aenean vitae justo. Nam eget tellus. Etiam convallis, est eu lobortis mattis, lectus tellus tempus felis, a ultricies erat ipsum at metus.</p>
42
+ <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Morbi et risus</a>. Aliquam nisl. Nulla facilisi. Cras accumsan vestibulum ante. Vestibulum sed tortor. Praesent <em class="caps">small caps</em> tempus fringilla elit. Ut elit diam, sagittis in, nonummy in, gravida non, nunc. Ut orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam egestas, orci eu imperdiet malesuada, nisl purus fringilla odio, quis commodo est orci vitae justo. Aliquam placerat odio tincidunt nulla. Cras in libero. Aenean rutrum, magna non tristique posuere, erat odio eleifend nisl, non convallis est tortor blandit ligula. Nulla id augue.</p>
43
+ <p>Nullam mattis, odio ut tempus facilisis, metus nisl facilisis metus, auctor consectetuer felis ligula nec mauris. Vestibulum odio erat, fermentum at, commodo vitae, ultrices et, urna. Mauris vulputate, mi pulvinar sagittis condimentum, sem nulla aliquam velit, sed imperdiet mi purus eu magna. Nulla varius metus ut eros. Aenean aliquet magna eget orci. Class aptent taciti sociosqu ad litora.</p>
44
+ <p>Vivamus euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse vel nibh ut turpis dictum sagittis. Aliquam vel velit a elit auctor sollicitudin. Nam vel dui vel neque lacinia pretium. Quisque nunc erat, venenatis id, volutpat ut, scelerisque sed, diam. Mauris ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec mattis. Morbi dignissim sollicitudin libero. Nulla lorem.</p>
45
+ <blockquote>
46
+ <p>Integer cursus ornare mauris. Praesent nisl arcu, imperdiet eu, ornare id, scelerisque ut, nunc. Praesent sagittis erat sed velit tempus imperdiet. Ut tristique, ante in interdum hendrerit, erat enim faucibus felis, quis rutrum mauris lorem quis sem. Vestibulum ligula nisi, mattis nec, posuere et, blandit eu, ligula. Nam suscipit placerat odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque tortor libero, venenatis vitae, rhoncus eu, placerat ut, mi. Nulla nulla.</p>
47
+ </blockquote>
48
+ <p>Maecenas vel metus quis magna pharetra fermentum. <em>Integer sit amet tortor</em>. Maecenas porttitor, pede sed gravida auctor, nulla augue aliquet elit, at pretium urna orci ut metus. Aliquam in dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, tellus id ornare posuere, quam nunc accumsan turpis, at convallis tellus orci et nisl. Phasellus congue neque a lorem.</p>
49
+
50
+ <hr>
51
+ <div id="nested-1">
52
+ <h6>This is a nested column</h6>
53
+ <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.</p>
54
+ </div>
55
+ <div id="nested-2">
56
+ <h6>This is another nested column</h6>
57
+ <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.</p>
58
+ </div>
59
+
60
+ </div>
61
+ <div id="sidebar">
62
+
63
+ <h3>A <em>Simple</em> Sidebar</h3>
64
+
65
+ <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue.</p>
66
+ <p>Mauris a lectus. Aliquam erat volutpat. Phasellus ultrices mi a sapien. Nunc rutrum egestas lorem. Duis ac sem sagittis elit tincidunt gravida. Mauris a lectus. Aliquam erat volutpat. Phasellus ultrices mi a sapien. Nunc rutrum egestas lorem. Duis ac sem sagittis elit tincidunt gravida.</p>
67
+ <p class="quiet">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue.</p>
68
+
69
+ <h5>Incremental leading</h5>
70
+ <p class="incr">Vestibulum ante ipsum primis in faucibus orci luctus vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. sed aliquet vehicula, lectus tellus.</p>
71
+ <p class="incr">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue.</p>
72
+
73
+ </div>
74
+
75
+ <hr>
76
+ <h2 id="parting-thought">You may pick and choose amongst these and many more features, so be bold.</h2>
77
+ <hr>
78
+
79
+ <p><a href="http://validator.w3.org/check?uri=referer">
80
+ <img src="valid.png" alt="Valid HTML 4.01 Strict" height="31" width="88" id="w3c"></a></p>
81
+ </div>
82
+
83
+ </body>
84
+ </html>
data/examples/blueprint_semantic/parts/liquid.html ADDED
@@ -0,0 +1,84 @@
1
+ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2
+ "http://www.w3.org/TR/html4/strict.dtd">
3
+
4
+ <html lang="en">
5
+ <head>
6
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7
+ <title>Blueprint Liquid Grid Semantic Sample Page</title>
8
+
9
+ <!-- Framework CSS -->
10
+ <link rel="stylesheet" href="../stylesheets/liquid.css" type="text/css" media="screen, projection">
11
+ <link rel="stylesheet" href="../stylesheets/print.css" type="text/css" media="print">
12
+ <!--[if IE]><link rel="stylesheet" href="../stylesheets/ie.css" type="text/css" media="screen, projection"><![endif]-->
13
+ </head>
14
+
15
+ <body id="sample" class="blueprint">
16
+
17
+ <div class="container">
18
+ <h1>A simple sample page</h1>
19
+ <hr>
20
+ <h2>This sample page demonstrates a tiny fraction of what you get with Blueprint.</h2>
21
+ <hr>
22
+
23
+ <div id="first-box">
24
+ <h6>Here's a box</h6>
25
+ <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.</p>
26
+ </div>
27
+
28
+ <div id="another-box">
29
+ <h6>And another box</h6>
30
+ <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 laboris nisi ut aliquip.</p>
31
+ </div>
32
+
33
+ <div id="aligned-box">
34
+ <h6>This box is aligned with the sidebar</h6>
35
+ <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.</p>
36
+ </div>
37
+ <hr>
38
+ <hr class="space">
39
+
40
+ <div id="main">
41
+ <p><img src="test.jpg" id="test" alt="test">Lorem ipsum dolor sit amet, <em>consectetuer adipiscing elit</em>. Nunc congue ipsum vestibulum libero. Aenean vitae justo. Nam eget tellus. Etiam convallis, est eu lobortis mattis, lectus tellus tempus felis, a ultricies erat ipsum at metus.</p>
42
+ <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Morbi et risus</a>. Aliquam nisl. Nulla facilisi. Cras accumsan vestibulum ante. Vestibulum sed tortor. Praesent <em class="caps">small caps</em> tempus fringilla elit. Ut elit diam, sagittis in, nonummy in, gravida non, nunc. Ut orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam egestas, orci eu imperdiet malesuada, nisl purus fringilla odio, quis commodo est orci vitae justo. Aliquam placerat odio tincidunt nulla. Cras in libero. Aenean rutrum, magna non tristique posuere, erat odio eleifend nisl, non convallis est tortor blandit ligula. Nulla id augue.</p>
43
+ <p>Nullam mattis, odio ut tempus facilisis, metus nisl facilisis metus, auctor consectetuer felis ligula nec mauris. Vestibulum odio erat, fermentum at, commodo vitae, ultrices et, urna. Mauris vulputate, mi pulvinar sagittis condimentum, sem nulla aliquam velit, sed imperdiet mi purus eu magna. Nulla varius metus ut eros. Aenean aliquet magna eget orci. Class aptent taciti sociosqu ad litora.</p>
44
+ <p>Vivamus euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse vel nibh ut turpis dictum sagittis. Aliquam vel velit a elit auctor sollicitudin. Nam vel dui vel neque lacinia pretium. Quisque nunc erat, venenatis id, volutpat ut, scelerisque sed, diam. Mauris ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec mattis. Morbi dignissim sollicitudin libero. Nulla lorem.</p>
45
+ <blockquote>
46
+ <p>Integer cursus ornare mauris. Praesent nisl arcu, imperdiet eu, ornare id, scelerisque ut, nunc. Praesent sagittis erat sed velit tempus imperdiet. Ut tristique, ante in interdum hendrerit, erat enim faucibus felis, quis rutrum mauris lorem quis sem. Vestibulum ligula nisi, mattis nec, posuere et, blandit eu, ligula. Nam suscipit placerat odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque tortor libero, venenatis vitae, rhoncus eu, placerat ut, mi. Nulla nulla.</p>
47
+ </blockquote>
48
+ <p>Maecenas vel metus quis magna pharetra fermentum. <em>Integer sit amet tortor</em>. Maecenas porttitor, pede sed gravida auctor, nulla augue aliquet elit, at pretium urna orci ut metus. Aliquam in dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, tellus id ornare posuere, quam nunc accumsan turpis, at convallis tellus orci et nisl. Phasellus congue neque a lorem.</p>
49
+
50
+ <hr>
51
+ <div id="nested-1">
52
+ <h6>This is a nested column</h6>
53
+ <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.</p>
54
+ </div>
55
+ <div id="nested-2">
56
+ <h6>This is another nested column</h6>
57
+ <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.</p>
58
+ </div>
59
+
60
+ </div>
61
+ <div id="sidebar">
62
+
63
+ <h3>A <em>Simple</em> Sidebar</h3>
64
+
65
+ <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue.</p>
66
+ <p>Mauris a lectus. Aliquam erat volutpat. Phasellus ultrices mi a sapien. Nunc rutrum egestas lorem. Duis ac sem sagittis elit tincidunt gravida. Mauris a lectus. Aliquam erat volutpat. Phasellus ultrices mi a sapien. Nunc rutrum egestas lorem. Duis ac sem sagittis elit tincidunt gravida.</p>
67
+ <p class="quiet">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue.</p>
68
+
69
+ <h5>Incremental leading</h5>
70
+ <p class="incr">Vestibulum ante ipsum primis in faucibus orci luctus vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. sed aliquet vehicula, lectus tellus.</p>
71
+ <p class="incr">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue.</p>
72
+
73
+ </div>
74
+
75
+ <hr>
76
+ <h2 id="parting-thought">You may pick and choose amongst these and many more features, so be bold.</h2>
77
+ <hr>
78
+
79
+ <p><a href="http://validator.w3.org/check?uri=referer">
80
+ <img src="valid.png" alt="Valid HTML 4.01 Strict" height="31" width="88" id="w3c"></a></p>
81
+ </div>
82
+
83
+ </body>
84
+ </html>
data/examples/compass/compass.html ADDED
@@ -0,0 +1,19 @@
1
+ <html>
2
+ <head>
3
+ <title>Compass Example</title>
4
+ <link rel="stylesheet" href="stylesheets/compass.css" type="text/css" media="screen, projection">
5
+ </head>
6
+ <body>
7
+ <div class="compass">
8
+ <div class="n"><p>North</p></div>
9
+ <div class="n e"><p>North<br/>East</p></div>
10
+ <div class="e"><p>East</p></div>
11
+ <div class="s e"><p>South<br/>East</p></div>
12
+ <div class="s"><p>South</p></div>
13
+ <div class="s w"><p>South<br/>West</p></div>
14
+ <div class="w"><p>West</p></div>
15
+ <div class="n w"><p>North<br/>West</p></div>
16
+ </div>
17
+ </body>
18
+ </html>
19
+
data/examples/compass/sticky_footer.html.haml ADDED
@@ -0,0 +1,14 @@
1
+ !!! Transitional
2
+ %html{:xmlns => "http://www.w3.org/1999/xhtml", "xml:lang" => "en", :lang => "en"}
3
+ %head
4
+ %meta{'http-equiv' => "content-type", :content => "text/html;charset=UTF-8"}
5
+ %title Compass Sticky Footer Example
6
+ %link{:rel=>"stylesheet", :href=>"stylesheets/sticky_footer.css", :type=>"text/css", :media=>"screen, projection"}
7
+ %body
8
+ #layout
9
+ #header
10
+ %h1 Sticky Footer Example
11
+ This is the main content area.
12
+ #layout_footer
13
+ #footer
14
+ This is the footer area.
data/examples/compass/utilities.html.haml ADDED
@@ -0,0 +1,141 @@
1
+ !!! Transitional
2
+ %html{:xmlns => "http://www.w3.org/1999/xhtml", "xml:lang" => "en", :lang => "en"}
3
+ %head
4
+ %meta{'http-equiv' => "content-type", :content => "text/html;charset=UTF-8"}
5
+ %title Compass Utilities Example
6
+ %link{:rel=>"stylesheet", :href=>"stylesheets/utilities.css", :type=>"text/css", :media=>"screen, projection"}
7
+ %body
8
+ #utilities
9
+ %h1 Compass Utilities Demo
10
+ #links
11
+ .example
12
+ %h2 Link Styling
13
+ %ul
14
+ %li.normal
15
+ %a{:href => "#normal-link"} This is a link, nothing special about it.
16
+ %li.hover
17
+ %a{:href => '#hover-link'}
18
+ This is underlined when hovered because it is using the
19
+ %code.mixin +hover-link
20
+ mixin.
21
+ %li.colored
22
+ %a{:href => '#colored-link'}
23
+ This should have different colors
24
+ because it is using the
25
+ %code.mixin +link-colors
26
+ mixin.
27
+ %li.unstyled
28
+ This is some text
29
+ %a{:href => '#unstyled-link'} with a link in it.
30
+ But you shouldn't see it
31
+ because it is using the
32
+ %code.mixin +unstyled-link
33
+ mixin.
34
+ #tag-cloud
35
+ .example
36
+ %h2 Tag Cloud
37
+ %p
38
+ This tag cloud is actually an ordered list so that the markup semantics are correct.
39
+ It demonstrates the following mixins:
40
+ %ul
41
+ %li
42
+ %code.mixin +inline-list
43
+ %li
44
+ %code.mixin +tag-cloud(1em)
45
+ %li
46
+ %code.mixin +no-bullets
47
+ %ol
48
+ %li.xxs lorem
49
+ %li.xs ipsum
50
+ %li.s dolor
51
+ %li sit
52
+ %li.l amet
53
+ %li.xl consectetur
54
+ %li.xxl adipisicing
55
+ %li.xs elit
56
+ %li.s sed
57
+ %li.l eiusmod
58
+ %li.xxl tempor
59
+ %li.xxs incididunt
60
+ %li labore
61
+ %li.xs dolore
62
+ %li magna
63
+ %li.xl aliqua
64
+ #lists
65
+ .example
66
+ %h2 Lists
67
+ .p
68
+ This text contains
69
+ %ul.inline
70
+ %li a
71
+ %li list
72
+ %li that
73
+ %li is
74
+ %li completely
75
+ %li inline
76
+ so be semantic!
77
+ My favorite colors are:
78
+ %ul.comma-delimited
79
+ %li red
80
+ %li yellow
81
+ %li blue
82
+ %ol.pretty
83
+ %li
84
+ This uses the
85
+ %code.mixin +pretty-bullets
86
+ mixin.
87
+ %li Do you like them?
88
+ %li If you don't...
89
+ %li Make them yourself!
90
+ #tables
91
+ .example
92
+ %h2 Tables
93
+ %p
94
+ This table is styled using
95
+ %code.mixin +alternating-rows-and-columns(#F9E5A7,#CEFBB3,#222)
96
+ The first colors are the even/odd colors respectively
97
+ and the last argument is a shade that is subtracted from those
98
+ colors for the even columns.
99
+ %p
100
+ The borders are created using
101
+ %code.mixin +outer-table-borders(2px, #151A99)
102
+ and
103
+ %code.mixin +inner-table-borders(1px, #151A99)
104
+ %table.alternating{:cellspacing => 0, :cellpadding => 0, :border => 0}
105
+ %thead
106
+ %tr
107
+ %th &nbsp;
108
+ %th.even Header #1
109
+ %th.odd Header #2
110
+ %th.even Header #3
111
+ %tr.odd
112
+ %th Row #1
113
+ %td.numeric.even 1.1
114
+ %td.numeric.odd 1.2
115
+ %td.numeric.even 1.3
116
+ %tr.even
117
+ %th Row #2
118
+ %td.numeric.even 2.1
119
+ %td.numeric.odd 2.2
120
+ %td.numeric.even 2.3
121
+ %tr.odd
122
+ %th Row #3
123
+ %td.numeric.even 3.1
124
+ %td.numeric.odd 3.2
125
+ %td.numeric.even 3.3
126
+ %tr.even
127
+ %th Row #4
128
+ %td.numeric.even 4.1
129
+ %td.numeric.odd 4.2
130
+ %td.numeric.even 4.3
131
+ %tr.odd.last
132
+ %th Row #5
133
+ %td.numeric.even 5.1
134
+ %td.numeric.odd 5.2
135
+ %td.numeric.even 5.3
136
+ %tfoot
137
+ %tr
138
+ %th Totals
139
+ %td.numeric.even 15.5
140
+ %td.numeric.odd 16.0
141
+ %td.numeric.even 17.5
data/examples/yui/divisions.html.haml ADDED
@@ -0,0 +1,179 @@
1
+ !!! Transitional
2
+ %html{:xmlns => "http://www.w3.org/1999/xhtml", "xml:lang" => "en", :lang => "en"}
3
+ %head
4
+ %title Yahoo Grid Divisions Example
5
+ %link{:rel=>"stylesheet", :href=>"stylesheets/screen.css", :type=>"text/css", :media=>"screen, projection"}
6
+ :javascript
7
+ function changeTemplate() {
8
+ var templateClass = document.getElementById("current-template").value;
9
+ document.getElementById("doc4").className = templateClass;
10
+ }
11
+ %style{:type => "text/css"}
12
+ :sass
13
+ .yui-b
14
+ border: 1px dotted #ccc
15
+ %body
16
+ #doc4.yui-t2
17
+ #hd
18
+ %h1 Yahoo Grid Divisions Example
19
+ #bd
20
+ .yui-b
21
+ %h3 YUI Examples
22
+ %ul
23
+ %li
24
+ %a{:href=>"templates.html"} Template Presets
25
+ %li
26
+ %a{:href=>"typography.html"} Typography
27
+ %li
28
+ %a{:href=>"divisions.html"} Grid Divisions
29
+ %label{:for => "current-template"} Select Template Preset
30
+ %select{:id=>"current-template", :onchange => "changeTemplate()"}
31
+ %option{:value => "yui-t1"}= ".yui-t1"
32
+ %option{:value => "yui-t2", :selected => "selected"}= ".yui-t2"
33
+ %option{:value => "yui-t3"}= ".yui-t3"
34
+ %option{:value => "yui-t4"}= ".yui-t4"
35
+ %option{:value => "yui-t5"}= ".yui-t5"
36
+ %option{:value => "yui-t6"}= ".yui-t6"
37
+
38
+ #yui-main
39
+ .yui-b
40
+ %h2 50/50 Division
41
+ %hr
42
+ .yui-g
43
+ .yui-u.first
44
+ %h3 Left Side
45
+ %p
46
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
47
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
48
+ exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
49
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
50
+ nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
51
+ officia deserunt mollit anim id est laborum.
52
+ .yui-u
53
+ %h3 Right Side
54
+ %p
55
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
56
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
57
+ exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
58
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
59
+ nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
60
+ officia deserunt mollit anim id est laborum.
61
+ %h2 33/33/33 Division
62
+ %hr
63
+ .yui-gb
64
+ .yui-u.first
65
+ %h3 Left Side
66
+ %p
67
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
68
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
69
+ exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
70
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
71
+ nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
72
+ officia deserunt mollit anim id est laborum.
73
+ .yui-u
74
+ %h3 Middle
75
+ %p
76
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
77
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
78
+ exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
79
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
80
+ nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
81
+ officia deserunt mollit anim id est laborum.
82
+
83
+ .yui-u
84
+ %h3 Right Side
85
+ %p
86
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
87
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
88
+ exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
89
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
90
+ nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
91
+ officia deserunt mollit anim id est laborum.
92
+ %h2 67/33 Division
93
+ %hr
94
+ .yui-gc
95
+ .yui-u.first
96
+ %h3 Left Side
97
+ %p
98
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
99
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
100
+ exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
101
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
102
+ nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
103
+ officia deserunt mollit anim id est laborum.
104
+ .yui-u
105
+ %h3 Right Side
106
+ %p
107
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
108
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
109
+ exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
110
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
111
+ nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
112
+ officia deserunt mollit anim id est laborum.
113
+ %h2 33/67 Division
114
+ %hr
115
+ .yui-gd
116
+ .yui-u.first
117
+ %h3 Left Side
118
+ %p
119
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
120
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
121
+ exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
122
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
123
+ nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
124
+ officia deserunt mollit anim id est laborum.
125
+ .yui-u
126
+ %h3 Right Side
127
+ %p
128
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
129
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
130
+ exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
131
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
132
+ nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
133
+ officia deserunt mollit anim id est laborum.
134
+ %h2 75/25 Division
135
+ %hr
136
+ .yui-ge
137
+ .yui-u.first
138
+ %h3 Left Side
139
+ %p
140
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
141
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
142
+ exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
143
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
144
+ nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
145
+ officia deserunt mollit anim id est laborum.
146
+ .yui-u
147
+ %h3 Right Side
148
+ %p
149
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
150
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
151
+ exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
152
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
153
+ nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
154
+ officia deserunt mollit anim id est laborum.
155
+ %h2 25/75 Division
156
+ %hr
157
+ .yui-gf
158
+ .yui-u.first
159
+ %h3 Left Side
160
+ %p
161
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
162
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
163
+ exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
164
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
165
+ nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
166
+ officia deserunt mollit anim id est laborum.
167
+ .yui-u
168
+ %h3 Right Side
169
+ %p
170
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
171
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
172
+ exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
173
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
174
+ nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
175
+ officia deserunt mollit anim id est laborum.
176
+
177
+ #ft
178
+ Copyright &copy; 2008. All Rights Reserved.
179
+