The granite-lit-bootstrap from lostinbrittany

granite-lit-bootstrap

granite-bootstrap is a wrapping of Bootstrap CSS CSS as LitElement lit-html CSS TemplateResult to be used in LitElement web components.

Using `granite-lit-bootstrap`

To use granite-lit-bootstrap in an element:

1. Install `granite-lit-bootstrap`

Install the component using npm:

$ npm i @granite-elements/granite-lit-bootstrap --save

2. Import granite-lit-bootstrap in the element where you want to use it

Once installed, import it in your application. Usually you will simply want to import granite-lit-bootstrap.js (wrap around bootstrap.css) or granite-lit-bootstrap-min.js (wrap around bootstrap.min.css).

Supossing you want to import granite-lit-bootstrap.js:

import {bootstrapStyles} from '@granite-elements/granite-lit-bootstrap/granite-lit-bootstrap.js';

3. Inside your component, use granite-lit-bootstrap in the static `styles` property

class GraniteSpectreExample extends LitElement {
  static get styles() {
    return [bootstrapStyles];
  }
  render() {
    return html`
      <div class="label label-rounded label-primary">Styled text</div>
    `;
  }

A complete example

import { html, LitElement } from 'lit-element';
import {bootstrapStyles} from '../granite-lit-bootstrap.js';

class GraniteSpectreExample extends LitElement {
  static get styles() {
    return [bootstrapStyles];
  }
  render() {
    return html`
      <table class="table  table-hover">
          <tr><th>Surname</th><th>Name</th></tr>
          ${this.people.map( (person) => {
            return html`
            <tr>
              <td>${person.lastname}</td>
              <td>${person.firstname}</td>
            </tr>
            `;
          })}
      </table>
    `;
  }

  static get properties() {
    return {
      people: { type: Array },
    };
  }

  constructor() {
    super();
    this.people = [
      { firstname: 'Jack', lastname: 'Aubrey' },
      { firstname: 'Anne', lastname: 'Elliot' },
      { firstname: 'Stephen', lastname: 'Maturin' },
      { firstname: 'Emma', lastname: 'Woodhouse' },
    ];
  }
}
customElements.define('granite-bootstrap-example', GraniteSpectreExample);

Contributing

Fork it!
Create your feature branch: git checkout -b my-new-feature
Commit your changes: git commit -m 'Add some feature'
Push to the branch: git push origin my-new-feature
Submit a pull request :D

Install dependencies and run the demo

Run npm install from the repo directory:
```
 npm install
```
Run the es-dev-server development server from the root project directory:
```
npm run serve
```

Note on semver versioning

I'm aligning the versions of this element with Bootstrap version, in order to make easier to choose the right version

License

Apache 2.0

lostinbrittany / granite-lit-bootstrap Goto Github PK

granite-lit-bootstrap's Introduction

granite-lit-bootstrap

Using granite-lit-bootstrap

1. Install granite-lit-bootstrap

2. Import granite-lit-bootstrap in the element where you want to use it

3. Inside your component, use granite-lit-bootstrap in the static styles property

A complete example

Contributing

Install dependencies and run the demo

Note on semver versioning

License

granite-lit-bootstrap's People

Contributors

Stargazers

Watchers

Forkers

granite-lit-bootstrap's Issues

Recommend Projects

Recommend Topics

Recommend Org

Using `granite-lit-bootstrap`

1. Install `granite-lit-bootstrap`

3. Inside your component, use granite-lit-bootstrap in the static `styles` property