grid-elements

grid-col.ts

import { LitElement, html, customElement } from '@polymer/lit-element'

const NUMBER_OF_GRID = 12

const generateCss = (screenSize) => {
  return Array.apply(0, Array(NUMBER_OF_GRID)).map((element, index) => index + 1).map(num =>
    `
      :host([${screenSize}="${num}"]) {
        -ms-flex-preferred-size: ${(100 / NUMBER_OF_GRID) * num}%;
        flex-basis: ${(100 / NUMBER_OF_GRID) * num}%;
        max-width: ${(100 / NUMBER_OF_GRID) * num}%;
      }
    `
  ).join(" ")
}

@customElement('grid-col' as any)
export class GridColElement extends LitElement {
  render() {
    return html`
      <style>
        :host {
          display: block;          
          box-sizing: border-box;
          flex: 0 0 auto;
          flex-grow: 1;
          flex-basis: 0;
          max-width: 100%;
          padding-right: var(--half-gutter-width, 0.5rem);
          padding-left: var(--half-gutter-width, 0.5rem);
        }

        ${generateCss("xs")}

        @media only screen and (min-width: 48em) {
          ${generateCss("sm")}
        }

        @media only screen and (min-width: 64em) {
          ${generateCss("md")}
        }

        @media only screen and (min-width: 75em) {
          ${generateCss("lg")}
        }
      </style>
      <slot></slot>
    `
  }
}

grid-elements.css

:root {
  --gutter-width: 1rem;
  --outer-margin: 2rem;
  --gutter-compensation: calc((var(--gutter-width) * 0.5) * -1);
  --half-gutter-width: calc((var(--gutter-width) * 0.5));
  --xs-min: 30;
  --sm-min: 48;
  --md-min: 64;
  --lg-min: 75;
  --screen-xs-min: var(--xs-min)em;
  --screen-sm-min: var(--sm-min)em;
  --screen-md-min: var(--md-min)em;
  --screen-lg-min: var(--lg-min)em;
  --container-sm: calc(var(--sm-min) + var(--gutter-width));
  --container-md: calc(var(--md-min) + var(--gutter-width));
  --container-lg: calc(var(--lg-min) + var(--gutter-width));
}

grid-row.ts

import { LitElement, html, customElement } from '@polymer/lit-element'

@customElement('grid-row' as any)
export class GridRowElement extends LitElement {
  render() {
    return html`
      <style>
        :host {
          box-sizing: border-box;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-flex: 0;
          -ms-flex: 0 1 auto;
          flex: 0 1 auto;
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
          -ms-flex-direction: row;
          flex-direction: row;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;
          margin-right: -.5rem;
          margin-left: -.5rem;
        }
      </style>
      <slot></slot>
    `
  }
}

index.html

<style>
  .box-row {
    position: relative;
    box-sizing: border-box;
    min-height: 1rem;
    margin-bottom: 1rem;
    background: #007FFF;
    border: 1px solid #FFF;
    border-radius: 2px;
    overflow: hidden;
    text-align: center;
    color: #fff;
    padding: 1rem;
  }
</style>

<section>
  <h2>Responsive</h2>

  <p>
    Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm,
    md &amp; lg viewport widths.
  </p>

  <grid-row>
    <grid-col xs="12" sm="3" md="2" lg="1">
      <div class="box-row"></div>
    </grid-col>
    <grid-col xs="6" sm="6" md="8" lg="10">
      <div class="box-row"></div>
    </grid-col>
    <grid-col xs="6" sm="3" md="1" lg="1">
      <div class="box-row"></div>
    </grid-col>
  </grid-row>
  <grid-row>
    <grid-col xs="12" sm="3" md="2" lg="1">
      <div class="box-row"></div>
    </grid-col>
    <grid-col xs="12" sm="9" md="10" lg="11">
      <div class="box-row"></div>
    </grid-col>
  </grid-row>
  <grid-row>
    <grid-col xs="10" sm="6" md="8" lg="10">
      <div class="box-row"></div>
    </grid-col>
    <grid-col xs="2" sm="6" md="4" lg="2">
      <div class="box-row"></div>
    </grid-col>
  </grid-row>
</section>