Grid API tests

api-01.coffee

    # intialize a grid on '.mainGrid' with default options using G's subclass of jQuery
    
    G.$('.superCoolGrid').grid({id:'super'})
    
    # now that the grid has been initialized you can access it via G[id]:
    
    alert 'this is the grid ' + G.super 
    
    # configure a grid's dimensions to have 12 fluid columns and a vertical baseline grid of 1.6em's
    
    mainGridDimensions = 
      [
        id:     'baseline'
        units:  '1.6em'
        gutter: '1.6em'
        angle:  'vertical'
        ,
        id:     'cols'
        count:  12 
        gutter: '1em'
        angle:  'horizontal'            
      ]
    
    G.$('.mainGrid').grid({id:'main', dimensions: mainGridDimensions})
    
    # add a horizontal grid dimension to this grid called 'rows' with a base unit of 50px
    
    G.main.dimensions.add
      id:     'rows'
      unit:   50
      gutter: 10
      
    # now lets use the dimensions
    
    G.main.baseline(5) # returns size of 5 basline units minus gutterin the original units  

api-02.coffee

      G('.mainGrid').grid
        id:'main'
        dimensions:
          [
            id:     'baseline'
            units:  25
            gutter: 25
            angle:  'vertical'
            ,
            id:     'cols'
            count:  12
            gutter: '1em'
            angle:  'horizontal'            
          ]
        nodeLayout: {float: 'left'}  {isotope: {}}        
        nodes:
          [
            id:     'title'
            width:  G.main.cols('5')
            height: G.main.baseline('5')                        
            ,
            id:     'nav'
            width:  '100%'
            height: G.main.baseline('3') 
            nodeLayout: 'hstack'
            nodeRenderers: 
              [ 
                id: 'navItems'
                nodeRenderer: {height:}
              ]            
            ,
            id:     'content'
            width:  '100%'
            height: 'auto'                      
            nodes:
              [
                id: 'articles' 
                width: '2/3'
                height: 'auto'
                nodeLayout: 'vstack'
                nodeRenderers: 
                  [
                    {width: height: condition: () -> if tile.isFeatured then return true else return false}
                    {width: height: }                    
                  ]
                ,
                id: 'folio'
                width: '1/3'
                nodeRenderers:
                  [
                    [{}{}]
                  ]
              ]
            
            dynamicPositions:
              [ 
                {
                  id: 'by3', 
                  harmony: [[width:'1/3', height:G.baseline(6), condition: () ->], [width:'1/3', height:G.baseline(6)], [width:'1/3', height:G.baseline(6)]]
                  maxPlacements: 1
                }
                {
                  id: 'by2', 
                  harmony: [[width:'1/2', height:G.baseline(6)], [width:'1/2', height:G.baseline(6)]]
                  condition: (items) ->
                    if item.isSexy 
                }
              ]
            positions:
              [
                id: 'advert'
                right:0
                top:0
              ]            
          ]

api-03.coffee

      $G('.title').place( G.main.title )
      
      blogNode = {
        width: '100%'
        height: 'auto'
        nodeRenderer: {width: '100%', height:[100, G.main.baseline(5)]}          
        id: 'blog'
      }
      
      G.main.content.nodes.add( blogNode )
      
      G('.tile').place( G.main.content.blog.nodes )