Polymer Bootstrap Grid

Use Bootstrap responsive grid styles in a Polymer component.

by Keith Henry

HTML

<link href="https://polygit.org/components/polymer/polymer.html" rel="import">

<dom-module id="bootstrap-grid">
    <template strip-whitespace>
        <style>
            :host {
                display: block;
                margin-right: auto;
                margin-left: auto;
                padding-left: var(--bootstrap-grid-gutter, 15px);
                padding-right: var(--bootstrap-grid-gutter, 15px);
            }

            /* Apply border-box to everything */
            :host ::content * {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }

                :host ::content *:before,
                :host ::content *:after {
                    -webkit-box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    box-sizing: border-box;
                }

            /* Clear fix/fix floats for the grid container and each row */
            :host:before,
            :host:after,
            :host ::content .row:before,
            :host ::content .row:after {
                content: " ";
                display: table;
            }

            :host:after,
            :host ::content .row:after {
                clear: both;
            }

            :host ::content .row {
                margin-left: var(--bootstrap-grid-gutter * -1, -15px);
                margin-right: var(--bootstrap-grid-gutter * -1, -15px);
            }


                /* Default xs styles */
                :host ::content .row > .col-xs-1,
                :host ::content .row > .col-sm-1,
                :host ::content .row > .col-md-1,
                :host ::content .row > .col-lg-1,
                :host ::content .row > .col-xs-2,
                :host ::content .row > .col-sm-2,
                :host ::content .row > .col-md-2,
                :host ::content .row > .col-lg-2,
                :host ::content .row > .col-xs-3,
         ...