JQML Responsive Grid API demo

GDOM.coffee

  GDOM:
    nodes:
      id: 'mainGrid'
      $: {nodeLayout:{type:'float', options:''}, css:{margin:''} }
      nodes:
        [
          { 
            id: 'title',    
            $: {width:'100%', height:G.v(5)} 
          } 
          { 
            id: 'nav',      
            $: {width:'100%', }
          }
          { 
            id: 'content',  
            $: {width:'', isotope:{selector: '.tile', layout:'masonry'} }
            nodeSelector: '.tile'
            nodes:
              [
                {
                  createNode: (els) ->    
                }
                {
                  createNode: (els) ->  
                }
                
              ]
          }
        ]
      

GridModel.coffee

  class GridModel extends RW.Model
    
    defaults:
      area: 
        selector: '.G_area'                
      dimensions: ['h', 'v']
      h: 
        unit:   null
        count:  12
        gutter: 20
        lines:  null
        angle:  null
      v:
        unit:   25
        count:  null
        gutter: 25
        lines:  null
        angle:  null    


    reset: () ->
    
    # get horizontal size of module_container or module of [num] units in width
    h: (num, is_container = true) ->      
      return @_dim( @get('h'), num, is_container)
    
    # get vertical size of module_container or module of [num] units in height
    v: (num, is_container = true) ->      
      return @_dim( @get('v'), num, is_container)
      
    # internal, dimension agnostic implementation to get size of module_container or module of [num] units in dimension
    _dim: (dim, num, is_container = true) ->
      if is_container
        return (dim.unit + dim.gutter) * num
      else
        return ((dim.unit + dim.gutter) * num) - dim.gutter

responsiveGrid.coffee

  $(window).responsive
    queries:
      [
        {
          query: (el) ->
            if $(el).width() > 960 then return true else return false
            
          response: (el) ->
            $('.G_area')
              .G
                modules: 
                  [
                    {id:'title', w:'100%', h:G.v(10)  }
                    {id:'nav',  w:'100%', h:G.v(3)    }
                    {id:'content', w:'100%', h:'auto'}
                  ]
              .find('[data-g-module="content"]')
              .G
                layout: 'float'
                modules:
                  [
                    {w:G.h(3), h:G.v(3) }
                    {w:G.h(3), h:G.v(3) }
                    {w:G.h(3), h:G.v(3) }
                    {w:G.h(3), h:G.v(3) }
                    {w:G.h(3), h:G.v(3) }
                    {w:G.h(3), h:G.v(3) }
                  ]
          
        }
        {
          query: (el) ->
            if $(el).width() > 500 then return true else return false
            
          response: (el) ->
            $('.G_area')
              .G                
                modules: 
                  [
                    {id:'title', w:'50%', h:G.v(10)  }
                    {id:'nav',  w:'50%', h:G.v(3)    }
                    {id:'content', w:'100%', h:'auto'}
                  ]
              .find('[data-g-module="content"]')
              .G
                layout: 'float'
                modules:
                  [
                    {w:G.h(3), h:G.v(3) }
                    {w:G.h(3), h:G.v(3) }
                    {w:G.h(3), h:G.v(3) }
                    {w:G.h(3), h:G.v(3) }
                    {w:G.h(3), h:G.v(3) }
                    {w:G.h(3), h:G.v(3) }
                    {w:G.h(3), h:G.v(3) }
                    {w:G.h(3), h:G.v(3) }
                    {w:G.h(3), h:G.v(3) }
                    {w:G.h(3), h:G.v(3) }
                    {w:G.h(3), h:G.v(3) }
                    {w:G.h(3), h:G.v(3) }
                  ]
              
        }
      ]