Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CoffeeScript templating ideas
###
<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', ->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.