d4tocchini
9/13/2011 - 8:08 AM
Grid API tests 2
Grid API tests 2
$(window).responsive
queries:
[
{
query: (el) ->
if $(el).width() > 960 then return true else return false
response: (el) ->
$('.G_main_grid')
.css
'max-width': '1400px'
.G
id: 'main'
area:
top: 25
right: 50
bottom: 75
left: 100
min_height: 1000
dimensions:
[
id: 'h'
unit: null
count: 12
gutter: 20
lines: null
angle: 'horizontal'
,
id: 'v'
unit: '2em'
count: null
gutter: '1em'
lines: null
angle: 'vertical'
]
zones:
[
clear: true
width: 'G.main.h(3)'
height: 'G.main.v(1)'
,
id: 'nav'
width: 'G.main.h(9)'
min_height: 'G.main.v(1)'
spawner:
[
width: 'G.main.h(1)'
height: 'G.main.v(1)'
]
,
id: 'sss'
width: 'G.main.h(12)'
height: 'G.main.v(2)'
,
id: 'sssa'
width: 'G.main.h(3)'
height: 'G.main.v(6)'
,
id: 'title'
width: 'G.main.h(9)'
height: 'G.main.v(6)'
,
id: 'content'
width: 'G.main.h().round("100%")'
height: 'auto'
generator:
template: 'wall_tiles'
shuffle: false
seeds:
[
# 1/4
width: 'G.main.h(3)'
height: 'G.main.v(5)'
,
width: 'G.main.h(3)'
height: 'G.main.v(5)'
,
width: 'G.main.h(3)'
height: 'G.main.v(5)'
,
width: 'G.main.h(3)'
height: 'G.main.v(5)'
]
spawner:
[
# 1/4
clear: true
width: 'G.main.h(3)'
height: 'G.main.v(3)'
,
if: ($el) ->
width: 'G.main.h(3)'
height: 'G.main.v(3)'
,
width: 'G.main.h(3)'
height: 'G.main.v(3)'
,
width: 'G.main.h(3)'
height: 'G.main.v(3)'
,
# 1/4
width: 'G.main.h(3)'
height: 'G.main.v(5)'
,
width: 'G.main.h(3)'
height: 'G.main.v(5)'
,
width: 'G.main.h(3)'
height: 'G.main.v(5)'
,
width: 'G.main.h(3)'
height: 'G.main.v(5)'
,
# 1/4
width: 'G.main.h(3)'
height: 'G.main.v(5)'
,
width: 'G.main.h(3)'
height: 'G.main.v(5)'
,
width: 'G.main.h(3)'
height: 'G.main.v(5)'
,
width: 'G.main.h(3)'
height: 'G.main.v(5)'
]
]
}
{
query: (el) ->
if $(el).width() > 500 then return true else return false
response: (el) ->
$('.G_main_grid')
.G
id: 'main'
dimensions:
[
id: 'h'
unit: null
count: 3
gutter: 40
lines: null
angle: 'horizontal'
,
id: 'v'
unit: 50
count: null
gutter: 0
lines: null
angle: 'vertical'
]
zones:
[
id: 'title'
width: 'G.main.h(2)'
height: 'G.main.v().floor("250px")'
children:
[
id: 'title_item'
height: '200px'
width: 200
children:
[
id: 'test'
height: '25px'
width: '25px'
children:
[
id: 'test2'
height: '10px'
width: '10px'
]
,
id: 'test3'
height: '50px'
width: '50px'
]
]
,
id: 'nav'
width: '50%'
height: 'auto'
,
id: 'nav_item'
width: '100px'
height: 'G.main.v(2)'
parentId: 'nav'
,
id: 'content'
width: '100%'
height: 'auto'
spawner:
[
width: 'G.main.h(1)'
height: 'G.main.v(2)'
,
width: 'G.main.h(1)'
height: 'G.main.v(2)'
]
]
}
]