~andresmazzo/style-tile-elements

Create amazing web style tiles
~andresmazzo/style-tile-elements

New git repository added

a day ago

#Style Tile Web Elements

Want to create a modern Style Tile for free using FOSS Software? Continue reading?

#Using this component

#Script tag

  • Put a script tag similar to this <script src='https://unpkg.com/style-tile-elements@0.0.1/dist/style-tile-elements/style-tile-elements.esm.js'></script> in the head of your index.html
  • Then you can use the element anywhere in your template, JSX, html etc

#Node Modules

  • Run npm install my-component --save
  • Put a script tag similar to this <script src='node_modules/style-tile-elements/dist/style-tile-elements/style-tile-elements.esm.js'></script> in the head of your index.html
  • Then you can use the element anywhere in your template, JSX, html etc

#In a stencil-starter app

  • Run npm install style-tile-elements --save
  • Add an import to the npm packages import style-tile-elements;
  • Then you can use the element anywhere in your template, JSX, html etc

#Usages

#Style Tile

<style-tile class="default" />

#Editor

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

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

#Customizations

#Styles

Import css theme:

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

Override css variables:

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

#Content

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