CoffeeScript templating ideas

gistfile1.coffee

###
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
###

# Should be predictable translations.

# Teacup

{div} = require 'teacup'
div '.row', ->
  div '.col-xs-6.col-md-4', '.col-xs-6 .col-md-4'

# teacup-view module

@div '.row', =>
  @div '.col-xs-6.col-md-4', '.col-xs-6 .col-md-4'

# other ideas (allow custom components)
#
# perhaps it could act as a kind of polyfill for web components.

@row ->
  @col xs: 6, md: 4, '.col-xs-6 .col-md-4'

# Implementation: Attach all components to `teacup` and attach `teacup` to each component under the alias `and`.
@row ->
  @col.xs6.and.col.md4 '.col-xs-6 .col-md-4'
  
# Custom join letter. Could use t, x, y, z, _, $, etc.
@row ->
  @col.xs6.y.col.md4 '.col-xs-6 .col-md-4'
  
@row ->
  @col.xs(6).and.col.md(4) '.col-xs-6 .col-md-4'
  
@row ->
  @colXs6.and.colMd4 '.col-xs-6 .col-md-4'
  
@row ->
  @colXs6 colMd4 '.col-xs-6 .col-md-4'

@row ->
  @col(xs: 6).and.col(md: 4) '.col-xs-6 .col-md-4'
  
###
<table class="table table-bordered table-hover table-condensed table-striped">
  ...
</table>
###

@table '.table-bordered.table-hover.table-condensed.table-striped', ->
  
@table ['bordered', 'hover', 'condensed', 'striped'], ->
  
@table {border: true, hover: true, condesned: true, striped: true}, ->
  
@table {border: 1, hover: 1, condesned: 1, striped: 1}

@table.bordered.hover.condensed.striped ->

@table.bordered.and.hover.and.condensed.and.striped ->
  
@table.bordered().hover().condensed().striped() ->
  
@table 'bordered', 'hover', 'condensed', 'striped', ->
  
@table 'bordered hover condensed striped', ->