Swatches Template

swatch-template.html

<script id="swatch-template" type="text/template">
    {{#swatches}}
    <div class="col-lg-2">
        <div class="swatch color-{{.}}">
            <div class="chip"></div>
            <div class="info">
                <span>{{.}}</span>
                <small></small>
            </div>
        </div>
    </div>
    {{/swatches}}
</script>

swatches.js

(function() {
    var swatch = {
        swatches: ['primary', "secondary", "tertiary"],
        shadesofgray: ['gray-darker', "gray-dark", "gray", "gray-light", "gray-lighter"],
        statuscolors: ['success', "info", "warning", "danger"],

        init: function() {
            this.casheDOM();
            this.render();
            this.renderGray();
            this.renderStatus();
        },

        casheDOM: function() {
            this.$colorScheme = $('#color-scheme');
            this.$grayScheme = $('#gray-scheme');
            this.$statusScheme = $('#status-scheme');

            this.template = $('#swatch-template').html();
        },

        render: function() {
            var data = {
                swatches: this.swatches,
            };
            this.$colorScheme.html(Mustache.render(this.template, data))
        },

        renderGray: function() {
            var data = {
                swatches: this.shadesofgray,
            };
            this.$grayScheme.html(Mustache.render(this.template, data))
        },

        renderStatus: function() {
            var data = {
                swatches: this.statuscolors,
            };
            this.$statusScheme.html(Mustache.render(this.template, data))
        },

    };

    swatch.init();

})();

swatches.less

.swatch {
    .rounded;
    background-color: #fff;
    width: 100%;
    border:1px solid @gray-light;
    margin:10px;

    .chip {
        width: 100%;
        height: 100px;
        .border-top-radius(@border-radius-base);
    }

    .info {
        padding: .5rem 1.0rem;
        background-color: @gray-light;

        span {
            margin-bottom: 3px;
            display: block;
        }

        small {

        }
    }
}

.build-swatch(@color) {
    .chip {
        background-color: @color;
    }
    .info small:after {
        content: "@{color}";
    }
}