grid-template v1.0.5

grid-template

Webcomponent that abstract grid-template-areas boilerplate!

Installation

yarn add grid-template

import "grid-template";

Example

Turn this

  <grid-template
    debug
    columns="minmax(15rem, 25%) auto"
    rows="3rem auto 3rem"
    .areas=${[
      "header header",
      "sidebar main",
      "footer footer"
    ]}
    .hostStyles=${css`
      :host {
        width: 100vw;
        height: 100vh;
      }
    `}
  >
    <div slot="header">Header</div>
    <div slot="sidebar">Sidebar</div>
    <div slot="main">Main</div>
    <div slot="footer">Footer</div>
  </grid-template>

into this

API

  @property({ type: Boolean })
  debug = false;

  @property({ type: String })
  columns!: string;

  @property({ type: String })
  rows!: string;

  @property({ type: Array })
  areas!: string[];

  @property({ type: Array })
  hostStyles: CSSResult[] | CSSResult = [];

  @property()
  ignore: string[] | string = [];

TODO

• Guard each property separately, to allow for somewhat cheap update