[YUI] Update for YUI Grids 2.7.0

This commit is contained in:
Brian Johnson 2009-06-20 19:49:06 -07:00 committed by Chris Eppstein
parent 8679a926f1
commit 3d67927ad6
3 changed files with 217 additions and 156 deletions

View File

@ -1,4 +1,7 @@
=yui-base =yui-base
body
:margin 10px
h1 h1
:font-size 138.5% :font-size 138.5%
@ -11,9 +14,12 @@
h1, h2, h3 h1, h2, h3
:margin 1em 0 :margin 1em 0
h1,h2, h3, h4, h5, h6, strong h1,h2, h3, h4, h5, h6, strong, dt
:font-weight bold :font-weight bold
optgroup
:font-weight normal
abbr, acronym abbr, acronym
:border-bottom 1px dotted #000 :border-bottom 1px dotted #000
:cursor help :cursor help
@ -21,40 +27,44 @@
em em
:font-style italic :font-style italic
blockquote del
:text-decoration line-through
blockquote, ul, ol, dl
:margin 1em :margin 1em
ul ol,ul,dl
:margin 1em
:margin-left 2em :margin-left 2em
li
:list-style disc outside
ol ol li
:margin 1em :list-style decimal outside
:margin-left 2em
li
:list-style decimal outside
dl ul li
:margin 1em :list-style disc outside
:margin-left 2em
dd dl dd
:margin-left 1em :margin-left 1em
th, td
:border 1px solid #000
:padding .5em
th th
:border 1px solid #000
:padding .5em
:font-weight bold :font-weight bold
:text-align center :text-align center
td
:border 1px solid #000
:padding .5em
caption caption
:margin-bottom .5em :margin-bottom .5em
:text-align center :text-align center
p, fieldset, table sup
:vertical-align super
sub
:vertical-align sub
p, fieldset, table, pre
:margin-bottom 1em :margin-bottom 1em
button, input[type="checkbox"], input[type="radio"], input[type="reset"], input[type="submit"]
padding: 1px

View File

@ -28,6 +28,13 @@
:*font-size small :*font-size small
:*font x-small :*font x-small
select,
input,
button,
textarea,
button
:font 99% arial,helvetica,clean,sans-serif
table table
:font-size inherit :font-size inherit
:font 100% :font 100%

View File

