Grid API tests 2

GridAPITest.coffee

      $(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)'
                            ]
                      ]

            }
          ]