180 lines
9.8 KiB
Plaintext
180 lines
9.8 KiB
Plaintext
|
!!! Transitional
|
||
|
|
%html{:xmlns => "http://www.w3.org/1999/xhtml", "xml:lang" => "en", :lang => "en"}
|
||
|
|
%head
|
||
|
|
%title Yahoo Grid Divisions Example
|
||
|
|
%link{:rel=>"stylesheet", :href=>"stylesheets/screen.css", :type=>"text/css", :media=>"screen, projection"}
|
||
|
|
:javascript
|
||
|
|
function changeTemplate() {
|
||
|
|
var templateClass = document.getElementById("current-template").value;
|
||
|
|
document.getElementById("doc4").className = templateClass;
|
||
|
|
}
|
||
|
|
%style{:type => "text/css"}
|
||
|
|
:sass
|
||
|
|
.yui-b
|
||
|
|
border: 1px dotted #ccc
|
||
|
|
%body
|
||
|
|
#doc4.yui-t2
|
||
|
|
#hd
|
||
|
|
%h1 Yahoo Grid Divisions Example
|
||
|
|
#bd
|
||
|
|
.yui-b
|
||
|
|
%h3 YUI Examples
|
||
|
|
%ul
|
||
|
|
%li
|
||
|
|
%a{:href=>"templates.html"} Template Presets
|
||
|
|
%li
|
||
|
|
%a{:href=>"typography.html"} Typography
|
||
|
|
%li
|
||
|
|
%a{:href=>"divisions.html"} Grid Divisions
|
||
|
|
%label{:for => "current-template"} Select Template Preset
|
||
|
|
%select{:id=>"current-template", :onchange => "changeTemplate()"}
|
||
|
|
%option{:value => "yui-t1"}= ".yui-t1"
|
||
|
|
%option{:value => "yui-t2", :selected => "selected"}= ".yui-t2"
|
||
|
|
%option{:value => "yui-t3"}= ".yui-t3"
|
||
|
|
%option{:value => "yui-t4"}= ".yui-t4"
|
||
|
|
%option{:value => "yui-t5"}= ".yui-t5"
|
||
|
|
%option{:value => "yui-t6"}= ".yui-t6"
|
||
|
|
|
||
|
|
#yui-main
|
||
|
|
.yui-b
|
||
|
|
%h2 50/50 Division
|
||
|
|
%hr
|
||
|
|
.yui-g
|
||
|
|
.yui-u.first
|
||
|
|
%h3 Left Side
|
||
|
|
%p
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
||
|
|
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
||
|
|
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
||
|
|
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||
|
|
officia deserunt mollit anim id est laborum.
|
||
|
|
.yui-u
|
||
|
|
%h3 Right Side
|
||
|
|
%p
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
||
|
|
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
||
|
|
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
||
|
|
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||
|
|
officia deserunt mollit anim id est laborum.
|
||
|
|
%h2 33/33/33 Division
|
||
|
|
%hr
|
||
|
|
.yui-gb
|
||
|
|
.yui-u.first
|
||
|
|
%h3 Left Side
|
||
|
|
%p
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
||
|
|
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
||
|
|
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
||
|
|
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||
|
|
officia deserunt mollit anim id est laborum.
|
||
|
|
.yui-u
|
||
|
|
%h3 Middle
|
||
|
|
%p
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
||
|
|
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
||
|
|
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
||
|
|
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||
|
|
officia deserunt mollit anim id est laborum.
|
||
|
|
|
||
|
|
.yui-u
|
||
|
|
%h3 Right Side
|
||
|
|
%p
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
||
|
|
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
||
|
|
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
||
|
|
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||
|
|
officia deserunt mollit anim id est laborum.
|
||
|
|
%h2 67/33 Division
|
||
|
|
%hr
|
||
|
|
.yui-gc
|
||
|
|
.yui-u.first
|
||
|
|
%h3 Left Side
|
||
|
|
%p
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
||
|
|
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
||
|
|
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
||
|
|
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||
|
|
officia deserunt mollit anim id est laborum.
|
||
|
|
.yui-u
|
||
|
|
%h3 Right Side
|
||
|
|
%p
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
||
|
|
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
||
|
|
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
||
|
|
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||
|
|
officia deserunt mollit anim id est laborum.
|
||
|
|
%h2 33/67 Division
|
||
|
|
%hr
|
||
|
|
.yui-gd
|
||
|
|
.yui-u.first
|
||
|
|
%h3 Left Side
|
||
|
|
%p
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
||
|
|
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
||
|
|
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
||
|
|
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||
|
|
officia deserunt mollit anim id est laborum.
|
||
|
|
.yui-u
|
||
|
|
%h3 Right Side
|
||
|
|
%p
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
||
|
|
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
||
|
|
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
||
|
|
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||
|
|
officia deserunt mollit anim id est laborum.
|
||
|
|
%h2 75/25 Division
|
||
|
|
%hr
|
||
|
|
.yui-ge
|
||
|
|
.yui-u.first
|
||
|
|
%h3 Left Side
|
||
|
|
%p
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
||
|
|
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
||
|
|
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
||
|
|
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||
|
|
officia deserunt mollit anim id est laborum.
|
||
|
|
.yui-u
|
||
|
|
%h3 Right Side
|
||
|
|
%p
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
||
|
|
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
||
|
|
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
||
|
|
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||
|
|
officia deserunt mollit anim id est laborum.
|
||
|
|
%h2 25/75 Division
|
||
|
|
%hr
|
||
|
|
.yui-gf
|
||
|
|
.yui-u.first
|
||
|
|
%h3 Left Side
|
||
|
|
%p
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
||
|
|
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
||
|
|
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
||
|
|
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||
|
|
officia deserunt mollit anim id est laborum.
|
||
|
|
.yui-u
|
||
|
|
%h3 Right Side
|
||
|
|
%p
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
||
|
|
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
||
|
|
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
||
|
|
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||
|
|
officia deserunt mollit anim id est laborum.
|
||
|
|
|
||
|
|
#ft
|
||
|
|
Copyright © 2008. All Rights Reserved.
|
||
|
|
|