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/base.sass
|
||||||
@import modules/fonts.sass
|
@import modules/fonts.sass
|
||||||
|
@import modules/grids.sass
|
||||||
=yui
|
=yui
|
||||||
+yui-base
|
+yui-base
|
||||||
+yui-base-fonts
|
+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
|
class CompassTest < Test::Unit::TestCase
|
||||||
def setup
|
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")
|
||||||
mkdir_clean absolutize("tmp/blueprint")
|
mkdir_clean absolutize("tmp/blueprint")
|
||||||
mkdir_clean tempfile_loc("default")
|
mkdir_clean tempfile_loc("default")
|
||||||
|
mkdir_clean tempfile_loc("yui")
|
||||||
|
@original_options = Sass::Plugin.options
|
||||||
end
|
end
|
||||||
|
|
||||||
def teardown
|
def teardown
|
||||||
FileUtils.rm_r absolutize("tmp/blueprint")
|
FileUtils.rm_rf absolutize("tmp")
|
||||||
Dir.glob("fixtures/*/templates").each do |dirname|
|
FileUtils.rm_rf absolutize("tmp/blueprint")
|
||||||
dirname = dirname[9..-11]
|
FileUtils.rm_rf tempfile_loc("default")
|
||||||
FileUtils.rm_r tempfile_loc(dirname)
|
FileUtils.rm_rf tempfile_loc("yui")
|
||||||
end
|
Sass::Plugin.options = @original_options
|
||||||
end
|
end
|
||||||
|
|
||||||
def test_blueprint_generates_no_files
|
def test_blueprint_generates_no_files
|
||||||
@ -38,7 +36,13 @@ class CompassTest < Test::Unit::TestCase
|
|||||||
end
|
end
|
||||||
end
|
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
|
private
|
||||||
def assert_no_errors(css_file, folder)
|
def assert_no_errors(css_file, folder)
|
||||||
file = css_file[(tempfile_loc(folder).size+1)..-1]
|
file = css_file[(tempfile_loc(folder).size+1)..-1]
|
||||||
@ -47,7 +51,8 @@ class CompassTest < Test::Unit::TestCase
|
|||||||
end
|
end
|
||||||
|
|
||||||
def with_templates(folder)
|
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
|
begin
|
||||||
Sass::Plugin.options[:template_location][template_loc(folder)] = tempfile_loc(folder)
|
Sass::Plugin.options[:template_location][template_loc(folder)] = tempfile_loc(folder)
|
||||||
Compass::Frameworks::ALL.each do |framework|
|
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