~andresmazzo/style-tile-elements

clone

read-only
https://git.sr.ht/~andresmazzo/style-tile-elements
read/write
git@git.sr.ht:~andresmazzo/style-tile-elements

You can also use your local clone with git send-email.

#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']
};