Added the YUI grids module. It compiles and generates roughly the expected output, but is not well tested yet.

This commit is contained in:
Chris Eppstein 2008-11-29 01:15:12 -08:00
parent 39265bafc3
commit b5034a917e
4 changed files with 355 additions and 12 deletions

View File

@ -1,5 +1,7 @@
@import modules/base.sass
@import modules/fonts.sass
@import modules/grids.sass
=yui
+yui-base
+yui-base-fonts
+yui-base-fonts
+yui-grids

View File

@ -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

View File

@ -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|

View File

@ -0,0 +1,3 @@
@import yui/modules/grids.sass
+yui-grids