merbjedi-compass 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/Manifest +178 -0
- data/README.markdown +17 -0
- data/Rakefile +125 -0
- data/VERSION +1 -0
- data/bin/compass +8 -0
- data/compass.gemspec +37 -0
- data/examples/blueprint_default/index.html +73 -0
- data/examples/blueprint_default/parts/elements.html +246 -0
- data/examples/blueprint_default/parts/forms.html +100 -0
- data/examples/blueprint_default/parts/grid.html +206 -0
- data/examples/blueprint_default/parts/test-small.jpg +0 -0
- data/examples/blueprint_default/parts/test.jpg +0 -0
- data/examples/blueprint_default/parts/valid.png +0 -0
- data/examples/blueprint_default/stylesheets/ie.sass +3 -0
- data/examples/blueprint_default/stylesheets/images/grid.png +0 -0
- data/examples/blueprint_default/stylesheets/print.sass +3 -0
- data/examples/blueprint_default/stylesheets/screen.sass +8 -0
- data/examples/blueprint_plugins/index.html +60 -0
- data/examples/blueprint_plugins/parts/fancy_type.html +84 -0
- data/examples/blueprint_plugins/parts/test-small.jpg +0 -0
- data/examples/blueprint_plugins/parts/test.jpg +0 -0
- data/examples/blueprint_plugins/parts/valid.png +0 -0
- data/examples/blueprint_plugins/stylesheets/ie.sass +3 -0
- data/examples/blueprint_plugins/stylesheets/images/grid.png +0 -0
- data/examples/blueprint_plugins/stylesheets/print.sass +3 -0
- data/examples/blueprint_plugins/stylesheets/screen.sass +11 -0
- data/examples/blueprint_scoped/stylesheets/ie.sass +3 -0
- data/examples/blueprint_scoped/stylesheets/print.sass +3 -0
- data/examples/blueprint_scoped/stylesheets/screen.sass +4 -0
- data/examples/blueprint_scoped_form/stylesheets/ie.sass +3 -0
- data/examples/blueprint_scoped_form/stylesheets/print.sass +3 -0
- data/examples/blueprint_scoped_form/stylesheets/screen.sass +10 -0
- data/examples/blueprint_semantic/index.html +68 -0
- data/examples/blueprint_semantic/parts/fancy_type.html +84 -0
- data/examples/blueprint_semantic/parts/liquid.html +84 -0
- data/examples/blueprint_semantic/parts/test-small.jpg +0 -0
- data/examples/blueprint_semantic/parts/test.jpg +0 -0
- data/examples/blueprint_semantic/parts/valid.png +0 -0
- data/examples/blueprint_semantic/stylesheets/ie.sass +3 -0
- data/examples/blueprint_semantic/stylesheets/images/grid.png +0 -0
- data/examples/blueprint_semantic/stylesheets/liquid.sass +70 -0
- data/examples/blueprint_semantic/stylesheets/print.sass +3 -0
- data/examples/blueprint_semantic/stylesheets/screen.sass +69 -0
- data/examples/compass/compass.html +19 -0
- data/examples/compass/sticky_footer.html.haml +14 -0
- data/examples/compass/stylesheets/compass.sass +47 -0
- data/examples/compass/stylesheets/images/blue_arrow.gif +0 -0
- data/examples/compass/stylesheets/sticky_footer.sass +11 -0
- data/examples/compass/stylesheets/utilities.sass +69 -0
- data/examples/compass/utilities.html.haml +141 -0
- data/examples/yui/divisions.html.haml +179 -0
- data/examples/yui/index.html.haml +19 -0
- data/examples/yui/stylesheets/screen.sass +13 -0
- data/examples/yui/sub_divisions.html.haml +169 -0
- data/examples/yui/templates.html.haml +54 -0
- data/examples/yui/test.jpg +0 -0
- data/examples/yui/typography.html.haml +132 -0
- data/frameworks/blueprint.rb +2 -0
- data/frameworks/blueprint/lib/blueprint/constants.rb +17 -0
- data/frameworks/blueprint/lib/blueprint/grid_builder.rb +54 -0
- data/frameworks/blueprint/stylesheets/_blueprint.sass +3 -0
- data/frameworks/blueprint/stylesheets/blueprint/_ie.sass +49 -0
- data/frameworks/blueprint/stylesheets/blueprint/_print.sass +82 -0
- data/frameworks/blueprint/stylesheets/blueprint/_screen.sass +15 -0
- data/frameworks/blueprint/stylesheets/blueprint/modules/_colors.sass +30 -0
- data/frameworks/blueprint/stylesheets/blueprint/modules/_debug.sass +9 -0
- data/frameworks/blueprint/stylesheets/blueprint/modules/_fancy_type.sass +81 -0
- data/frameworks/blueprint/stylesheets/blueprint/modules/_form.sass +43 -0
- data/frameworks/blueprint/stylesheets/blueprint/modules/_grid.sass +141 -0
- data/frameworks/blueprint/stylesheets/blueprint/modules/_interaction.sass +58 -0
- data/frameworks/blueprint/stylesheets/blueprint/modules/_liquid.sass +137 -0
- data/frameworks/blueprint/stylesheets/blueprint/modules/_scaffolding.sass +46 -0
- data/frameworks/blueprint/stylesheets/blueprint/modules/_typography.sass +154 -0
- data/frameworks/blueprint/stylesheets/blueprint/modules/_utilities.sass +37 -0
- data/frameworks/blueprint/templates/project/grid.png +0 -0
- data/frameworks/blueprint/templates/project/ie.sass +3 -0
- data/frameworks/blueprint/templates/project/manifest.rb +5 -0
- data/frameworks/blueprint/templates/project/print.sass +3 -0
- data/frameworks/blueprint/templates/project/screen.sass +8 -0
- data/frameworks/compass.rb +2 -0
- data/frameworks/compass/stylesheets/_compass.sass +1 -0
- data/frameworks/compass/stylesheets/compass/_layout.sass +1 -0
- data/frameworks/compass/stylesheets/compass/_reset.sass +3 -0
- data/frameworks/compass/stylesheets/compass/_utilities.sass +5 -0
- data/frameworks/compass/stylesheets/compass/layout/_sticky_footer.sass +17 -0
- data/frameworks/compass/stylesheets/compass/utilities/_general.sass +4 -0
- data/frameworks/compass/stylesheets/compass/utilities/_links.sass +3 -0
- data/frameworks/compass/stylesheets/compass/utilities/_lists.sass +3 -0
- data/frameworks/compass/stylesheets/compass/utilities/_print.sass +24 -0
- data/frameworks/compass/stylesheets/compass/utilities/_tables.sass +3 -0
- data/frameworks/compass/stylesheets/compass/utilities/_text.sass +2 -0
- data/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.sass +11 -0
- data/frameworks/compass/stylesheets/compass/utilities/general/_inline_block.sass +6 -0
- data/frameworks/compass/stylesheets/compass/utilities/general/_reset.sass +56 -0
- data/frameworks/compass/stylesheets/compass/utilities/general/_tabs.sass +0 -0
- data/frameworks/compass/stylesheets/compass/utilities/general/_tag_cloud.sass +19 -0
- data/frameworks/compass/stylesheets/compass/utilities/links/_hover_link.sass +5 -0
- data/frameworks/compass/stylesheets/compass/utilities/links/_link_colors.sass +24 -0
- data/frameworks/compass/stylesheets/compass/utilities/links/_unstyled_link.sass +5 -0
- data/frameworks/compass/stylesheets/compass/utilities/lists/_bullets.sass +21 -0
- data/frameworks/compass/stylesheets/compass/utilities/lists/_horizontal_list.sass +20 -0
- data/frameworks/compass/stylesheets/compass/utilities/lists/_inline_list.sass +29 -0
- data/frameworks/compass/stylesheets/compass/utilities/tables/_alternating_rows_and_columns.sass +20 -0
- data/frameworks/compass/stylesheets/compass/utilities/tables/_borders.sass +27 -0
- data/frameworks/compass/stylesheets/compass/utilities/tables/_scaffolding.sass +9 -0
- data/frameworks/compass/stylesheets/compass/utilities/text/_nowrap.sass +3 -0
- data/frameworks/compass/stylesheets/compass/utilities/text/_replacement.sass +10 -0
- data/frameworks/compass/templates/project/ie.sass +6 -0
- data/frameworks/compass/templates/project/manifest.rb +3 -0
- data/frameworks/compass/templates/project/print.sass +6 -0
- data/frameworks/compass/templates/project/screen.sass +7 -0
- data/frameworks/yui.rb +2 -0
- data/frameworks/yui/COPYRIGHT +15 -0
- data/frameworks/yui/stylesheets/_yui.sass +7 -0
- data/frameworks/yui/stylesheets/yui/modules/_base.sass +60 -0
- data/frameworks/yui/stylesheets/yui/modules/_fonts.sass +38 -0
- data/frameworks/yui/stylesheets/yui/modules/_grids.sass +341 -0
- data/frameworks/yui/templates/project/manifest.rb +1 -0
- data/frameworks/yui/templates/project/screen.sass +4 -0
- data/lib/compass.rb +39 -0
- data/lib/compass/actions.rb +92 -0
- data/lib/compass/commands/base.rb +29 -0
- data/lib/compass/commands/create_project.rb +41 -0
- data/lib/compass/commands/list_frameworks.rb +16 -0
- data/lib/compass/commands/print_version.rb +23 -0
- data/lib/compass/commands/project_base.rb +82 -0
- data/lib/compass/commands/update_project.rb +25 -0
- data/lib/compass/commands/watch_project.rb +53 -0
- data/lib/compass/commands/write_configuration.rb +37 -0
- data/lib/compass/compiler.rb +40 -0
- data/lib/compass/configuration.rb +167 -0
- data/lib/compass/core_ext.rb +12 -0
- data/lib/compass/errors.rb +7 -0
- data/lib/compass/exec.rb +184 -0
- data/lib/compass/frameworks.rb +29 -0
- data/lib/compass/installers.rb +5 -0
- data/lib/compass/installers/base.rb +135 -0
- data/lib/compass/installers/manifest.rb +57 -0
- data/lib/compass/installers/rails.rb +118 -0
- data/lib/compass/installers/stand_alone.rb +76 -0
- data/lib/compass/logger.rb +34 -0
- data/lib/compass/merb.rb +45 -0
- data/lib/compass/test_case.rb +37 -0
- data/lib/compass/validate.rb +13 -0
- data/lib/compass/validate/COPYRIGHT.html +93 -0
- data/lib/compass/validate/JIGSAW_COPYRIGHT +64 -0
- data/lib/compass/validate/README.html +83 -0
- data/lib/compass/validate/XERCES_COPYING.txt +56 -0
- data/lib/compass/validate/css-validator-javadoc.jar +0 -0
- data/lib/compass/validate/css-validator.jar +0 -0
- data/lib/compass/validate/jigsaw.jar +0 -0
- data/lib/compass/validate/xerces.jar +0 -0
- data/lib/compass/validator.rb +59 -0
- data/lib/compass/version.rb +66 -0
- data/lib/sass_extensions.rb +13 -0
- data/test/command_line_test.rb +147 -0
- data/test/compass_test.rb +148 -0
- data/test/configuration_test.rb +29 -0
- data/test/fixtures/stylesheets/blueprint/css/typography.css +159 -0
- data/test/fixtures/stylesheets/blueprint/sass/ie.sass +3 -0
- data/test/fixtures/stylesheets/blueprint/sass/print.sass +3 -0
- data/test/fixtures/stylesheets/blueprint/sass/screen.sass +17 -0
- data/test/fixtures/stylesheets/blueprint/sass/typography.sass +3 -0
- data/test/fixtures/stylesheets/compass/css/layout.css +14 -0
- data/test/fixtures/stylesheets/compass/css/print.css +19 -0
- data/test/fixtures/stylesheets/compass/css/reset.css +66 -0
- data/test/fixtures/stylesheets/compass/css/utilities.css +23 -0
- data/test/fixtures/stylesheets/compass/sass/layout.sass +3 -0
- data/test/fixtures/stylesheets/compass/sass/print.sass +5 -0
- data/test/fixtures/stylesheets/compass/sass/reset.sass +1 -0
- data/test/fixtures/stylesheets/compass/sass/utilities.sass +5 -0
- data/test/fixtures/stylesheets/yui/css/mixins.css +16 -0
- data/test/fixtures/stylesheets/yui/sass/base.sass +3 -0
- data/test/fixtures/stylesheets/yui/sass/fonts.sass +3 -0
- data/test/fixtures/stylesheets/yui/sass/grids.sass +3 -0
- data/test/fixtures/stylesheets/yui/sass/mixins.sass +16 -0
- data/test/sass_extensions_test.rb +26 -0
- data/test/test_helper.rb +47 -0
- metadata +295 -0
|
@@ -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
|
+
|
|
@@ -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.
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
=compass(!s)
|
|
2
|
+
:position relative
|
|
3
|
+
:width= 4 * !s
|
|
4
|
+
:height= 4 * !s
|
|
5
|
+
:font-size 24px
|
|
6
|
+
:font-family "Academy Engraved LET", "Papyrus"
|
|
7
|
+
.n, .s, .e, .w
|
|
8
|
+
:position absolute
|
|
9
|
+
:width= !s
|
|
10
|
+
:height= !s
|
|
11
|
+
:text-align center
|
|
12
|
+
:vertical-align middle
|
|
13
|
+
.w
|
|
14
|
+
:left 0px
|
|
15
|
+
.n.w, .s.w
|
|
16
|
+
:left= 0.5 * !s
|
|
17
|
+
.n, .s
|
|
18
|
+
:left= 1.5 * !s
|
|
19
|
+
.n.e, .s.e
|
|
20
|
+
:left= 2.5 * !s
|
|
21
|
+
.e
|
|
22
|
+
:left= 3 * !s
|
|
23
|
+
.n
|
|
24
|
+
:top 0px
|
|
25
|
+
.n.w, .n.e
|
|
26
|
+
:top= 0.5 * !s
|
|
27
|
+
.w, .e
|
|
28
|
+
:top= 1.5 * !s
|
|
29
|
+
.s.w, .s.e
|
|
30
|
+
:top= 2.5 * !s
|
|
31
|
+
.s
|
|
32
|
+
:top= 3 * !s
|
|
33
|
+
|
|
34
|
+
.compass
|
|
35
|
+
:margin 1em auto
|
|
36
|
+
+compass(4em)
|
|
37
|
+
.n, .s, .e, .w
|
|
38
|
+
p
|
|
39
|
+
:margin
|
|
40
|
+
:top 1.5em
|
|
41
|
+
:bottom 1.5em
|
|
42
|
+
.n.w, .s.w, .n.e, .s.e
|
|
43
|
+
p
|
|
44
|
+
:margin
|
|
45
|
+
:top 1em
|
|
46
|
+
:bottom 1em
|
|
47
|
+
|
|
Binary file
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
@import compass/reset.sass
|
|
2
|
+
@import compass/utilities.sass
|
|
3
|
+
@import yui/modules/base.sass
|
|
4
|
+
@import blueprint/modules/grid.sass
|
|
5
|
+
@import blueprint/modules/scaffolding.sass
|
|
6
|
+
|
|
7
|
+
html
|
|
8
|
+
+yui-base
|
|
9
|
+
|
|
10
|
+
h2
|
|
11
|
+
:margin-top 0
|
|
12
|
+
:border-bottom 2px solid #777
|
|
13
|
+
|
|
14
|
+
#utilities
|
|
15
|
+
+container
|
|
16
|
+
|
|
17
|
+
.example
|
|
18
|
+
:border 2px solid #ccc
|
|
19
|
+
:padding 4px
|
|
20
|
+
|
|
21
|
+
#links
|
|
22
|
+
+column(8)
|
|
23
|
+
|
|
24
|
+
.hover a
|
|
25
|
+
+hover-link
|
|
26
|
+
.colored a
|
|
27
|
+
+link-colors(#C00, #C0C, #700, #707, #777)
|
|
28
|
+
.unstyled
|
|
29
|
+
:color #333
|
|
30
|
+
a
|
|
31
|
+
+unstyled-link
|
|
32
|
+
.mixin
|
|
33
|
+
:font-family monospace
|
|
34
|
+
:border
|
|
35
|
+
:width 1px
|
|
36
|
+
:style solid
|
|
37
|
+
:border-color #ccc
|
|
38
|
+
:border-color -moz-use-text-color
|
|
39
|
+
:padding 2px
|
|
40
|
+
:line-height 22px
|
|
41
|
+
:white-space nowrap
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
#tag-cloud
|
|
45
|
+
+column(8)
|
|
46
|
+
ol
|
|
47
|
+
:margin 0
|
|
48
|
+
+inline-list
|
|
49
|
+
+tag-cloud(1em)
|
|
50
|
+
li
|
|
51
|
+
+no-bullets
|
|
52
|
+
|
|
53
|
+
#lists
|
|
54
|
+
+column(8, true)
|
|
55
|
+
ul.inline
|
|
56
|
+
+inline-list
|
|
57
|
+
ul.comma-delimited
|
|
58
|
+
+comma-delimited-list
|
|
59
|
+
ol.pretty
|
|
60
|
+
+pretty-bullets("images/blue_arrow.gif", 5px, 7px, 24px)
|
|
61
|
+
|
|
62
|
+
#tables
|
|
63
|
+
+column(16)
|
|
64
|
+
table.alternating
|
|
65
|
+
:width 100%
|
|
66
|
+
+alternating-rows-and-columns(#F9E5A7,#CEFBB3,#222)
|
|
67
|
+
+table-scaffolding
|
|
68
|
+
+outer-table-borders(2px, #151A99)
|
|
69
|
+
+inner-table-borders(1px, #151A99)
|
|
@@ -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
|
|
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
|
|
@@ -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 © 2008. All Rights Reserved.
|
|
179
|
+
|