Meet npm Pro: unlimited public & private packages + package-based permissions.Learn more »

@collaborne/lit-flexbox-literals

0.2.2 • Public • Published

Flex Box Literals and Classes for LitElements Build Status

**Ported from @polymer/iron-flex-layouts, Configured for LitElement, LitHtml, and Constructable Style Sheets**

Usage With Classes

import {LitElement, html} from 'lit-element';
import {Layouts} from 'lit-flexbox-literals';
 
class MyElement extends LitElement {
  static get styles() {
    return [Layouts];
  }
 
  render() {
    return html`
      <div class="layout horizontal center-center"></div>
    `;
  }
}

Usage With Literals

import {LitElement, html, css} from 'lit-element';
import {
  displayFlex,
  horizontal,
  centerAligned,
  centerJustified,
} from 'lit-flexbox-literals';
 
class MyElement extends LitElement {
  static get styles() {
    return css`
        :host{
          ${displayFlex}
          ${horizontal}
          ${centerAligned}
          ${centerJustified}
 
        }
 
        div{
          ${displayFlex}
          ${horizontal}
          ${centerAligned}
          ${centerJustified}
        }
      `;
  }
 
  render() {
    return html`
      <div></div>
    `;
  }
}

Install

npm i @collaborne/lit-flexbox-literals

DownloadsWeekly Downloads

148

Version

0.2.2

License

ISC

Unpacked Size

18.7 kB

Total Files

8

Last publish

Collaborators

  • avatar
  • avatar
  • avatar