001 - react-style.coffee

$.section class:"3pronged #{@classes.split(' ')}"
  
  variant '3posts_w_media'

    for post in @posts.eat(3)
      $.article
        $.h1 post.h1.eat(1)
        $.h2 post.h2.eat(1)
        $.text post.text.eat(1)
        $.image post.media.eat(1).eat(1, type:'image')
        
  variant '3posts_w_media'
    $.article
      $.h1 'What People Are Saying'
      for image in @posts.eat(1).media.eatAll(3, type:'image')
        $.image image
        $.text image.text.eat()

coffee-style tree without rules.coffee

reposts:
  
  many:
    '.posts':
      length: '<= 5'
 
  '2':
    'w-wo': [
      '#post1':
        type: 'media'
        src: true
 
      '#post2':
        type: 'media'
        src: false
 
      'right'
      'left'
    ]
    
    'w-w': [
      '#post1':
        type: 'media'
        src: true
 
      '#post2'
        type: 'media'
        src: true
 
      'right'
      'left'
 
      landscape: [
        '*':
          aspect: 'landscape'
 
        'right'
        'left'
      ]
 
      portrait: [
        '*':
          aspect: 'portrait'
 
        'right'
        'left'
      ]
      
    ]

consumption-template.ect

<section class="3pronged {{- get( -> variantClasses() )}}">
  
  {{ variant '3posts_w_media' }}
    {{ for post in @posts.eat(3) : }}
      <article>
        {{- h1(post.h1) }}
        {{- h2(post.h2) }}
        {{- text(post.text) }}
        {{- image(post.image) }}
      </article>
    {{ end }}
  {{ sub '3posts_w_media' }}
    <article>
      {{- 'What People Are Saying' }}
      {{ for image in @posts.eat(1).images.eatAll(3) : }}    
          {{- image(image) }}
          {{- text(image.text) }}
      {{ end }}
    </article>
  {{ end }}

</section>

css-style tree with rules .coffee

'reposts' {
  
  'many' {
    .posts {
      length: <= 5;
    }
    }
  '2' {
    'w-wo' {
      #post1 {
        type: 'media';
        src: true;
      }
      #post2 {
        type: 'media';
        src: false;
      }
      'right';
      'left';
    }
    'w-w' {  
      #post1 {
        type: 'media';
        src: true;
      }
      #post2 {
        type: 'media';
        src: true;
      }      
      'right';
      'left';
      'landscape' {
        * {
          aspect: 'landscape';
        }
        'right';
        'left';
      }
      'portrait' {
        * {
          aspect: 'portrait';
        }
        'right';
        'left';
      }
    } 
  }
  
}
  '1'
    'w'
      'small' .5
        *right
        *left
      'large'
        'landscape' 1
          *center
          'low_contrast_zone' 2
            *right
            *left
        'portrait' 1
          *right
          *left
  
    'w/o' .5
      *right
      *left
}

css-style-a.less

'variant' {
    
  'sub-varaint' {
    @post {
      
      @img x 1 !require, x 2 {
        1/3 <= ratio <= 3;      
      }
      @h1 {
        fixtures: 'Auto color-correction';
      }
      @h2 {
        fixtures: lorem-h2();
      }
      @p {
        fixtures: lorem-p();
      }
      
    }
  
  }

}

css-style-b.less

'post_w_3media' {

  @eat post {
    
    @eat 3 img {
      1/3 <= ratio <= 3;     
    }
    @eat all h1's {
      fixtures = lorem-h1();  
    }
    @eat h2 {
      fixtures = lorem-h1();
    }
    @eat text {
      get(1);
    }
    
  }

}
'3reposts' {

  @eat 3 post {
    @eat media {
      length == 1;
      @eat image {
        length >= 1;
      }
    @eat text;
    }    
  }
  @create h1 {
    content = 'What People are saying';
  }  
}

json-style tree.coffee

left = 
  name: 'left'
  leaf: true
  
right =
  name: 'right
  leaf: true

name: 'reposts'
  
  variants: [
  
    {
      name: '2-w-wo'
      content: [
        {
          key: 'post1'
          type: 'media'
          src:  true
        }
        {
          key: 'post2'
          type: 'media'
          src:  false
        }
      ]
      variants: [
        left
        right
      ]
    }
    
    {
      name: '2-w-w'
      content: [
        {
          key: 'post1'
          type: 'media'
          src:  true
        }
        {
          key: 'post2'
          type: 'media'
          src:  true
        }
      ]
      variants: [
      
        {
          name:'landscape'
          content: [
            key: ['post1','post2']
            aspect: 'landscape'
          ]
          variants: [
            left
            right
          ]
        }
        
        {
          name:'portrait'
          content: [
            key: ['post1','post2']
            aspect: 'portrait'
          ]
          variants: [
            left
            right
          ]
        }
        
      ]
    }

string tree without rules.coffee

'reposts'  
  '2'
    'w-wo' 1
      *right
      *left
    'w-w' 1    
      *right
      *left
      'landscape' 1
        *right
        *left
      'portrait' 1
        *right
        *left
  '1'
    'w'
      'small' .5
        *right
        *left
      'large'
        'landscape' 1
          *center
          'low_contrast_zone' 2
            *right
            *left
        'portrait' 1
          *right
          *left
  
    'w/o' .51
      *right
      *left