@ -18,6 +18,7 @@
+yui-document("fluid") +yui-document("fluid")
#doc4 #doc4
+yui-document(974px) +yui-document(974px)
/* Section: Preset Template Rules (.yui-t[1-6])
.yui-t1 .yui-t1
+yui-two-column-left-template(160px) +yui-two-column-left-template(160px)
.yui-t2 .yui-t2
@ -30,22 +31,31 @@
+yui-two-column-right-template(240px) +yui-two-column-right-template(240px)
.yui-t6 .yui-t6
+yui-two-column-right-template(300px) +yui-two-column-right-template(300px)
.yui-t7
+yui-one-column-template
=yui-grids-footer =yui-group-clearing
clear: both zoom: 1
&:after
content: "."
display: block
height: 0
clear: both
visibility: hidden
=yui-grids-body =yui-grids-init(!header = "#hd", !footer = "#ft", !body = "#bd")
+clearfix /* Section: General Rules
=yui-grids-init(!footer = "#ft", !body = "#bd")
body body
:text-align center :text-align center
@if !header
#{!header}
+yui-group-clearing
@if !footer @if !footer
#{!footer} #{!footer}
+yui-grids-footer +yui-group-clearing
@if !body @if !body
#{!body} #{!body}
+yui-grids-body +yui-group-clearing
=em-size(!style, !px_size, !base_font_size = !yui_default_base_font_size) =em-size(!style, !px_size, !base_font_size = !yui_default_base_font_size)
:#{!style}= 1em * !px_size / !base_font_size :#{!style}= 1em * !px_size / !base_font_size
@ -54,8 +64,8 @@
+em-size(!style, !px_size, !base_font_size) +em-size(!style, !px_size, !base_font_size)
+em-size("*"+!style, !px_size * 39 / 40, !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. // All documents must have these styles
=yui-document-base(!min_width = 750px) =yui-document-base(!min_width = false)
:margin auto :margin auto
:text-align left :text-align left
@if !min_width @if !min_width
@ -66,14 +76,12 @@
:_position static :_position static
=yui-main-block =yui-main-block
:position static
:float none :float none
:width auto :width auto
// Creates a fixed width document container // Creates a fixed width document container
// Pass "fluid" for the width to create a document that grows with the width of the browser. // 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 = !yui_default_base_font_size) =yui-document(!width, !min_width = false, !base_font_size = !yui_default_base_font_size)
+yui-document-base(!min_width) +yui-document-base(!min_width)
@if !width == "fluid" @if !width == "fluid"
:margin auto 10px :margin auto 10px
@ -81,85 +89,163 @@
@else @else
+em-size-hacked("width", !width, !base_font_size) +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 = !yui_default_base_font_size) =yui-two-column-left-template(!column_width, !main_selector = "#yui-main", !block_selector = ".yui-b", !document_width = 750px, !min_width = false, !base_font_size = !yui_default_base_font_size)
+yui-document(!document_width, !min_width, !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} #{!block_selector}
+yui-block-base +yui-block-base
:float left :float left
+em-size-hacked("width", !column_width, !base_font_size) +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 = !yui_default_base_font_size)
+yui-document(!document_width, !min_width, !base_font_size)
#{!main_selector} #{!main_selector}
:width 100% :width 100%
:float left :float right
+em-size("margin-right", -!column_width - 10px, !base_font_size) :margin-left -25em
#{!block_selector} #{!block_selector}
+yui-main-block +yui-main-block
+em-size-hacked("margin-right", !column_width, !base_font_size) +em-size("margin-left", !column_width + 13px, !base_font_size)
// t3 is 15px for IE for some reason - seems like this should be some formula based on the column width and not a fixed number - need to do more research
@if !column_width > 180px
+em-size("*margin-left", (!column_width + 15px) * 39 / 40, !base_font_size)
@else
+em-size("*margin-left", (!column_width + 14px) * 39 / 40, !base_font_size)
=yui-two-column-right-template(!column_width, !main_selector = "#yui-main", !block_selector = ".yui-b", !document_width = 750px, !min_width = false, !base_font_size = !yui_default_base_font_size)
+yui-document(!document_width, !min_width, !base_font_size)
#{!block_selector} #{!block_selector}
+yui-block-base +yui-block-base
:float right :float right
+em-size-hacked("width", !column_width, !base_font_size) +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 = !yui_default_base_font_size)
+yui-document(!document_width, !min_width, !base_font_size)
#{!main_selector} #{!main_selector}
:width 100% :width 100%
:float left
:margin-right -25em
#{!block_selector}
+yui-main-block
+em-size("margin-right", !column_width + 13px, !base_font_size)
// t5 is 15px for IE for some reason - seems like this should be some formula based on the column width and not a fixed number - need to do more research
@if !column_width > 180px
+em-size("*margin-right", (!column_width + 15px) * 39 / 40, !base_font_size)
@else
+em-size("*margin-right", (!column_width + 14px) * 39 / 40, !base_font_size)
=yui-one-column-template(!main_selector = "#yui-main", !block_selector = ".yui-b", !document_width = 750px, !min_width = false, !base_font_size = !yui_default_base_font_size)
+yui-document(!document_width, !min_width, !base_font_size)
#{!main_selector}
#{!block_selector} #{!block_selector}
+yui-main-block +yui-main-block
:display block :display block
:margin 0 0 1em 0 :margin 0 0 1em 0
#{!block_selector}
+yui-block-base
=yui-custom-template(!main_selector = "#yui-main", !block_selector = ".yui-b") =yui-custom-template(!main_selector = "#yui-main", !block_selector = ".yui-b")
#{!block_selector}
+yui-block-base
#{!main_selector} #{!main_selector}
:width 100% :width 100%
#{!block_selector} #{!block_selector}
+yui-main-block +yui-main-block
#{!block_selector}
+yui-block-base
=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") =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")
/* Section: Grids and Nesting Grids
/* from #yui-main, .yui-g .yui-u .yui-g
#{nest(!g_50_50, !unit, !g_50_50)}
width: 100%
/* Children generally take half the available space
#{nest(!g_33_33_33, !unit)},
#{nest(!g_50_50, !g_33_33_33, !unit)}, #{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)},
#{nest(!g_33_33_33, !g_50_50)}, #{nest(!g_33_33_33, !g_50_50)},
#{nest(!g_33_33_33, !g_33_33_33)}, #{nest(!g_33_33_33, !g_33_33_33)},
#{nest(!g_33_33_33, !g_67_33)}, #{nest(!g_33_33_33, !g_67_33)},
#{nest(!g_33_33_33, !g_33_67)}, #{nest(!g_33_33_33, !g_33_67)},
#{nest(!g_33_33_33, !g_75_25)}, #{nest(!g_33_33_33, !g_75_25)},
#{nest(!g_33_33_33, !g_25_75)}, #{nest(!g_33_33_33, !g_25_75)},
#{nest(!g_33_33_33, !unit)} #{nest(!g_67_33, !unit)},
#{nest(!g_67_33, !g_50_50)},
#{nest(!g_33_67, !unit)}
float: left float: left
margin-left: 2%
width: 32%
#{!g_33_33_33} /* Float units (and sub grids) to the right
#{!g_33_33_33}, #{nest(!g_50_50, !unit)},
#{!g_67_33} #{nest(!g_50_50, !g_50_50)},
#{!unit} #{nest(!g_50_50, !g_33_33_33)},
*margin-left: 1.8% #{nest(!g_50_50, !g_67_33)},
_margin-left: 4% #{nest(!g_50_50, !g_33_67)},
#{nest(!g_50_50, !g_75_25)},
#{nest(!g_50_50, !g_33_33_33, !unit)} #{nest(!g_50_50, !g_25_75)},
_margin-left: .8% #{nest(!g_67_33, !unit)},
#{nest(!g_33_67, !g_50_50)},
#{nest(!g_33_33_33, !unit)} #{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 float: right
#{nest(!g_33_33_33, "div.first")} /* Float units (and sub grids) to the left
margin-left: 0 #{!g_50_50},
float: left #{!g_33_33_33},
#{!g_67_33},
#{!g_33_67},
#{!g_75_25},
#{!g_25_75},
#{nest(!g_50_50, !g_67_33)},
#{nest(!g_50_50, !g_75_25)},
#{nest(!g_67_33, "div.first")}
div.first
float: left
#{!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_33_33_33, !unit)},
#{nest(!g_50_50, !g_33_33_33, !unit)},
#{nest(!g_33_33_33, !g_50_50)},
#{nest(!g_33_33_33, !g_33_33_33)},
#{nest(!g_33_33_33, !g_67_33)},
#{nest(!g_33_33_33, !g_33_67)},
#{nest(!g_33_33_33, !g_75_25)},
#{nest(!g_33_33_33, !g_25_75)},
#{nest(!g_67_33, !unit)},
#{nest(!g_67_33, !g_50_50)},
#{nest(!g_33_67, !unit)}
width: 32%
margin-left: 1.99%
/* Give IE some extra breathing room for 1/3-based rounding issues
#{nest(!g_33_33_33, !unit)}
*margin-left: 1.9%
*width: 31.9%
#{nest(!g_50_50, !g_33_33_33)},
#{!g_33_33_33},
#{!g_67_33},
#{!g_33_67}
div.first
margin-left: 0
/* Section: Deep Nesting
#{!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, !unit)}
width: 48.1%
#{!g_50_50}, #{!g_50_50},
#{!g_33_33_33} #{!g_33_33_33}
@ -169,12 +255,32 @@
*width: 32% *width: 32%
_width: 31.7% _width: 31.7%
#{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%
#{nest(!g_33_33_33, !g_50_50, "div.first")}
*margin-right: 4%
_margin-right: 1.3%
#{!g_33_33_33} #{!g_33_33_33}
#{!g_67_33}, #{!g_67_33},
#{!g_33_67} #{!g_33_67}
div.first div.first
*margin-right: 0 *margin-right: 0
#{!g_33_33_33}
#{!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: 1.0%
#{nest(!g_33_33_33, !g_33_67, !unit)} #{nest(!g_33_33_33, !g_33_67, !unit)}
*width: 66% *width: 66%
_width: 61.2% _width: 61.2%
@ -203,52 +309,6 @@
#{!unit} #{!unit}
margin: 0 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)} #{nest(!g_33_33_33, !g_33_33_33, !unit)}
_margin-left: .7% _margin-left: .7%
@ -264,29 +324,6 @@
*width: 48.1% *width: 48.1%
*margin-left: 0 *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}, #{!g_33_67},
#{nest(!g_33_33_33, !g_33_67)} #{nest(!g_33_33_33, !g_33_67)}
div.first div.first
@ -300,6 +337,11 @@
#{nest(!g_25_75, "div.first")} #{nest(!g_25_75, "div.first")}
width: 24% width: 24%
#{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} #{!g_33_33_33}
#{!g_75_25}, #{!g_75_25},
#{!g_25_75} #{!g_25_75}
@ -312,30 +354,32 @@
div.first div.first
float: left float: left
#{nest(!g_75_25, "div.first")}, /* Width Accommodation for Nested Contexts
#{nest(!g_25_75, !g_50_50)},
#{nest(!g_25_75, !unit)}
width: 74.2%
#{!g_33_33_33} #{!g_33_33_33}
#{nest(!g_75_25, !unit)}, #{nest(!g_75_25, !unit)},
#{nest(!g_25_75, "div.first")} #{nest(!g_25_75, "div.first")}
*width: 24% *width: 24%
_width: 20% _width: 20%
/* Width Accommodation for Nested Contexts
#{!g_33_33_33} #{!g_33_33_33}
#{nest(!g_75_25, "div.first")}, #{nest(!g_75_25, "div.first")},
#{nest(!g_25_75, !unit)} #{nest(!g_25_75, !unit)}
*width: 73.5% *width: 73.5%
_width: 65.5% _width: 65.5%
/* Patch for GD within GE
#{nest(!g_75_25, "div.first", !g_33_67, !unit)}
width: 65%
#{nest(!g_75_25, "div.first", !g_33_67, "div.first")}
width: 32%
/* @group Clearing
#{!g_50_50}, #{!g_50_50},
#{!g_33_33_33}, #{!g_33_33_33},
#{!g_67_33}, #{!g_67_33},
#{!g_33_67}, #{!g_33_67},
#{!g_75_25}, #{!g_75_25},
#{!g_25_75} #{!g_25_75}
+clearfix +yui-group-clearing
#{nest(!g_33_33_33, !unit)}
float: left