Abstraction.md

This "template"...

grid('.grid_relaxed', { tagName: 'section' }, [
    grid.col('.grid-col_3of12.mix-grid-col_prefix1of12', { 'data-tag': 'foo' }, [
        nav([
            vList({ tagName: 'ol' },
                data.navItems.map(navItem => {
                    h('li', [
                        nav.anchor({ href: navItem.url }, [ navItem.label ])
                    ])
                })
            )
        ])
    ]),
    grid.col('.grid-col_8of12', [
        touchButton([ 'Check In' ])
    ])
]);

is essentially this:

<section class="grid grid_relaxed">
    <div class="grid-col grid-col_3of12 mix-grid-col-prefix1of12" data-tag="foo">
        <nav class="nav">
            <ol>
                {{#each data.navItems}}
                    <li>
                        <a href="{{ url }}" class="nav-anchor">{{ label }}</a>
                    </li>
                {{/each}}
            </ol>
        </nav>
    </div>
    <div class="grid-col grid-col_8of12">
        <button is="m-touch-button" class="btn">
            <span class="btn-locus"></span>
            Check In
        </button>
    </div>
</section>