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/


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 class="default" />

Import css theme tu customize appearence.

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

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']