diff --git a/frameworks/yui/stylesheets/yui/_screen.sass b/frameworks/yui/stylesheets/yui/_screen.sass index 680fa8f3..2b78b098 100644 --- a/frameworks/yui/stylesheets/yui/_screen.sass +++ b/frameworks/yui/stylesheets/yui/_screen.sass @@ -1,5 +1,7 @@ @import modules/base.sass @import modules/fonts.sass +@import modules/grids.sass =yui +yui-base - +yui-base-fonts \ No newline at end of file + +yui-base-fonts + +yui-grids \ No newline at end of file diff --git a/frameworks/yui/stylesheets/yui/modules/_grids.sass b/frameworks/yui/stylesheets/yui/modules/_grids.sass new file mode 100644 index 00000000..93dab7d1 --- /dev/null +++ b/frameworks/yui/stylesheets/yui/modules/_grids.sass @@ -0,0 +1,333 @@ +@import compass/utilities/general/clearfix.sass +@import fonts.sass + +// Note: This is not really tested yet. Use at your own risk. + +=yui-grids + +yui-grids-init + #ft + :clear both + #bd + +clearfix + #doc + +yui-document(750px) + #doc2 + +yui-document(950px) + #doc3 + +yui-document("fluid") + #doc4 + +yui-document(974px) + .yui-t1 + +yui-two-column-left-template(160px) + .yui-t2 + +yui-two-column-left-template(180px) + .yui-t3 + +yui-two-column-left-template(300px) + .yui-t4 + +yui-two-column-right-template(180px) + .yui-t5 + +yui-two-column-right-template(240px) + .yui-t6 + +yui-two-column-right-template(300px) + +yui-grid-divisions + +=yui-grids-init(!footer_id = "ft", !content_id = "bd") + body + :text-align center + +=em-size(!style, !px_size, !base_font_size = !default_base_font_size) + :#{!style}= 1em * !px_size / !base_font_size + +=em-size-hacked(!style, !px_size, !base_font_size = !default_base_font_size) + +em-size(!style, !px_size, !base_font_size) + +em-size("*"+!style, !px_size * 39 / 40, !base_font_size) + +// All documents must have these styles. Setting a min-width is optional, but recommended. To omit it, pass false as the min_width value. +=yui-document-base(!min_width = 750px) + :margin auto + :text-align left + @if !min_width + :min-width= !min_width + +=yui-block-base + :position relative + :_position static + +=yui-main-block + :position static + :float none + :width auto + + +// Creates a fixed width document container +// Pass "fluid" for the width to create a document that grows with the width of the browser. +=yui-document(!width, !min_width = 750px, !base_font_size = !default_base_font_size) + +yui-document-base(!min_width) + @if !width == "fluid" + :margin auto 10px + :width auto + @else + +em-size-hacked("width", !width, !base_font_size) + +=yui-two-column-left-template(!column_width, !main_selector = "#yui-main", !block_selector = ".yui-b", !document_width = 750px, !min_width = 750px, !base_font_size = !default_base_font_size) + +yui-document(!document_width, !min_width, !base_font_size) + #{!main_selector} + :width 100% + :float right + +em-size("margin-left", -!column_width - 10px, !base_font_size) + #{!block_selector} + +yui-main-block + +em-size-hacked("margin-left", !column_width, !base_font_size) + #{!block_selector} + +yui-block-base + :float left + +em-size-hacked("width", !column_width, !base_font_size) + +=yui-two-column-right-template(!column_width, !main_selector = "#yui-main", !block_selector = ".yui-b", !document_width = 750px, !min_width = 750px, !base_font_size = !default_base_font_size) + +yui-document(!document_width, !min_width, !base_font_size) + #{!main_selector} + :width 100% + :float left + +em-size("margin-right", -!column_width - 10px, !base_font_size) + #{!block_selector} + +yui-main-block + +em-size-hacked("margin-right", !column_width, !base_font_size) + #{!block_selector} + +yui-block-base + :float right + +em-size-hacked("width", !column_width, !base_font_size) + +=yui-one-column-template(!main_selector = "#yui-main", !block_selector = ".yui-b", !document_width = 750px, !min_width = 750px, !base_font_size = !default_base_font_size) + +yui-document(!document_width, !min_width, !base_font_size) + #{!main_selector} + :width 100% + #{!block_selector} + +yui-main-block + :display block + :margin 0 0 1em 0 + #{!block_selector} + +yui-block-base + +=yui-custom-template(!main_selector = "#yui-main", !block_selector = ".yui-b") + #{!main_selector} + :width 100% + #{!block_selector} + +yui-main-block + #{!block_selector} + +yui-block-base + +=yui-one-third-grid + float: left + margin-left: 2% + width: 32% + +=yui-grid-divisions(!unit = ".yui-u", !g_50_50 = ".yui-g", !g_33_33_33 = ".yui-gb", !g_67_33 = ".yui-gc", !g_33_67 = ".yui-gd", !g_75_25 = ".yui-ge", !g_25_75 = ".yui-gf") + #{nest(!g_50_50, !g_33_33_33, !unit)}, + #{nest(!g_67_33, !unit)}, + #{nest(!g_67_33, !g_50_50)}, + #{nest(!g_33_67, !unit)} + +yui-one-third-grid + + #{!g_33_33_33} + #{!g_50_50}, + #{!g_33_33_33}, + #{!g_67_33}, + #{!g_33_67}, + #{!g_75_25}, + #{!g_25_75}, + #{!unit} + +yui-one-third-grid + #{!g_33_33_33}, + #{!g_67_33} + #{!unit} + *margin-left: 1.8% + _margin-left: 4% + + #{nest(!g_50_50, !g_33_33_33, !unit)} + _margin-left: .8% + + #{nest(!g_33_33_33, !unit)} + float: right + + #{nest(!g_33_33_33, div.first)} + margin-left: 0 + float: left + + #{!g_50_50}, + #{!g_33_33_33} + #{!g_33_33_33} + div.first + *margin-right: 0 + *width: 32% + _width: 31.7% + + #{!g_33_33_33} + #{!g_67_33}, + #{!g_33_67} + div.first + *margin-right: 0 + + #{nest(!g_33_33_33, !g_33_67, !unit)} + *width: 66% + _width: 61.2% + + #{nest(!g_33_33_33, !g_33_67, div.first)} + *width: 31% + _width: 29.5% + + #{!g_50_50}, + #{!g_33_33_33} + #{!g_67_33} + #{!unit} + width: 32% + _float: right + margin-right: 0 + _margin-left: 0 + + #{nest(!g_33_33_33, !g_67_33, div.first)} + width: 66% + *float: left + *margin-left: 0 + + #{!g_33_33_33} + #{!g_75_25}, + #{!g_25_75} + #{!unit} + margin: 0 + + #{nest(!g_50_50, !unit)}, + #{nest(!g_50_50, !g_50_50)}, + #{nest(!g_50_50, !g_33_33_33)}, + #{nest(!g_50_50, !g_67_33)}, + #{nest(!g_50_50, !g_33_67)}, + #{nest(!g_50_50, !g_75_25)}, + #{nest(!g_50_50, !g_25_75)}, + #{nest(!g_67_33, !unit)}, + #{nest(!g_33_67, !g_50_50)}, + #{nest(!g_50_50, !g_67_33, !unit)}, + #{nest(!g_75_25, !unit)}, + #{nest(!g_75_25, !g_50_50)}, + #{nest(!g_25_75, !g_50_50)}, + #{nest(!g_25_75, !unit)} + float: right + + #{nest(!g_50_50, !g_67_33)}, + #{nest(!g_50_50, !g_75_25)}, + #{!g_50_50}, + #{!g_67_33}, + #{nest(!g_67_33, div.first)}, + #{!g_33_67}, + #{!g_75_25}, + #{!g_25_75} + div.first + float: left + + #{!g_50_50}, + #{!g_33_33_33}, + #{!g_67_33}, + #{!g_33_67}, + #{!g_75_25}, + #{!g_25_75} + #{!g_50_50} + #{!unit} + width: 49% + *width: 48.1% + *margin-left: 0 + + #{nest(!g_50_50, !g_50_50, div.first)} + *margin: 0 + + #{nest(!g_33_33_33, !g_50_50, div.first)} + *margin-right: 4% + _margin-right: 1.3% + + #{nest(!g_33_33_33, !g_33_33_33, !unit)} + _margin-left: .7% + + #{nest(!g_33_33_33, !g_50_50)}, + #{nest(!g_33_33_33, !g_33_33_33)} + div.first + *margin-left: 0 + + #{!g_67_33}, + #{!g_33_67} + #{!g_50_50} + #{!unit} + *width: 48.1% + *margin-left: 0 + + #{!g_50_50} + #{!unit}, + #{!g_50_50}, + #{!g_33_33_33}, + #{!g_67_33}, + #{!g_33_67}, + #{!g_75_25}, + #{!g_25_75} + width: 49.1% + + #{nest(!g_50_50, !g_33_33_33)}, + #{!g_33_33_33}, + #{!g_67_33}, + #{!g_33_67} + div.first + margin-left: 0 + + #{nest(!g_50_50, !g_67_33, div.first)}, + #{nest(!g_67_33, div.first)}, + #{nest(!g_33_67, !g_50_50)}, + #{nest(!g_33_67, !unit)} + width: 66% + + #{!g_33_67}, + #{nest(!g_33_33_33, !g_33_67)} + div.first + width: 32% + + #{nest(!g_50_50, !g_33_67, div.first)} + _width: 29.9% + + #{nest(!g_75_25, !unit)}, + #{nest(!g_75_25, !g_50_50)}, + #{nest(!g_25_75, div.first)} + width: 24% + + #{!g_33_33_33} + #{!g_75_25}, + #{!g_25_75} + div#{!unit} + float: right + + #{!g_33_33_33} + #{!g_75_25}, + #{!g_25_75} + div.first + float: left + + #{nest(!g_75_25, div.first)}, + #{nest(!g_25_75, !g_50_50)}, + #{nest(!g_25_75, !unit)} + width: 74.2% + + #{!g_33_33_33} + #{nest(!g_75_25, !unit)}, + #{nest(!g_25_75, div.first)} + *width: 24% + _width: 20% + + #{!g_33_33_33} + #{nest(!g_75_25, div.first)}, + #{nest(!g_25_75, !unit)} + *width: 73.5% + _width: 65.5% + + #{!g_50_50}, + #{!g_33_33_33}, + #{!g_67_33}, + #{!g_33_67}, + #{!g_75_25}, + #{!g_25_75} + +clearfix + + #{nest(!g_33_33_33, !unit)} + float: left diff --git a/test/compass_test.rb b/test/compass_test.rb index 42436fc4..a953d557 100644 --- a/test/compass_test.rb +++ b/test/compass_test.rb @@ -4,21 +4,19 @@ require 'compass' class CompassTest < Test::Unit::TestCase def setup - Dir.glob("fixtures/*/templates").each do |dirname| - dirname = dirname[9..-11] - mkdir_clean tempfile_loc(dirname) - end mkdir_clean absolutize("tmp") mkdir_clean absolutize("tmp/blueprint") mkdir_clean tempfile_loc("default") + mkdir_clean tempfile_loc("yui") + @original_options = Sass::Plugin.options end def teardown - FileUtils.rm_r absolutize("tmp/blueprint") - Dir.glob("fixtures/*/templates").each do |dirname| - dirname = dirname[9..-11] - FileUtils.rm_r tempfile_loc(dirname) - end + FileUtils.rm_rf absolutize("tmp") + FileUtils.rm_rf absolutize("tmp/blueprint") + FileUtils.rm_rf tempfile_loc("default") + FileUtils.rm_rf tempfile_loc("yui") + Sass::Plugin.options = @original_options end def test_blueprint_generates_no_files @@ -38,7 +36,13 @@ class CompassTest < Test::Unit::TestCase end end end - + def test_yui + with_templates('yui') do + each_css_file(tempfile_loc('yui')) do |css_file| + assert_no_errors css_file, 'yui' + end + end + end private def assert_no_errors(css_file, folder) file = css_file[(tempfile_loc(folder).size+1)..-1] @@ -47,7 +51,8 @@ class CompassTest < Test::Unit::TestCase end def with_templates(folder) - old_template_loc = Sass::Plugin.options[:template_location].dup + old_template_loc = Sass::Plugin.options[:template_location] + Sass::Plugin.options[:template_location] = old_template_loc.dup begin Sass::Plugin.options[:template_location][template_loc(folder)] = tempfile_loc(folder) Compass::Frameworks::ALL.each do |framework| diff --git a/test/fixtures/yui/templates/grids.sass b/test/fixtures/yui/templates/grids.sass new file mode 100644 index 00000000..e751fae8 --- /dev/null +++ b/test/fixtures/yui/templates/grids.sass @@ -0,0 +1,3 @@ +@import yui/modules/grids.sass + ++yui-grids \ No newline at end of file