Added the YUI grids module. It compiles and generates roughly the expected output, but is not well tested yet.
This commit is contained in:
parent
39265bafc3
commit
b5034a917e
@ -1,5 +1,7 @@
|
||||
@import modules/base.sass
|
||||
@import modules/fonts.sass
|
||||
@import modules/grids.sass
|
||||
=yui
|
||||
+yui-base
|
||||
+yui-base-fonts
|
||||
+yui-grids
|
333
frameworks/yui/stylesheets/yui/modules/_grids.sass
Normal file
333
frameworks/yui/stylesheets/yui/modules/_grids.sass
Normal 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
|
@ -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|
|
||||
|
3
test/fixtures/yui/templates/grids.sass
vendored
Normal file
3
test/fixtures/yui/templates/grids.sass
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
@import yui/modules/grids.sass
|
||||
|
||||
+yui-grids
|
Loading…
Reference in New Issue
Block a user