# style-tile-elements

> Style Tile Web Elements

Latest version **0.0.6** (published 2021-10-02) · GPL-3.0 license · 0 weekly downloads

## Install

```sh
npm install style-tile-elements
pnpm add style-tile-elements
yarn add style-tile-elements
bun add style-tile-elements
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.6 |
| Published | 2021-10-02 |
| First published | 2021-09-06 |
| Weekly downloads | 0 |
| License | GPL-3.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 7.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | andresmazzo |

## Links

- npm: https://www.npmjs.com/package/style-tile-elements
- npm.io page: https://npm.io/package/style-tile-elements

## Dependencies (1)

- [@stencil/core](https://npm.io/package/@stencil/core.md) ^2.8.1

## Recent versions

- 0.0.6 (latest) — 2021-10-02
- 0.0.4 — 2021-09-07
- 0.0.3 — 2021-09-07
- 0.0.2 — 2021-09-07
- 0.0.1 — 2021-09-06

## README

## Style Tile Web Elements

Highly-customized Style Tile Creator using Web Components and JS/CSS.


See full documentation: https://man.sr.ht/~andresmazzo/style-tile-elements/

## Usage

Implement style tile in one line.

```
<style-tile class="default" />
```

Customize the style tile using a web editor for super easy real time configuration.

```
<style-tile-editor>
  <style-tile class="default" />
</style-tile-editor>
```

Import css theme tu customize appearence.

```
<head>
    <link rel="stylesheet" href="https://unpkg.com/style-tile-elements@0.0.2/dist/style-tile-elements/styles/default.css">
</head>
```

Override theme via css variables.

```
style-tile.default {
  --style-tile-color: var(--style-tile-color-3);
  --style-tile-background-color: #CCC;
}
```

Set project and elements (buttons, colors, adjectives, patterns, typos) via JS:

```
const elem = document.querySelector('style-tile.default');
elem.project = {
  version: "v0.0.2",
  logo: "/assets/logo80.png",
  name: "Style Tile Project",
  author: "Andres Mazzo",
  website: "https://andresmazzo.com"
};
elem.elements = {
  buttons: [
    {
      type: 'secondary',
      text: 'Back'
    },
    {
      type: 'primary',
      text: 'Next'
    }
  ],
  colors: ['#3e778a', '#ad3', '#333'],
  patterns: ['/assets/texture-1.jpg', '/assets/texture-2.jpg', '/assets/texture-3.jpg'],
  typos: [{
    size: 'h1',
    text: 'Header'
  },
  {
    size: 'h2',
    text: 'Subheader'
  },
  {
    size: 'p',
    text: 'Lorem Ipsum bla bla bla'
  }],
  adjectives: ['some', 'cool', 'adjectives']
};
```

---
_Source: https://npm.io/package/style-tile-elements · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._